小編給大家分享一下openLayer4實現動態改變標注圖標的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
地圖上經常需要標出標注，標注點擊之后要有相應的變化來達到一定的效果。此實例即在地圖上添加圖片標注，點擊標注，更換標注圖片，再點擊其他標注，上一個標注恢復原來的標注圖片。
/*初始化地圖*/
var map;
function initmap(){
map= new ol.Map({
layers: layers,
target: 'mapContainer',
view: new ol.View({
//地圖中心坐標
center: new ol.proj.fromLonLat([117.191166, 34.289749],'EPSG:3857'),
zoom: 13//地圖縮放級別
})
});
//添加標注
addFeature();
}
/*添加標注信息*/
function addFeature(){
//數據太多，放json里讀取，里面是標注的坐標信息
$.get('./featureData.json').done(function(data){
var data = eval(data);
var lon = 0;
var lat = 0;
var romeArr = [];
for(var i=0;i<data .length;i++){
lon = parseFloat(data [i].lon);
lat = parseFloat(data [i].lat);
name = data[i].name;
var rome = new ol.Feature({
geometry:new ol.geom.Point(new ol.proj.fromLonLat([lon,lat],'EPSG:3857')),
name:name
});
//標注樣式設置
rome.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossOrigin: 'anonymous',
scale:0.3, //標注圖標大小
src: 'images/vtourskin_mapspot.png'
}))
}));
romeArr.push(rome);
}
//定義select控制器，點擊標注后的事件
var select= new ol.interaction.Select();
//map加載該控件，默認是激活可用的
map.addInteraction(select);
select.on('select', function(e) {
/*恢復其他圖標樣式*/
romeArr.forEach(function(ele){
ele.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossOrigin: 'anonymous',
scale:0.3,
src: 'images/vtourskin_mapspot.png'
}))
}));
})
console.log(e.selected); //打印已選擇的Feature
/*當前選擇的圖標變化，在此僅改變了圖片路徑以顯示不同的圖標，可以根據自己的需要進行設置*/
var currentRome = e.selected[0];
currentRome.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossOrigin: 'anonymous',
scale:0.3,
src: 'images/vtourskin_mapspotactive.png'
}))
}));
});
vectorSource = new ol.source.Vector({
features: romeArr
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
});
}以上是openLayer4實現動態改變標注圖標的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
