您好,登錄后才能下訂單哦!
小編給大家分享一下Vue+Openlayer如何批量設(shè)置閃爍點(diǎn),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
效果圖:
實(shí)現(xiàn)代碼:
<template> <div id="map" /> </template> <script> import "ol/ol.css"; import TileLayer from "ol/layer/Tile"; import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; import XYZ from "ol/source/XYZ"; import { Map, View, Feature } from "ol"; import { Style, Circle, Stroke } from "ol/style"; import { Point } from "ol/geom"; import { getVectorContext } from "ol/render"; // 邊界json數(shù)據(jù) export default { data() { return { map: {}, coordinates: [ { x: "106.918082", y: "31.441314" }, //重慶 { x: "86.36158200334317", y: "41.42448570787448" }, //新疆 { x: "89.71757707811526", y: "31.02619817424643" }, //西藏 { x: "116.31694544853109", y: "39.868508850821115" }, //北京 { x: "103.07940932026341", y: "30.438580338450862" }, //成都 ], speed: 0.3, }; }, mounted() { this.initMap(); this.addDynamicPoints(this.coordinates); }, methods: { /** * 初始化地圖 */ initMap() { this.map = new Map({ target: "map", layers: [ new TileLayer({ source: new XYZ({ url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", }), }), ], view: new View({ projection: "EPSG:4326", center: [108.522097, 37.272848], zoom: 4.7, }), }); }, /** * 批量添加閃爍點(diǎn) */ addDynamicPoints(coordinates) { // 設(shè)置圖層 let pointLayer = new VectorLayer({ source: new VectorSource() }); // 添加圖層 this.map.addLayer(pointLayer); // 循環(huán)添加feature let pointFeature = []; for (let i = 0; i < coordinates.length; i++) { // 創(chuàng)建feature,一個(gè)feature就是一個(gè)點(diǎn)坐標(biāo)信息 const feature = new Feature({ geometry: new Point([coordinates[i].x, coordinates[i].y]), }); pointFeature.push(feature); } //把要素集合添加到圖層 pointLayer.getSource().addFeatures(pointFeature); // 關(guān)鍵的地方在此:監(jiān)聽postrender事件,在里面重新設(shè)置circle的樣式 let radius = 0; pointLayer.on("postrender", (e) => { if (radius >= 20) radius = 0; let opacity = (20 - radius) * (1 / 20); //不透明度 let pointStyle = new Style({ image: new Circle({ radius: radius, stroke: new Stroke({ color: "rgba(255,0,0" + opacity + ")", width: 3 - radius / 10, //設(shè)置寬度 }), }), }); // 獲取矢量要素上下文 let vectorContext = getVectorContext(e); vectorContext.setStyle(pointStyle); pointFeature.forEach((feature) => { vectorContext.drawGeometry(feature.getGeometry()); }); radius = radius + this.speed; //調(diào)整閃爍速度 //請(qǐng)求地圖渲染(在下一個(gè)動(dòng)畫幀處) this.map.render(); }); }, }, }; </script>
以上是“Vue+Openlayer如何批量設(shè)置閃爍點(diǎn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。