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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

效果图：

实现功能：

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

安装opelayers

cnpm i -S ol
#或者
npm install ol

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

<script>
    // openlayers地图
import "ol/ol.css";
import {
  Icon,
  Style,
  Stroke
} from "ol/style";
import 'ol/ol.css'
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { get as getProjection } from "ol/proj.js";
import { getBottomLeft, getTopRight } from 'ol/extent.js'
import { Vector as SourceVec } from 'ol/source';
import { Vector as LayerVec } from 'ol/layer';
import Overlay from "ol/Overlay";//弹窗
import {Point} from "ol/geom";
import {Feature} from "ol";
import { defaults as defaultControls } from "ol/control";//默认缩放
import {FullScreen,ScaleLine} from "ol/control";//全屏，比例尺控件
import TileGrid from 'ol/tilegrid/TileGrid';
import { LineString, Polygon } from 'ol/geom.js'
import { setTimeout } from 'timers';
import {Polyline} from "ol/format";
// import { vectorContext } from "ol/render";
import { getVectorContext } from "ol/render";
import {defaults as defaultInteractions} from 'ol/interaction';//旋转
 
export default {
        data(){
            tk:"密钥",
            center:{
                longitude:"",
                latitude:"",
            },
            isShowSerchList：false,
            map:null,
            vectorLayer:null,
            positionVectorLayer:null,
            isVector2:false,
            vectorLayer2:false,
            
            
        },
        methods:{
            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;
        },
        }
       
 
}
    
</script>