vue+openlayers实现地图打点_vue2使用openlayers地图打点

前言

openlayers的使用

一、使用步骤

1.引入库

代码如下（示例）：npm install ol

import "ol/ol.css"; //样式
import Map from "ol/Map"; //地图对象
import Feature from "ol/Feature"; //标记
import Overlay from "ol/Overlay";
import View from "ol/View"; //视图
import { Point, LineString } from "ol/geom"; //标点,画线
import {
  OSM,
  XYZ,
  TileArcGISRest,
  Vector as VectorSource,
  WMTS,
} from "ol/source"; //图源
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer"; //图层
import { fromLonLat, transform } from "ol/proj"; //坐标系维度转换
import {
  Circle as CircleStyle,
  Fill,
  Icon,
  Stroke,
  Style,
  RegularShape,
} from "ol/style"; //填充图标描边等之类用来标记打点使用

2.方法里使用

<template>
  <div>
    <div id="container">
      <audio
        controls="controls"
        ref="audiod"
        style="display: none"
        src="../audio/alert.mp3"
      ></audio>
</div>
 
  </div>
</template>
  props: ["shipData"],
  mounted() {
    this.initMap();
  },
 watch: {
    checkmsgModal() {},
    shipData: {
      deep: true,
      handler() {
        this.vectorSource.clear();
        this.shipData.forEach((item, index) => {
          item.customSortId = index;
          this.setMarker(item);
        });
      },
    },
 
  },
methods:{
  initMap() {
      let that = this;
      //地图瓦片
      let tileLayer = new TileLayer({
        source: new XYZ({
          url: "写入地图瓦片地址",
 
        }),
      });
      // 绘制点
      let featureLayer = new VectorLayer({
        source: that.vectorSource,
      });
      // 绘制线
      that.vectorLineSource = new VectorSource({ wrapX: false });
      let featureLineLayer = new VectorLayer({
        source: that.vectorLineSource,
      });
      let sourceSatelliteMark = new TileLayer({
        source: new XYZ({
          url: "瓦片地址",
       
        }),
      });
      this.map = new Map({
        //olMap为map的地图容器
        target: "container", // DOM容器
        // 设置地图图层
        layers: [tileLayer, featureLayer, featureLineLayer], //地图源的瓦片图层
        // 设置显示地图的视图
        view: new View({
          // projection: 'EPSG:4326',
          center: transform(this.jwd, "EPSG:4326", "EPSG:3857"), //地图中心点 经纬度
          zoom: this.zoom, // 缩放级别-显示层级
          maxZoom: 16,
        }),
      });
      // this.map.addLayer(tileLayer);
       //这个是点击出现弹窗
      let overlayForm = new Overlay({
        // 创建一个图层
        element: this.$refs.msgForm.$el, // 图层绑定我们上边的弹窗
        autoPan: true,
        autoPanAnimation: {
          duration: 250,
        },
        autoPanMargin: 100,
        positioning: "center-center",
      });
      overlayForm.setPosition(undefined); // 设置弹窗位置，刚开始我们不让他显示，就是undefined就行
      this.map.addOverlay(overlayForm); // 然后把弹窗的图层加载到地图上
      this.map.on("click", (ev) => {
        let pixel = ev.pixel; // 鼠标点击的位置，这个应该是像素
        // let mouse = ev.coordinate  // 鼠标点击的坐标位置
        let mouse = ev.coordinate; // 鼠标点击的坐标位置
        const hdms = transform(mouse, "EPSG:3857", "EPSG:4326"); // 转换坐标格式
        let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
          return feature; // 查找出点击的哪个坐标
        });
        console.log(feature);
        // console.log(feature)
        if (feature) {
          this.buoyData.forEach((item) => {
            // console.log(item.buoyId);
            if (item.buoyId == feature.values_.idName) {
 
              overlayForm.setPosition(mouse); // 设置弹窗的位置
 
 
 
              });
            }
          });
        }
        //  else {
        //   this.msgModal = false;
        //   overlayForm.setPosition(undefined); // 如果没有点击坐标点，就隐藏弹窗
        // }
      });
    },
      //标记
    setMarker(item) {
 
        let feature = new Feature({
          id: item.customSortId,
          geometry: new Point(
            transform(
              [item.target.position.lon, item.target.position.lat],
              "EPSG:4326",
              "EPSG:3857"
            )
          ),
        });
 
        feature.setStyle(
          new Style({
            image: new Icon({
              src: require("../components/screenHeader/images/greenShip.svg"),
              scale: 1.1,
              // rotation: (item.heading * Math.PI) / 180,
            }),
          })
        );
        this.vectorSource.addFeature(feature);
 // 使用Overlay添加GIF动态图标点位信息 (我这个要打动图，试了下还是加个图层，方法在下面，用了iview组件，里面的一个通知提醒，有预警的话就弹出，由于里面的内容不好改，就使用了render函数)
    addGif(lon, lat, id) {
      const that = this;
      let mapDom = that.$refs.container;
      var oDiv = document.createElement("div");
      oDiv.id = id;
      oDiv.style.width = "40px";
      oDiv.style.height = "40px";
      oDiv.style.backgroundImage =
        "url( " + require("../components/screenHeader/images/run.gif") + ")";
      oDiv.style.backgroundSize = "100%";
      mapDom.appendChild(oDiv);
      this.markerPoint = new Overlay({
        position: fromLonLat([lon, lat]),
        positioning: "center-center",
        element: document.getElementById(id),
        id: id,
        stopEvent: true,
      });
      this.map.addOverlay(this.markerPoint);
      mapDom.removeChild(oDiv);
    },
 
}
    //弹出预警信息
    warning() {
      const that = this;
      this.$refs.audiod.play();//弹出预警伴随有声音提醒
      this.$Notice.open({
        render: (h) => {
          return h(
            "div",
            {
              style: {
                width: "100%",
                fontSize: "14px",
              },
            },
            [
 
              h(
                "Button",
                {
                  style: {
                    marginTop: "10px",
                    marginLeft: "10px",
                    width: "21%",
                  },
                  on: {
                    click: () => {
                      that.map.removeOverlay(that.markerPoint);
                      this.addGif(lon, lat, that.warnList.warnId);
                    },
                  },
                },
                ["定位"]
              ),
 
        },
 
        duration: 0,
        onClose() {
          that.map.removeOverlay(that.markerPoint);//关闭时清除gif图层
        },
      });
      // var div = document.querySelector(".ivu-notice");
      // console.log(div, "111");
    },

3.图片:

总结

完成！