个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在努力适应 Mike Bostock's D3/Leaflet example绘制点/路径。我无法让这个脚本工作。 JSON 已验证 - 请参阅 Github。它也无法通过 Python local server 运行.感谢任何关于我哪里出错的提示。
也可以在 Github 查看并在 bl.ocks 工作. The JSON file .
<!DOCTYPE html>
<html>
<head>
<title>Calibration-check points using Leaflet and D3</title>
<!-- Points are London O2 Arena, Washington Monument, Cape Town Stadium and the Sydney Opera House -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<style>
#mapA
{
border:2px solid;
border-radius:0;
height: 99.5%;
}
html, body { height: 100%; width: 100%; margin: 0; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<p id="mapA" height: 100%></p>
<script>
// Function to check JSON is valid
geogjnfile = 'reference_points.geojson';
function validateJSON()
{
$.ajax({
url: 'http://geojsonlint.com/validate',
type: 'POST',
data: geogjnfile,
dataType: 'json',
success: processSuccess,
error: processError
});
}
function processSuccess() {console.log("JSON OK");}
function processError() {console.log("JSON Invalid");}
validateJSON();
var markersOnMap = [];
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
cloudmadeAttribution = ' 2013 CloudMade';
var minimal = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
midnight = L.tileLayer(cloudmadeUrl, {styleId: 999, attribution: cloudmadeAttribution});
var map = L.map('mapA', {
center: new L.LatLng(20, 0),
zoom: 2,
layers: [minimal]
});
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("https://dl.dropboxusercontent.com/u/46043231/data/reference_points.geojson", function(collection) {
function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
var path = d3.geo.path().projection(project);
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path");
feature.attr("d", path);
var bounds = d3.geo.bounds(collection),
bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
svg .attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
});
var baseMaps = {
"Minimal": minimal,
"Night View": midnight
};
</script>
</body>
</html>
最佳答案
看起来您在 d3.geo.bounds() 中遇到了错误。对于您的数据，它返回
[[151.21495788612214, -33.90365832941416],
[18.41118908051975, 51.50298551279427]]
而边界应该是
[[-77.035237489892879, -33.903658329414156],
[151.21495788612214, 51.502985512794268]]
如果您手动指定这些边界，一切正常 -- http://jsfiddle.net/C7yNh/
我已经打开了关于这个的错误报告 here .
编辑
好吧，我认为正确。这实际上是正确的行为，因为最小边界框穿过反子午线。在这种情况下，您需要使用 path.bounds() 获取边界框坐标，并且返回的点是左上角和右下角，因为 x/y 与传单交换。工作 jsfiddle here ，感谢 Mike Bostock。
关于d3.js - 无法在 D3/Leaflet 应用程序中绘制 GeoJSON 点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19520835/
24
4
0
我正在尝试按照此链接 http://bost.ocks.org/mike/map/ 上的教程进行操作到目前为止，我已经完全按照列出的每条说明进行操作，但是当我尝试运行“#Converting Data
何我可以反转一个国家的 GeoJson，以便它将国家定义为世界地图多边形中的一个洞？我需要这个来在 OpenLayers 5.3 中创建 GeoJson VectorLayer 的蒙版。 最佳答案 在
我在构建 GeoJSON 并将其放在 map 上的传单代码方面遇到了一些麻烦。 GeoJSON 是根据服务的 XML 响应构建的。 错误是 无效的 GeoJSON 对象。 throw new Erro
我有一个 geojson 表示插值天气数据的等高线层。某些轮廓在更高的缩放级别消失，如以下屏幕抓图所示。 将多边形作为图层添加到 Mapbox 时，使用以下代码: map.addSource('min
我有一些地理边界 have a GeoJSON endpoint for . 我还有一些变量存储在单独的 GeoJSON endpoint 中它没有坐标，但确实有我想稍后使用 D3 对 map 进行主
我是 MapBox GL Js 的新手，我想通过 https 调用一个大的 GeoJSON 文件并将其显示到 map 上。 我认为调用 vector Tile 是最好的方法，我找到了一些教程，展示了如
我已经使用 SQL 到 geoJSON 生成了我的数据库的一些兴趣点。 地理数据: { "FeatureCollection" : [ { "g
创建一张与此处找到的 map 类似的 map : https://www.plantmaps.com/interactive-california-2012-usda-plant-zone-hardi
我对 ammCharts 比较陌生，这也是我第一次尝试创建 geoJSON 文件。 以下是我的geoJson文件: GeoJSON file 这就是我要实现的目标: example 当我加载我的 ge
我有几个 geojson 层，并且我使用组将其分层。我使用此处找到的 Mike 答案将 map 集中在给定的 geojson 文件上 -> Center a map in d3 given a geo
环回新手，但设置我的第一个基于节点的 RestAPI 很有趣。我能够创建模型并在数据存储中创建关联的表。我的模型需要具有数据类型 geojson 的属性，即以下形式的字符串: { “类型”:“特征”，
我使用传单构建了一个 map ，其中包含大的 GeoJSON 区域，这些区域由多个“较小”的 GeoJSON 区域组成。 我正在使用 Leaftet-Ajax 来这样调用它们: var Rennes
我已经能够让其中的一部分工作，但是当 properties.affectedZones 有多个条目时，我的 jQuery 失败了。我已经使用 .each 努力显示受到红旗警告的受影响区域，但是当有两个
我需要对从 geojson 文件中提取的每个功能进行不同的样式设置。然而，这个匿名样式函数仅更改它遇到的第一个功能的样式并停止。我是传单新手。看过几个演示，但找不到这个匿名样式函数仅更改第一个功能的样
我有多个 geojson 类型:存储在 Mysql 中的 FeatureCollection。我想将两个或多个 geojson 合并到一个 FeatureCollection geojson 中并显示
我有这个 geojson { "type":"FeatureCollection", "features":[ { "type":"Feature",
我正在尝试在基于标准 HelloWorld 示例应用程序的测试应用程序中加载以下 geoJson 文件。 { "type": "FeatureCollection", "generator":
我正在使用 GeoJSON 数据构建传单 map 。尝试根据 GeoJSON 属性设置我使用的图标时遇到问题。我认为我的错误与使用字符串调用对象有关，但我无法弄清楚它到底是什么。 这是我的代码: Ge
我有包含如下地理字段的文档。 "geo" : { "type" : "Point", "coordinates" : [ 37.44609999, -1
是否可以仅使用 JavaScript(通过 d3、topojson 或任何其他方式)确定给定纬度、经度的 GeoJSON 点是否位于给定 GeoJSON 多边形内？ 例如，我可以根据教程 here 绘
我是一名优秀的程序员,十分优秀！