openLayer4實(shí)現(xiàn)動態(tài)改變標(biāo)注圖標(biāo)
本文實(shí)例為大家分享了openLayer4動態(tài)改變標(biāo)注圖標(biāo)的具體代碼,供大家參考,具體內(nèi)容如下
地圖上經(jīng)常需要標(biāo)出標(biāo)注,標(biāo)注點(diǎn)擊之后要有相應(yīng)的變化來達(dá)到一定的效果。此實(shí)例即在地圖上添加圖片標(biāo)注,點(diǎn)擊標(biāo)注,更換標(biāo)注圖片,再點(diǎn)擊其他標(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控制器,點(diǎn)擊標(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)試自己的前端頁面代碼實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁面代碼實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
前端實(shí)現(xiàn)圖片壓縮方案總結(jié)(干貨)
這篇文章主要介紹了前端實(shí)現(xiàn)圖片壓縮的幾種方法和技術(shù),包括使用HTML5的canvas元素和推薦的第三方庫image-magic-adapter,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
JS獲得多個同name 的input輸入框的值的實(shí)現(xiàn)方法
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)input密碼輸入框輸入密碼變黑點(diǎn)密文以及JS獲得多個同name 的input輸入框的值的實(shí)現(xiàn)方法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-01-01
js實(shí)現(xiàn)AES加密解密功能(簡易又全面)
在項目中傳輸數(shù)據(jù),可通過對請求數(shù)據(jù)或響應(yīng)數(shù)據(jù)進(jìn)行加密,防止信息泄露,下面這篇文章主要給大家介紹了js實(shí)現(xiàn)AES加密解密功能的相關(guān)資料,需要的朋友可以參考下2024-05-05
layui表格設(shè)計以及數(shù)據(jù)初始化詳解
今天小編就為大家分享一篇layui表格設(shè)計以及數(shù)據(jù)初始化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10

