OpenLayers3 交互式 map 上的 D3.js SVG

Question

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

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

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

关于 OpenLayers-3 example site ，有这个交互式 map ，它集成了 Mike 的 d3.geo.path + Canvas 和 OpenLayers 示例来创建交互式 map :

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

Answer 1

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

您需要使用openlayer的方法:图层+样式，您可以与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
                    })
                })
});