相关疑难解决方法(0)
如何在Leaflet.js中更改地图中心
以下代码初始化传单映射.初始化函数基于用户位置使地图居中.调用初始化函数后,如何将地图中心更改为新位置？
function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
map.locate({setView: true, maxZoom: 8});
}
推荐指数
解决办法
查看次数
使用d3.js和geojson显示地图
我正在玩D3的地理模块.我对D3有一些经验,但这是我第一次尝试使用地理模块.我从以下代码(来自https://github.com/alignedleft/d3-book/blob/master/chapter_12/04_fill.html)开始显示美国地图(https://github.com/alignedleft/d3- book/edit/master/chapter_12/us-states.json)编辑 (文件现在可以在https://github.com/alignedleft/d3-book/releases/tag/v1.0下载的zip中找到)在albers中投影和修改以采取印度的Geojson(indiastates1.json下面).该代码适用于US文件,但不显示任何与印度json文件.我在这里错过了一些东西.任何帮助表示赞赏.我确实将投影改为mercator.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Setting path fills</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geo.mercator()
.translate([w/2, h/2])
.scale([500]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h); …推荐指数
解决办法
查看次数
用D3绘制地图上的点
我正在尝试使用基于纬度和经度的D3地理库将几个点绘制到地图上.但是,当我将这些值传递给我的投影函数时,它会产生我的SVG图像边界之外的坐标.我的代码基于文档中提供的此示例.
我已将当前代码抛出:http://bl.ocks.org/rpowelll/8312317
我的源数据是一个简单的对象数组,格式如此
var places = [
{
name: "Wollongong, Australia",
location: {
latitude: -34.42507,
longitude: 150.89315
}
},
{
name: "Newcastle, Australia",
location: {
latitude: -32.92669,
longitude: 151.77892
}
}
]
在此之后我设置了一个PlateCarrée投影,如下所示:
var width = 960,
height = 480
var projection = d3.geo.equirectangular()
.scale(153)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection)
从那里我使用与链接示例有效相同的代码绘制地图.在我的脚本结束时,我使用以下代码在此地图上绘制点:
svg.selectAll(".pin")
.data(places)
.enter().append("circle", ".pin")
.attr("r", 5)
.attr("transform", function(d) {
return "translate(" + projection([
d.location.latitude,
d.location.longitude
]) + …推荐指数
解决办法
查看次数
在d3中缩放投影意味着什么？
我知道在D3中,比例是从输入数据值(域)到输出数据值(范围)的数学映射.我知道我可以设置一个比例,将域中的输入映射到范围,如下所示:
var scale = d3.scale.linear().domain([100, 500])
.range([10, 350]);
scale(100); //Returns 10
我知道一旦你设置了一个比例,你可以使用它来缩放属性,如下所示:
.attr("cx", function(d) {
return scale(d[0]); //Returns scaled value
})
但是,在Bostock的映射教程中,使用的规模略有不同.Bostock在mercator投影返回的任何内容上调用scale:
var projection = d3.geo.mercator()
.scale(500)
.translate([width / 2, height / 2]);
我试图理解这行代码并遇到一些麻烦.mercator()返回一些东西 - 这在API中并不那么清楚 - 然后在scale输入值为500的该对象上调用该方法.
在这样的投影上称"缩放"是什么意思？这与scale()如何在10中转换100相关 - 如上例所示.
更直接的是,如果我将其添加到我的代码中,我的geojson地图就会消失!如何使其正确缩放？
var projection = d3.geo.mercator()
.scale(500)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection); //if I add this little bit to the path, my map disappears!
这是我正在使用的GeoJSON:http://geojson.io/#id=gist:AbeHandler/9d28239c592c6b552212&map=10/29.9912/-89.9320
推荐指数
解决办法
查看次数
path.bounds()如何工作？
有人能告诉我以下代码究竟发生了什么？我知道它用于缩放,但是在这个上下文中2-d边界数组的作用是什么？
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
提前致谢.
推荐指数
解决办法
查看次数
D3.Geo在平移/缩放上的表现
去年,我使用Mapnik库(服务器端,位图/平铺)在Web地图上进行了几次实验.现在,我正在尝试使用d3.js的向量,客户端方法复制相同的实验.
我有一张地图(约680个形状),这里zoom很慢而且pan很迟钝(Mike Bostock的这个例子效果很好).我怀疑问题出在zoommove回调中,selectAll("path").attr("d", path)花了太长时间.
function zoommove() {
projection.translate(d3.event.translate).scale(d3.event.scale);
mapa.selectAll("path").attr("d", path);
console.log('zoommove fired...');
}
问题:
- 我在这里做错了吗？
- 我该怎么做才能优化表现？
数据源采用topojson格式.它被简化了,可能已经太多了,因为有些形状没有关闭:
[UPDATE]
看起来即使在没有简化标志的情况下运行topojson时也会出现打开几何的问题,我还在调查.我会很感激这里的任何线索,文档不是很详细.
推荐指数
解决办法
查看次数
D3 - 大型GeoJSON文件未使用投影正确显示绘图
我在绘制从data.seattle.gov中提取的GeoJSON文件时遇到问题.具体来说,我正在使用可在此处找到的Shape文件.我将它转换为GeoJSON文件,我在下面提供了一个小样本.
通过使用D3,我希望得出西雅图应该是不同的区域(实际上我不完全确定它应该是什么,这就是为什么我画它...哈...)但由于某种原因尽管正确计算了路径,但它没有正确显示.
我在这里举办了我的例子.当我有时间设置它时,我会尝试用jsFiddle替换这个链接.问题是,GeoJSON文件非常大,所以我不认为jsFiddle是理想的.
我的代码很简单......我只是根据GeoJSON文件的功能添加路径.
var width = 1000,
height = 1000;
var svg = d3.select("body")
.append("svg")
.attr("width", width + "px")
.attr("height", height + "px");
var projection = d3.geo.mercator()
.scale(150)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("geojson/data.geo.json", function(data) {
console.log(data);
g.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-width", "5px")
.attr("fill-opacity", 0);
});
不幸的是,我觉得它只显示其中一条路径而不是所有路径.起初我以为可能是因为有某种填充而且它们只是隐藏在彼此之上,但我将其设置fill-opacity为0,这也没有帮助.
以下是GeoJSON文件的一小部分示例.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ …推荐指数
解决办法
查看次数
Shapefile到Topojson的转换
我正在尝试转换可在此处找到的加纳admin1 shapefile .我的最终目标是获得此问题中描述的TopoJSON .我在Linux机器上使用过这个命令:
ogr2ogr -f GeoJSON GHA_adm1.json GHA_adm1.shp
它返回:
Unable to open datasource `GHA_adm1.shp' with the following drivers.
... here goes a long list of drivers...
我做错了什么？我应该安装其他"司机"吗？但是怎么样？谢谢.
推荐指数
解决办法
查看次数
缩放D3.js中的地理坐标
我喜欢在每个坐标中画一个圆圈.只使用width,height以及coordinates,如何调整坐标？我对D3.js很新,我猜我在投影部分做错了.
var width = 200,
height = 200;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var coordinates = [ [43.08803611,-79.06312222],
[43.09453889,-79.05636667] ];
var group = svg.append('g');
var projection = d3.geo.mercator()
.translate([width,height]);
var projectedCoordinates = [];
for (var i=0; i<coordinates.length; i++) {
projectedCoordinates[i] = projection(coordinates[i]);
}
group.selectAll("circle")
.data(projectedCoordinates)
.enter()
.append("circle")
.attr("r",4)
.attr("cx", function(d){ return d[0]; })
.attr("cy", function(d){ return d[1]; });
推荐指数
解决办法
查看次数