Javascript 有没有办法将OpenLayers功能保存到另一个文件?
我使用两个地图,一个是有人可以添加或删除功能(管理文件),另一个是最终用户可以看到的(用户文件)。但是,在浏览器中刷新时,我无法保存在管理文件中添加的功能 我想知道是否有一种方法可以保存功能并再次将它们拉上来(对于这两个文件)Javascript 有没有办法将OpenLayers功能保存到另一个文件?,javascript,openlayers,openlayers-6,Javascript,Openlayers,Openlayers 6,我使用两个地图,一个是有人可以添加或删除功能(管理文件),另一个是最终用户可以看到的(用户文件)。但是,在浏览器中刷新时,我无法保存在管理文件中添加的功能 我想知道是否有一种方法可以保存功能并再次将它们拉上来(对于这两个文件) 这是我的管理文件代码。我很欣赏您的见解,因为我是Openlayers的新手。您可以将绘制的功能以GeoJSON或KML等格式写入,然后将其作为文本文件下载到计算机中(只需将按钮添加到HTML中保存/下载即可) 如中所示,可以使用拖放再次显示文件中的数据 //the mai
这是我的管理文件代码。我很欣赏您的见解,因为我是Openlayers的新手。您可以将绘制的功能以GeoJSON或KML等格式写入,然后将其作为文本文件下载到计算机中(只需将按钮添加到HTML中保存/下载即可) 如中所示,可以使用拖放再次显示文件中的数据
//the main map of the app
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-90.055, 35.147]),
zoom: 17,
})
});
//---------------------------------------------------------
//---------------------------------------------------------
///this creates the markers for the map
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-90.055, 35.147])),
name: 'Somewhere else'
});
iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'icon.png',
})
});
//Sets specific style for that one point
iconFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'icon.png',
})
}));
eventFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'icon.png',
})
}));
var eventLayerSource = new ol.source.Vector({
features: [iconFeature]
});
//individual layers for the user to switch through based on selection
var event_Layer = new ol.layer.Vector({
source: eventLayerSource,
// style for all elements on a layer
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'icon.png'
})
}),
visible: true,
tab_name: 'event'
});
// display popup on click
map.on('click', function (evt) {
var coordinate = evt.coordinate;
console.log(evt.coordinate);
console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
});
map.on('singleclick', function (evt) {
var lonLat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
var clickFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat(lonLat)),
name: window.prompt("Enter name of event","Event name"),
});
clickFeature.setStyle(iconStyle);
clickFeature.setId(clickFeature.get('name'));
eventLayerSource.addFeature(clickFeature);
});
map.on('dblclick', function(evt){
eventLayerSource.removeFeature(
eventLayerSource.getFeatureById(prompt("Enter name")));
})
function download(data, filename) {
var blob = new Blob([data], {type: 'text/plain'});
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
}
}
document.getElementById('download-geojson').addEventListener('click', function () {
var text = new ol.format.GeoJSON().writeFeatures(
source.getFeatures(),
{
featureProjection: 'EPSG:3857',
dataProjection: 'EPSG:4326'
}
);
download(text, 'features.json');
});
document.getElementById('download-kml').addEventListener('click', function () {
var text = new ol.format.KML().writeFeatures(
source.getFeatures(),
{
featureProjection: 'EPSG:3857',
dataProjection: 'EPSG:4326'
}
);
download(text, 'features.kml');
});