vue+openlayers实现添加标记和当前定位标记

船长在船上

已于 2022-04-16 00:43:58 修改

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

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

于 2022-03-18 15:25:56 首次发布

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/123575870

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

openlayers

11 篇文章

订阅专栏

本文介绍如何在地图上实现根据搜索条件定位并添加定位标记的功能，包括清除旧图层、动态调整视图、加载船只和港口图层，以及船舶选中和互动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_10,color_FFFFFF,t_70,g_se,x_16

实现功能：

根据的搜索的条件在地图上定位显示，并且添加定位标记

<div v-for="item in serchDataList" :key="item.portId" class="listLine plr30" @click="handleCurrentList(item)">
                    <span :class="{listItem:item.name&&item.ename}" v-show="item.name">{{item.name}}</span>
                   
</div>

handleCurrentList(item){
      this.isShowSerchList = false;
      this.map.removeLayer(this.vectorLayer);//清除船图层
      this.map.removeLayer(this.positionVectorLayer);//清除港口图层
      console.log(item,"当前数据")



      let view = this.map.getView();
      view.animate({
        center: [item.longitude, item.latitude],
        duration: 0
      });
      // 加载当前定数据的图层
      let positionFeaturesMarker = [];
      positionFeaturesMarker.push(
        new Feature({
          geometry: new Point([item.longitude, item.latitude], "XY"),
          type:item.type,//1船，2港口
          shipName: item.name,
          portName:item.name,//港口名称
          portId:item.portId,
          // nature: item.nature,
          // 航速、航向、时间、船首向
          mmsi: item.mmsi,
          csx: item.csx,
          speed: item.speed,
          updateTime: item.updateTime,
          index: 0
        })
      );
      
      let iconStyles = [];
      positionFeaturesMarker.forEach(item => {
        if(item.values_.type=="1"){//船
          iconStyles.push(
            new Style({
              image: new Icon({
                rotation: item.values_.csx / 180 * Math.PI,
                src: this.YXshipIcon
              })
            })
          );
        }else{//港口
          iconStyles.push(
            new Style({
              image: new Icon({
                src: this.gkIcon
              })
            })
          );
        }
        
      });
      let vectorSource = new SourceVec({
        features: positionFeaturesMarker
      });
      this.positionVectorLayer = new LayerVec({
        source: vectorSource,
        style: function(feature) {
          let iconStyle = iconStyles[feature.values_.index];
          return [iconStyle];
        },
        zIndex: 10
      });
      this.map.addLayer(this.positionVectorLayer);
      this.shipChecked(item);
      
    },
    // 船舶选中框
    shipChecked(item) {
      console.log(item,"选中图标")
      if (this.isVector2) {
        this.map.removeLayer(this.vectorLayer2);
      }
      let checkfeaturesMarker = [];
      checkfeaturesMarker.push(
        new Feature({
          geometry: new Point([item.longitude, item.latitude], "XY"),
          index: 0,
        })
      );

      let iconStyles = [];
      checkfeaturesMarker.forEach(() => {
        iconStyles.push(
          new Style({
            image: new Icon({
              src: this.checkShipIcon,
              scale: 1.5,
            }),
          })
        );
      });
      let vectorSource = new SourceVec({
        features: checkfeaturesMarker,
      });
      this.vectorLayer2 = new LayerVec({
        name: "vectorLayer2",
        source: vectorSource,
        style: function (feature) {
          var iconsStyle = iconStyles[feature.values_.index];
          return [iconsStyle];
        },
        zIndex: 111,
      });
      this.map.addLayer(this.vectorLayer2);
      this.map.getView().setCenter([item.longitude, item.latitude]);
      this.isVector2 = true;
    },