我正在尝试将大型SVG文件作为Open Layers 3地图上的一个图层使用。 我只想显示SVG,而不带任何底图。 尝试获取答案时,一些信息提到了使用图标标记来实现,但我无法使其正常工作。
有人知道如何简单地显示SVG文件作为图层吗?
我正在尝试将大型SVG文件作为Open Layers 3地图上的一个图层使用。 我只想显示SVG,而不带任何底图。 尝试获取答案时,一些信息提到了使用图标标记来实现,但我无法使其正常工作。
有人知道如何简单地显示SVG文件作为图层吗?
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 ];
}
});
我刚在另一个类似的问题中回答了这个问题。请参见那个答案,其中包含可运行的示例。
要点:只需将svg文件作为ol.source.ImageStatic
的url包含即可。