openLayer4實現(xiàn)動態(tài)改變標(biāo)注圖標(biāo)
本文實例為大家分享了openLayer4動態(tài)改變標(biāo)注圖標(biāo)的具體代碼,供大家參考,具體內(nèi)容如下
地圖上經(jīng)常需要標(biāo)出標(biāo)注,標(biāo)注點擊之后要有相應(yīng)的變化來達(dá)到一定的效果。此實例即在地圖上添加圖片標(biāo)注,點擊標(biāo)注,更換標(biāo)注圖片,再點擊其他標(biāo)注,上一個標(biāo)注恢復(fù)原來的標(biāo)注圖片。
/*初始化地圖*/
var map;
function initmap(){
map= new ol.Map({
layers: layers,
target: 'mapContainer',
view: new ol.View({
//地圖中心坐標(biāo)
center: new ol.proj.fromLonLat([117.191166, 34.289749],'EPSG:3857'),
zoom: 13//地圖縮放級別
})
});
//添加標(biāo)注
addFeature();
}
/*添加標(biāo)注信息*/
function addFeature(){
//數(shù)據(jù)太多,放json里讀取,里面是標(biāo)注的坐標(biāo)信息
$.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
});
//標(biāo)注樣式設(shè)置
rome.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossOrigin: 'anonymous',
scale:0.3, //標(biāo)注圖標(biāo)大小
src: 'images/vtourskin_mapspot.png'
}))
}));
romeArr.push(rome);
}
//定義select控制器,點擊標(biāo)注后的事件
var select= new ol.interaction.Select();
//map加載該控件,默認(rèn)是激活可用的
map.addInteraction(select);
select.on('select', function(e) {
/*恢復(fù)其他圖標(biāo)樣式*/
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
/*當(dāng)前選擇的圖標(biāo)變化,在此僅改變了圖片路徑以顯示不同的圖標(biāo),可以根據(jù)自己的需要進(jìn)行設(shè)置*/
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);
});
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap路徑導(dǎo)航與分頁學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap路徑導(dǎo)航與分頁學(xué)習(xí)使用的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
JavaScript安全加密之禁止別人調(diào)試自己的前端頁面代碼實現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁面代碼實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JS獲得多個同name 的input輸入框的值的實現(xiàn)方法
這篇文章主要介紹了基于JS代碼實現(xiàn)input密碼輸入框輸入密碼變黑點密文以及JS獲得多個同name 的input輸入框的值的實現(xiàn)方法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-01-01
layui表格設(shè)計以及數(shù)據(jù)初始化詳解
今天小編就為大家分享一篇layui表格設(shè)計以及數(shù)據(jù)初始化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10

