1.5.3.1.18.7 D3

优质

小牛编辑

135浏览

2023-12-01

D3 是基于数据操作 html 文档的可视化 javascript 库，D3 能够把数据和 HTML、SVG、CSS 结合起来，创造出可交互的数据图表。D3 强调 Web 标准，使您可以在不依赖于专有框架的情况下，充分利用现代浏览器的功能，将强大的可视化组件和数据驱动的方法结合在 DOM 操作中。

浏览器兼容方面，D3 支持最近的浏览器，如 Chrome，Edge，Firefox和Safari。D3 4.0及以下版本也支持 IE9 及以上。D3 的部分模块可以在较旧的浏览器中工作。

D3 官网地址为:

https://d3js.org/

SuperMap iClient for Leaflet 提供了对使用 D3 可视化效果图层的支持，接口为 L.supermap.d3Layer(callback)

var uniqueMap = {
"草地": "rgb(193,255,193)",
"城市": "rgb(205,112,84)",
"灌丛": "rgb(124,205,124)",
"旱地": "rgb(238,154,73)",
"湖泊水库": "rgb(142,229,238)",
"经济林": "rgb(222,184,135)",
"水浇地": "rgb(224,255,255)",
"水田": "rgb(56,142,142)",
"用材林": "rgb(85,107,47)",
"沼泽": "rgb(47,79,79)",
"缺省风格": "rgb(171,171,171)"
};
var d3Layer = L.supermap.d3Layer(function (sel, proj) {
var upd = sel.selectAll('path').data(serviceResult.result.features.features);
upd.enter()
.append('path')
.attr('d', proj.pathFromGeojson)
.attr('fill', function (feature) {
return uniqueMap[feature.properties.LANDTYPE];
})
.attr('fill-opacity', '0.8');
d3Layer.addTo(map);

查看完整示例代码