Question

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

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

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

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

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

Answer 1

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

您需要使用openlayer approch：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
                    })
                })
});

Answer 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 +鼠标）不起作用（我还不需要）。也许有人会做出修复......

OpenLayers3交互式地图上的D3.js SVG

2 个答案: