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

Question

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

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

在Mike的例子 d3.geo.path + Canvas中你失去了SVG的所有交互性和css风格支持.

在OpenLayers-3示例站点上,有一个交互式地图,它将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
                    })
                })
});