是否可以使用 d3.js 和传单获得白色底图?

用户5750877

我正在使用 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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

是否可以使用jQuery .on和悬停?

是否可以使用Sequelize.js进行子查询?

是否可以使用HTML / JS / CSS创建透明窗口?

使用d3可视化传单上的点

D3:是否可以使用“抛物线”刻度?

使用Node.js,JSDOM和Jasmine测试d3

如何使用D3 d3js根据元素的属性分层附加“组成”的元素?

使用D3 JS绘制条形图

d3和crossfilter js错误

不使用SSR是否可以使用Next.js?

是否可以使用for循环和mutate()?

Ext.js-开放工具和ext.js 7是否可以使用es6类语法

如何使用D3插件设置rollup.js?

是否可以使用d3并创建类似于vis.js的线/曲线?

是否可以使用Node.js和Express通过request.query传递对象数组?

D3.js是否可以使用嵌套数据在每个点上绘制圆?

是否可以使用RegEx在mongodb和node.js中找到其超集的字符串?

使用d3 js和国家(地区)topojson文件分别绘制状态

D3js是否可以使用自定义节点创建类似于树形结构的视图

是否可以使用D3 JS在Hue中创建自定义窗口小部件?

是否可以使用mediaelement.js在我的网站上包含和播放iTunes播客?

在传单上使用d3使SVG透明

使用Package JS的Dart D3系列

使用d3 js在phant中绘制json数据

JS 和/或 D3 存储动态用户输入的方法

使用 d3 和 dc.js 自定义时间线刻度

是否可以使用 SQL 和 PHP 从 4D 数据库读取/写入

D3中是否可以使用带有垂直线的水平条形图

是否可以使用附加文本制作轴刻度以在 d3 中具有动态填充?