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)文章
找到了一篇jQuery與Prototype并存的沖突的解決方法
找到了一篇jQuery與Prototype并存的沖突的解決方法...2007-08-08echarts實現(xiàn)雷達(dá)圖的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于echarts實現(xiàn)雷達(dá)圖的詳細(xì)步驟,雷達(dá)圖(Radar?Chart)是一種信息豐富的可視化工具,其中多個變量(三個或更多)在二維平面上進(jìn)行比較,文中給出了完整的代碼示例,需要的朋友可以參考下2024-01-01JS 動態(tài)判斷PC和手機(jī)瀏覽器實現(xiàn)代碼
這篇文章主要介紹了JS 動態(tài)判斷PC和手機(jī)瀏覽器實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09