openlayer实现浮标与悬浮框以及扩散闪烁效果

最新推荐文章于 2024-06-28 23:19:33 发布

不如睡觉去

最新推荐文章于 2024-06-28 23:19:33 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/cxb_96/article/details/126569637

版权

本文介绍了如何在Vue项目中利用OpenLayers库创建浮标、自定义悬浮框，并实现了点击浮标后的扩散闪烁效果。通过详细步骤和代码示例，展示了前端开发中地图交互功能的实现。

摘要由CSDN通过智能技术生成

1.基于vue以及采用的引入ol.js的方法

2.浮标的实现

setMark(params) {//params为外部导入的数据
      this.markerLayer = new ol.layer.Vector({ //申请一个图层对象
        source: null,
        style: null,
        zIndex: 30500,
      });
      this.source = new ol.source.Vector(); // 创建矢量图
      this.markerLayer.setSource(this.source); //设置图源
      var style = new ol.style.Style({
        image: new ol.style.Icon(
          /** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 1],
            scale: 0.8,
            src: `../../../static/imgs/resumption/shuizhicezhan-6.png`,
          })
        ),
      });
      this.markerLayer.setStyle(style); // 设置地图元素样式
      this.featureArr = [];  //用于批量添加浮标
      params.forEach((item, index) => { //对数据进行遍历处理
        var feature = new ol.Feature({
          geometry: new ol.geom.Point([item.lgtd, item.lttd]),//geometry：浮标要显示的位置
        });//获取一个浮标对象
        feature.setPr