OpenLayers 使用 OSM 添加编码的折线



我对开放图层相对较新,但对谷歌地图 API 非常熟悉。

我以前用谷歌地图做过以下事情。我基本上是在尝试使用开放图层/开放街道地图复制相同的功能。但是我遇到了一个难题。

map = new OpenLayers.Map("map");
wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
osm = new OpenLayers.Layer.OSM();
map.addLayer(wms);
epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var lonLat = new OpenLayers.LonLat(-71.3699930, 43.5412410).transform(epsg4326, projectTo);
var zoom=12;
map.setCenter (lonLat, zoom);
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var encoded = "_p~iF~ps|U_ulLnnqC_mqNvxq`@";
var format = new OpenLayers.Format.EncodedPolyline({geometryType:"linestring"});
vectorLayer.addFeatures(format.read(encoded));
map.addLayer(vectorLayer);

代码的编写方式目前有效。它将加载 WMS 地图、显示折线并使地图正确居中。但这不是我想要的,我想要加载OSM地图。因此,如果我更改此行:

map.addLayer(wms);

对此:

map.addLayer(osm);

osm 贴图加载正常,但折线未显示。我已经玩了很长时间了,似乎无法让它工作。它与投影有关吗?谢谢!

你需要

做的是改变

vectorLayer.addFeatures(format.read(encoded));

到以下

vectorLayer.addFeatures(new OpenLayers.Feature.Vector(format.read(encoded).geometry.transform('EPSG:4326', 'EPSG:3857')));

遇到了完全相同的麻烦,这就是我解决它的方式。

最新更新