是否有可能使用d3.js和传单的白色底图？

Question

我正在使用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);

谢谢！

Answer 1

只是不要向地图添加任何L.TileLayer，并使用CSS设置其背景。

Answer 2

如果您愿意尝试，可以使用mapbox-gl.js库，它允许使用个性化矢量切片作为底图，因此您可以自定义底图的任何元素。 Here您可以找到一些指南。然后，就像将属性传递给地图定义一样简单：

//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处理数据层，如example所示，您只需在将数据加载到update()和projectPoint(lon, lat)函数后加入SVG元素。

我最近设法配置了矢量图块，它很棒，它们在平移/缩放/旋转时运行得如此顺畅。