使用openlayers 3从svg图像创建图层[重复]答案

【问题标题】：Creating a layer from svg image using openlayers 3 [duplicate]使用openlayers 3从svg图像创建图层[重复]
【发布时间】：2016-01-31 09:45:03
【问题描述】：

所以我正在尝试获取大的 svg 文件并将其用作开放图层 3 地图上的图层。我只想显示 svg，下面没有任何地图。试图获得答案产生了一些关于为此使用图标标记的信息，但我无法使其工作。

有谁知道如何简单地将 svg 文件显示为图层？

【问题讨论】：

在地图“postcompose”事件中，您可以获取画布上下文并在地图上绘制。也许这就是你想要的？向地图添加一个“postcompose”事件监听器......你应该能够找到一些例子
您可能需要将其转换为一组向量，默认情况下 ol 层中的对象需要进行地理定位，否则渲染器将不知道在哪里绘制与其他所有内容相关的 svg .
我将其转换为矢量没有问题，但我无法对其进行地理定位，因为它不是地理数据。
为什么你想显示 svg 下没有任何地图，它是如何被 openmaps 约束的？你能详细说明你正在尝试做什么或分享一些代码吗？

标签： javascript svg openlayers-3

【解决方案1】：

我刚刚在另一个类似问题中回答了这个问题。请参阅that answer 以获取可运行的示例。

要点：只需将 svg 文件作为 ol.source.ImageStatic 的 url 包含在内。

【讨论】：

如果另一个问题是相同的，那么应该作为重复关闭。如果不一样，那么可以定制答案来回答这个问题中的具体问题。参考：Is it acceptable to add a duplicate answer to several questions?.
谢谢，我第二次将此问题标记为另一个问题的副本。
哇，太棒了！正是我想要的，谢谢老兄。

【解决方案2】：

默认情况下，图层中的对象需要进行地理定位，以便渲染器知道在哪里绘制它们。我发现的一个 hack 涉及使用 D3 将 svg 特征映射到具有用于渲染器的自定义投影函数的向量中。它还处理监听移动/平移。见：http://bl.ocks.org/pbogden/6283017

这里复制的解决方案中的一些代码

d3.json("us-states.json", function(err, collection) {
    var bounds = d3.geo.bounds(collection),
        path = d3.geo.path().projection(project), // create a d3.geo.path that converts GeoJSON to SVG
        vector = new OpenLayers.Layer.Vector( "states" ); // create a vector layer

    // Use D3 to add the states after the vector layer has been added to the map
    vector.afterAdd = function() {
        var div = d3.select("#"+vector.div.id);
        div.selectAll("svg").remove();  // Prepare OpenLayers vector div to be the container for D3

        var svg = div.append("svg"),
            g = svg.append("g");

        var states = g.selectAll("path")
                .data(collection.features)
              .enter().append("path");

        reset();

        // Reposition the SVG to cover the features
        function reset() {
            var bottomLeft = project(bounds[0]),
                topRight = project(bounds[1]);

            svg .attr("width", topRight[0] - bottomLeft[0])
                .attr("height",bottomLeft[1] - topRight[1])
                .style("margin-left", bottomLeft[0] + "px")
                .style("margin-top", topRight[1] + "px");

            g   .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")")

            states.attr("d", path);
        };
        map.events.register("moveend", map, reset);
    };
    // Add the vector layer to the map
    map.addLayer(vector);

   // Use OpenLayers to implement a custom D3 geographic projection.
   // Converts lon/lat to viewport coordinates (D3 uses 2-element arrays).
   function project(x) {
       var point = map.getViewPortPxFromLonLat( new OpenLayers.LonLat(x[0], x[1])
                                                    .transform("EPSG:4326", "EPSG:900913")
       );
       return [ point.x, point.y ];
   }
});

【讨论】：