Shulou(Shulou.com)06/03 Report--

Editor to share with you how Vue+Openlayer batch set flicker points, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Effect picture:

Implementation code:

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" / / Border json data export default {data () {return {map: {}, coordinates: [{x: "106.918082", y: "31.441314"}, / / Chongqing {x: "86.36158200334317", y: "41.42448570787448"}, / / Xinjiang {x: "89.71757707811526", y: "31.02619817424643"} / / Xizang {x: "116.31694544853109", y: "39.868508850821115"}, / / Beijing {x: "103.07940932026341", y: "30.438580338450862"}, speed: 0.3,} }, mounted () {this.initMap (); this.addDynamicPoints (this.coordinates) }, methods: {/ * initialize the map * / 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,}),}) }, / * batch add flicker points * / addDynamicPoints (coordinates) {/ / set layer let pointLayer = new VectorLayer ({source: new VectorSource ()}); / / add layer this.map.addLayer (pointLayer); / / add feature let pointFeature = []; for (let I = 0; I)

< coordinates.length; i++) { // 创建feature，一个feature就是一个点坐标信息 const feature = new Feature({ geometry: new Point([coordinates[i].x, coordinates[i].y]), }); pointFeature.push(feature); } //把要素集合添加到图层 pointLayer.getSource().addFeatures(pointFeature); // 关键的地方在此：监听postrender事件，在里面重新设置circle的样式 let radius = 0; pointLayer.on("postrender", (e) =>

{if (radius > = 20) radius = 0; let opacity = (20-radius) * (1 / 20) / / opacity let pointStyle = new Style ({image: new Circle ({radius: radius, stroke: new Stroke ({color: "rgba (255 radius 0" + opacity + ")", width: 3-radius / 10, / / set width}),}),}) / / get vector feature context let vectorContext = getVectorContext (e); vectorContext.setStyle (pointStyle); pointFeature.forEach ((feature) = > {vectorContext.drawGeometry (feature.getGeometry ());}); radius = radius + this.speed; / / adjust flicker speed / / request map rendering (at the next animation frame) this.map.render () These are all the contents of the article "how to set flicker points in batches in Vue+Openlayer". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.