Question

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

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

Answer 1

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

它的要点：只需将svg文件包含为ol.source.ImageStatic的网址。

Answer 2

默认情况下，Layer中的对象需要进行地理定位，以便渲染器知道在哪里绘制它们。我发现的一个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 ];
   }
});

使用openlayers 3从svg图像创建图层

2 个答案: