我正在使用 d3 和传单在世界地图上可视化数据。我希望底图图层为白色,就像以下链接中的图层一样。
https://resistancemap.cddep.org/AntibioticUse.php
不过 CartoDB 不支持白色基础层。我使用的是正电子。有没有办法用d3和传单使灰色区域变成白色?
这是添加图层的代码..
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
});
var map1 = L.map('map1', {
center: [19.711510, -4.935242],
zoom: 2,
layers: [positron]
});
var baseLayers = {
"Grayscale (CartoDB)": positron
};
var d3Layer = L.Class.extend({
initialize: function() {
return;
},
onAdd: function() {
d3.select("div#map1 .legend").style("display", "block");
d3.select("div#map1 .regions").style("display", "block");
},
onRemove: function() {
d3.select("div#map1 .regions").style("display", "none");
d3.select("div#map1 .legend").style("display", "none");
},
});
var svgLayer = new d3Layer();
var overlays = {
"GeoJSON Regions": svgLayer
};
L.control.layers(baseLayers, overlays).addTo(map1);
谢谢!
如果你愿意尝试,你可以使用 mapbox-gl.js 库,它允许使用个性化的矢量图块作为底图,这样你就可以自定义底图的任何元素。在这里你可以找到一些指导方针。然后,就像将属性传递给地图定义一样简单:
//Mapbox API Token
mapboxgl.accessToken = '{API TOKEN}'
//Setup mapbox-gl map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/{USERNAME}/{STYLE_ID}', //Copied from Mapbox Studio
center: [Lng, Lat],
zoom: 4,
})
此外,您可以使用 D3.js 来处理您的数据层,如本例所示,您只需要在将数据加载到 SVG 元素后包含update()
和projectPoint(lon, lat)
函数。
我最近设法配置了矢量切片,它们在平移/缩放/旋转时的运行非常流畅。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句