OpenLayers 3 交互式地图中的 D3.js SVG答案

【问题标题】：D3.js SVG on OpenLayers3 interactive mapOpenLayers 3 交互式地图中的 D3.js SVG
【发布时间】：2015-07-22 12:35:02
【问题描述】：

我试图弄清楚将 D3.js 与 OpenLayers 3 集成以创建漂亮的交互式地图有多难。

我正在查看 Mike 的示例，D3 + Leaflet： http://bost.ocks.org/mike/leaflet/

在Mike`s exampled3.geo.path + Canvas 处，您将失去所有交互性和 SVG 的 css 样式支持。

而在OpenLayers-3 example site 上，有这张交互式地图，它将 Mike 的 d3.geo.path 示例 + Canvas 与 OpenLayers 集成以创建交互式地图：

所以我想知道，OpenLayers3 中缺少什么来允许创建类似于 D3 + Leaflet 示例的东西，或者甚至可以考虑 OL3 设计？

【问题讨论】：

有多难？接近不可能的地方。
D3+美国各县宣传单jsfiddle.net/hthbLw4j/1
OpenLayers 与美国县和选择：jsfiddle.net/6r8rat8n/2

标签： d3.js leaflet openlayers-3

【解决方案1】：

您不能在 openlayers 上使用传单使用的 css 方法，D3 + openlayer 基本上使用 d3 在用作图像层的画布上绘制数据。

您需要使用 openlayer 方法：layers + style ，您可以与 openlayers "imagevector" 图层有相似的性能。

我用 style + imagevector 编辑了你的 jsfiddle：

http://jsfiddle.net/6r8rat8n/5/

var vector = new ol.layer.Image({
    source: new ol.source.ImageVector({
        source: vectorSource,
        style: new ol.style.Style({
            fill: new ol.style.Stroke({
                color: '#efefef',
                width: 1
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        })
    })
});


// select interaction working on "mousemove"
var selectMouseMove = new ol.interaction.Select({
  condition: ol.events.condition.mouseMove,
    style: new ol.style.Style({
                    fill: new ol.style.Stroke({
                        color: 'red',
                        width: 1
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 1
                    })
                })
});

【讨论】：

正是我想要的，非常感谢！但我想明白，为什么有人会使用 VectorLayer？
矢量图层响应更快，缩放时没有像素。它适用于少量数据

【解决方案2】：

openlayers.v4 和 d3.v4 可以。看看这些要点和小提琴。

https://gist.github.com/grabantot/64ff2daafdb85c7ffd187fe391755494/ https://jsfiddle.net/grabantot/3gq5wbqz/

调用init_ol_d3(map)，它会返回一个在longlat和screen之间缩放的函数，然后你可以像往常一样使用d3和css：

drawRoute = d3.line()
    .x(function(lonlat) { return s(lonlat)[0] })
    .y(function(lonlat) { return s(lonlat)[1] })

将鼠标悬停在线条上，它会按照 css 中的设置改变颜色。很抱歉解释不佳，这是我工作日的结束。有关更多信息，请参阅要点。旋转（alt+shift+mouse）不起作用（我还不需要）。也许有人会修复...

【讨论】：