Javascript OpenLayers-编辑功能(隐藏/显示、更改图标)
我不是webdevelopment方面的专家,但我被openlayers困住了:-( 我想编辑一些功能(隐藏/显示和/或更改图标) 但是我不知道怎么做 我要找的是: 如何访问这些功能(可能使用函数“updateFilter”) 我的代码和这两个例子有什么区别: 一些代码(所有内容都在一个脚本标记中):Javascript OpenLayers-编辑功能(隐藏/显示、更改图标),javascript,html,openlayers,openstreetmap,Javascript,Html,Openlayers,Openstreetmap,我不是webdevelopment方面的专家,但我被openlayers困住了:-( 我想编辑一些功能(隐藏/显示和/或更改图标) 但是我不知道怎么做 我要找的是: 如何访问这些功能(可能使用函数“updateFilter”) 我的代码和这两个例子有什么区别: 一些代码(所有内容都在一个脚本标记中): var vectorSource=new ol.source.Vector({ }); //风格 var iconStyle=新的ol.style.style({ 图片:新的ol.style
var vectorSource=new ol.source.Vector({
});
//风格
var iconStyle=新的ol.style.style({
图片:新的ol.style.Icon(/**@type{olx.style.IconOptions}*/({
//主播:[0.5,46],
主播:“分数”,
anchorYUnits:'像素',
src:'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
//尺寸:[40,40]
//比例因子
比例:0.3
}))
});
//添加一个功能:
变量iconFeature=新的ol.特征({
几何:新的ol.geom.Point(ol.proj.transform([12.12,12.12],“EPSG:4326”,“EPSG:3857”),
类型:'点',
名称:“测试功能”,
描述:'测试',
TESTID:0
});
iconFeature.setStyle(iconStyle);
vectorSource.addFeature(iconFeature);
var vectorLayer=新ol.layer.Vector({
来源:矢量源;
});
var rasterLayer=新ol.layer.Tile({
source:new ol.source.OSM();
});
/**
*组成弹出窗口的元素。
*/
var container=document.getElementById('popup');
var content=document.getElementById('popup-content');
var closer=document.getElementById('popup-closer');
//平移持续时间
var overlay=新ol.overlay({
元素:容器,
自动扫描:是的,
自动规划:{
持续时间:1000
}
});
/**
点击处理程序
**/
closer.onclick=函数(){
覆盖设置位置(未定义);
closer.blur();
返回false;
};
var centerPos=[12,12];
var map=新ol.map({
图层:[光栅图层,矢量图层],
套印格式:[套印格式],
目标:document.getElementById('map'),
视图:新ol.view({
中心:ol.proj.transform(中心位置,“EPSG:4326”,“EPSG:3857”),
缩放:12,
minZoom:11,
最大缩放:18
})
});
//单击时显示弹出窗口
map.on('singleclick',函数(evt){
var feature=map.forEachFeatureAtPixel(
evt.像素、功能(特征)
{
返回特性;
}
);
如果(功能){
var坐标=evt坐标;
content.innerHTML=“+feature.get('Name')+”“+”
“+feature.get('Description')+”
”
+"关窗",;
叠加。设置位置(坐标);
}
其他的
{
overlay.setPosition(未定义);closer.blur();返回false;
}
});
map.on('pointermove',函数(e){
if(e.drawing){$(element).popover('destroy');
返回;
}
var pixel=map.getEventPixel(例如originalEvent);
var hit=map.hasFeatureAtPixel(像素);
map.getTarget().style.cursor=hit'pointer':'';
});
var updateFunc=document.getElementById('KartenZugriff');
addEventListener('click',function(){updateFilter(map)});
函数updateFilter(映射){
警报(“测试启动”);
var features=vectorSource.getFeatures();
//var testitem=vectorLayer.GetFeatureBy('SchulID',6);
console.log(特性);
用于(功能中的var i){
var特征=特征[i];
var test=ol.getFeaturebyID();
如果(feature.N.SchulName==='Some Name'){
log(feature.getID());
console.log(“删除…”);
removeFeatures(rasterLayer.getFeatureById(6));
console.log(“…已删除?”);
控制台日志(样式M.b);
特征。设置样式(样式);
警报(“结束”);
}
};
};
操作!
您应该进一步浏览文档
const array_of_features = source.getFeatures();
const single_feature = source.getFeatureById('id');
const feature_props = single_feature.getProperties();
// update style of feature
single_feature.setStyle(new_style);
// remove feature
source.removeFeature(single_feature);