Vue Openlayer闪烁点 Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)
~疆 人气:0想了解Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)的相关内容吗,~疆在本文为您仔细讲解Vue Openlayer闪烁点的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue,Openlayer闪烁点,Vue,postrender机制,下面大家一起来学习吧。
效果图:
实现代码:
<template> <div id="map" style="width: 100vw; height: 100vh" /> </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数据 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, }), }); }, /** * 批量添加闪烁点 */ addDynamicPoints(coordinates) { // 设置图层 let pointLayer = new VectorLayer({ source: new VectorSource() }); // 添加图层 this.map.addLayer(pointLayer); // 循环添加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); //不透明度 let pointStyle = new Style({ image: new Circle({ radius: radius, stroke: new Stroke({ color: "rgba(255,0,0" + opacity + ")", width: 3 - radius / 10, //设置宽度 }), }), }); // 获取矢量要素上下文 let vectorContext = getVectorContext(e); vectorContext.setStyle(pointStyle); pointFeature.forEach((feature) => { vectorContext.drawGeometry(feature.getGeometry()); }); radius = radius + this.speed; //调整闪烁速度 //请求地图渲染(在下一个动画帧处) this.map.render(); }); }, }, }; </script>
加载全部内容