Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)

 更新时间:2021年09月01日 17:26:21   作者:~疆  
本篇文章给大家介绍基于postrender机制使用Vue+Openlayer批量设置闪烁点的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

效果图:

实现代码:

<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>

参考文章

到此这篇关于Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)的文章就介绍到这了,更多相关Vue Openlayer闪烁点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue在.js文件中引入store和router问题

    vue在.js文件中引入store和router问题

    这篇文章主要介绍了vue在.js文件中引入store和router问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 超简单的Vue.js环境搭建教程

    超简单的Vue.js环境搭建教程

    这篇文章主要为大家分享了一份超简单的Vue.js环境搭建教程,帮助大家快速搭建vue环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue-cli3.0配置及使用注意事项详解

    vue-cli3.0配置及使用注意事项详解

    这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些?本文通过实战案例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-09-09
  • vue监听滚动事件实现滚动监听

    vue监听滚动事件实现滚动监听

    本文主要介绍了vue监听滚动事件实现滚动监听的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 使用vue3+vite导入图片路径错乱问题排查及解决

    使用vue3+vite导入图片路径错乱问题排查及解决

    使用vue3+vite开发的时候,导入svg图片时,同一个文件夹下的文件,其中一个路径正常解析,另一个不行,更改文件名之后,该图片文件就可以正常解析了,本文给大家介绍了使用vue3+vite导入图片路径错乱问题排查及解决,需要的朋友可以参考下
    2024-03-03
  • 手把手教你拿捏vue cale()计算函数使用

    手把手教你拿捏vue cale()计算函数使用

    这篇文章手把手教你拿捏vue cale()计算函数使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    这篇文章主要介绍了vue3 setup中父组件通过Ref调用子组件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • this在vue和小程序中的使用详解

    this在vue和小程序中的使用详解

    这篇文章主要介绍了this在vue和小程序中的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 用vue设计一个数据采集器

    用vue设计一个数据采集器

    这篇文章主要介绍了如何用vue设计一个数据采集器,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • vue项目proxyTable配置小结

    vue项目proxyTable配置小结

    本文主要介绍了vue项目proxyTable配置小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论