如何解决有没有办法将 OpenLayers 功能保存到另一个文件?
我使用了两张地图,一张是有人可以添加或删除功能的地方(管理文件),另一张是最终用户可以看到的(用户文件)。但是,在浏览器中刷新时,我无法保存在管理文件中添加的功能。
我想知道是否有办法保存特征并再次提取它们(对于两个文件)?
//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,})
}));
eventFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5,})
}));
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,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: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")));
})
这是我的管理文件代码。由于我是 Openlayers 的新手,我很感激任何见解。
解决方法
您可以通过以 GeoJSON 或 KML 等格式编写已绘制的要素,然后将它们作为文本文件下载到计算机来保存已绘制的要素(只需在 HTML 中添加按钮即可保存/下载)
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(),'features.kml');
});
文件中的数据可以像https://openlayers.org/en/latest/examples/drag-and-drop.html一样使用拖放功能再次显示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。