Openlayers - 如何从多个 KML 文件导入地标
Openlayers - How to import Placemarks from multiple KML-Files
我在各种 KML 文件中有很多 POI,我需要将其导入到我的 Openlayers 地图中。
每个文件的地标应该有自己的显示层。
谁能告诉我如何使用数组来收集不特定数量的 KML 文件。
这是我的代码,它导入单个 KML 文件:
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true}));
var kml = new OpenLayers.Layer.Vector("KML", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "kml/test.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(kml);
var lonLat = new OpenLayers.LonLat( 7.21495 ,50.54819 )
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=17;
map.setCenter (lonLat, zoom);
var controls = {
selector: new OpenLayers.Control.SelectFeature(kml, { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="markerContent">'+feature.attributes.description+'</div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
map.addPopup(feature.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate();
这是一个简单的示例,展示了如何将任意 URL 数组转换(或“map”)为 KML 图层数组,然后可以使用 addLayers
方法:
var kmlSources = ['kml/first.kml', 'kml/second.kml', 'kml/third.js'];
var kmlLayers = kmlSources.map(function(kmlLocation) {
return new OpenLayers.Layer.Vector('KML', {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: 'kml/test.kml',
// other options
})
});
});
map.addLayers(kmlLayers);
我在各种 KML 文件中有很多 POI,我需要将其导入到我的 Openlayers 地图中。 每个文件的地标应该有自己的显示层。
谁能告诉我如何使用数组来收集不特定数量的 KML 文件。
这是我的代码,它导入单个 KML 文件:
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true}));
var kml = new OpenLayers.Layer.Vector("KML", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "kml/test.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(kml);
var lonLat = new OpenLayers.LonLat( 7.21495 ,50.54819 )
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=17;
map.setCenter (lonLat, zoom);
var controls = {
selector: new OpenLayers.Control.SelectFeature(kml, { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="markerContent">'+feature.attributes.description+'</div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
map.addPopup(feature.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate();
这是一个简单的示例,展示了如何将任意 URL 数组转换(或“map”)为 KML 图层数组,然后可以使用 addLayers
方法:
var kmlSources = ['kml/first.kml', 'kml/second.kml', 'kml/third.js'];
var kmlLayers = kmlSources.map(function(kmlLocation) {
return new OpenLayers.Layer.Vector('KML', {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: 'kml/test.kml',
// other options
})
});
});
map.addLayers(kmlLayers);