openlayers+vue 标点弹窗、热图、git动图、线图

#openlayers+vue 标点弹窗、热图、git动图、线图
####直接上代码有一部分无注释，注意查看api文档
####mounted()生命周期有具体方法请参考去找

<template>
  <div>
    <div id="icingliveMap" class="icingliveMap"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <div id="marks" style="width:300px;height:300px;"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Tile, Feature, Overlay } from "ol";
import {
  XYZ,
  Vector as VectorSource,
  ImageStatic,
  ImageCanvas as ImageCanvasSource,
  ImageWMS
} from "ol/source";
import {
  Tile as TileLayer,
  Vector as VectorLayer,
  Image as ImageLayer,
  Heatmap as HeatmapLayer
} from "ol/layer";
import { GeoJSON, WKT } from "ol/format";
import { defaults, MousePosition } from "ol/control";
import { createStringXY } from "ol/coordinate";
// import { LinearRing, LineString, Point, Polygon } from "ol/geom";
import LineString from "ol/geom/LineString";
import LinearRing from "ol/geom/LinearRing";
import Circle from "ol/geom/Circle";
import Point from "ol/geom/Point";
import { fromLonLat } from "ol/proj";
import { fromExtent } from "ol/geom/Polygon";
import {
  Style,
  Stroke,
  Text,
  Fill,
  Circle as Circles,
  Icon,
  IconImage,
  RegularShape
} from "ol/style";

import axios from "axios";
import gisServiceHttp from "@/_public/https/gishttp/gishttp";
export default {
  name: "OlMap",
  props: ["openlayeres"],
  data() {
    return {
      icingMap: null,
      // 热力图假数据
      heatData: {
        type: "FeatureCollection",
        features: []
      }
    };
  },
  mounted() {
    this.initIcingMap();
    // this.createBezierPointers();//线图
      // this.oss(this.openlayeres);//热图
      // this.addIconMarker();//图标
      // this.cracle()//圆形覆盖图层
      // this.open();//弹窗
      // this.addGifMarks();//git动图
      //  this.opens() ;//固定窗口
      // this.zoomOut()//缩小
      // this.zoomIn()//放大
    if ((this.openlayeres.name = "公众服务")) {
      this.oss(this.openlayeres);//热图
    }
  },
  created() {},
  watch: {
    openlayeres: {
      handler(newVal) {
        console.log(newVal);
      },
      deep: true
    }
  },
  methods: {
  //固定窗口
  opens() {
      let container = document.getElementById("popup");
      let content = document.getElementById("popup-content");
      let popupCloser = document.getElementById("popup-closer");
      //弹窗
      let overlay = new Overlay({
        //设置弹出框的容器
        element: container,
        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
        autoPan: true
      });
      //设置弹出框内容，可以HTML自定义
      content.innerHTML = "<p>你点击的坐标为：" + 11111111111 + "</p>";
      //设置overlay的显示位置
      overlay.setPosition([118.507906, 31.689362]);
      //显示overlay
      this.icingMap.addOverlay(overlay);
    },
    //线图
    createBezierPointers() {
      let lineArrow = [
        {
          name: "浙奉渔19001",
          type: 1,
          line: [
            [118.507906, 31.689362],
            [118.707906, 31.489362],
            [118.707906, 31.689362]
          ]
        }
        // {
        //   name: '中国海监7018',
        //   type: 2,
        //   line: [[13746408.59354844, 3872287.6211607265], [13754948.401795218, 3866382.9561385084]]
        // },
      ];
      let bezierFeatures = [];
      for (let i = 0; i < lineArrow.length; i++) {
        let feature = new Feature({
          geometry: new LineString(lineArrow[i].line),
          name: lineArrow[i].name,
          properties: {
            name: lineArrow[i].name
          }
        });
        bezierFeatures.push(feature);
      }

      let bezierSource = new VectorSource({
        features: bezierFeatures
      });
      let bezierLayer = new VectorLayer({
        source: bezierSource,
        zIndex: 10,
        style: this.bezierStyle
      });
      this.icingMap.addLayer(bezierLayer);
    },

    bezierStyle(feature) {
      let geometry = feature.getGeometry();
      let featureType = feature.getGeometry().getType();
      let styles = [];
      // geometry.forEachSegment(function(start, end) {
      //   let dx = end[0] - start[0];
      //   let dy = end[1] - start[1];
      //   let rotation = Math.atan2(dy, dx);
      //   console.log(end);
      console.log(feature);
      styles.push(
        new Style({
          geometry: new Point([118.507906, 31.689362]),
          image: new Icon({
            src:
              "https://img1.baidu.com/it/u=4127991555,3421789262&fm=253&fmt=auto&app=138&f=JPEG?w=680&h=454",
            opacity: 1,
            anchor: [0.5, 0.5],
            rotateWithView: true,
            // rotation: -rotation,
            scale: 0.1
          })
        })
      );
      styles.push(
        new Style({
          geometry: new Point([118.707906, 31.489362]),
          image: new Icon({
            src:
              "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
            opacity: 1,
            anchor: [0.5, 0.5],
            rotateWithView: true,
            // rotation: -rotation,
            scale: 0.1
          })
        })
      );
      // });
      styles.push(
        new Style({
          stroke: new Stroke({
            color: "#FFD966",
            width: 3,
            lineDash: [20, 8, 1, 8]
          })
        })
      );
      return styles;
    },
    //git动态图图层
    addGifMarks() {
      let aa = document.getElementById("marks");
      let lyr = new Overlay({
        id: "overlay",
        position: [0, 0], //默认空
        positioning: "center-bottom",
        element: aa, //绑定上面添加的元素
        //stopEvent: false,
        offset: [-13.5, -40], //图片偏移量
        zIndex: 15
      });
      this.icingMap.addOverlay(lyr);
      document.getElementById("marks").style.backgroundImage =
        "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp8.itc.cn%2Fq_70%2Fimages01%2F20210513%2Faacca24fef044da1ae2827d33fcc626f.gif&refer=http%3A%2F%2Fp8.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652341603&t=7f63044e5c1863116c1eea9c0e69e3b0)";
      lyr.setPosition([118.707906, 31.489362]); //显示
    },

    //添加图标
    addIconMarker() {
      let startMarker = new Feature({
        type: "icon",
        geometry: new Point([118.507906, 31.689362])
      });

      let vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [startMarker]
        }),
        zIndex: 10,
        style: new Style({
          image: new Icon({
            anchor: [0.5, 1],
            // src: window.location.origin + window.location.pathname + 'static/mapMoniter/0.png'
            src:
              "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
            // 说明下，因为vue项目打包之后，可以通过js原生的API拿到对应的前台服务器ip和端口，还有项目名称，就可以访问到
            // imgSize:60,
            scale: 0.2
          }),
          // 设置图片下面显示字体的样式和内容
          text: new Text({
            text: "文字描述", // 添加文字描述
            font: "14px font-size", // 设置字体大小
            fill: new Fill({
              // 设置字体颜色
              color: "#1CAF9A"
            }),
            offsetY: 10 // 设置文字偏移量
          })
        })
      });
      this.icingMap.addLayer(vectorLayer);
    },
    //标点弹窗
    open() {
      let container = document.getElementById("popup");
      let content = document.getElementById("popup-content");
      let popupCloser = document.getElementById("popup-closer");
      //弹窗
      let overlay = new Overlay({
        //设置弹出框的容器
        element: container,
        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
        autoPan: true
      });
      this.icingMap.on("click", e => {
        //在点击时获取像素区域
        let pixel = this.icingMap.getEventPixel(e.originalEvent);
        this.icingMap.forEachFeatureAtPixel(pixel, feature => {
          let attr = feature.getProperties();
          // console.log(feature.getProperties());
          //coodinate存放了点击时的坐标信息
          let coodinate = e.coordinate;
          //设置弹出框内容，可以HTML自定义
          content.innerHTML =
            "<p>你点击的坐标为：" + attr.name + coodinate + "</p>";
          //设置overlay的显示位置
          overlay.setPosition(coodinate);
          //显示overlay
          this.icingMap.addOverlay(overlay);
        });
      });
    },
    //绘制热力图层
    oss() {
      // let colors = ["#f33f3f","#fc4d4d", "#ee7a7a"]; //热图的颜色渐变
      gisServiceHttp.getStatsByLotLat().then(res => {
        this.heatData.features = res.result;
        let vector = new HeatmapLayer({
          source: new VectorSource({
            features: new GeoJSON().readFeatures(this.heatData, {
              dataProjection: "EPSG:4326"
            })
          }),
          blur: 36,
          radius: 36, //权重
          // gradient: colors,
          zIndex: 11
        });
        this.icingMap.addLayer(vector);
      });
    },
    //原型覆盖层
    cracle() {
      //圆形
      let vectors = new VectorLayer({
        source: new VectorSource({
          features: [
            new Feature({
              geometry: new Circle([118.507906, 31.689362], 0.05),
              name: ""
            })
          ]
        }),
        style: new Style({
          fill: new Fill({
            color: "rgba( 255, 255, 255, 0.7)"
          }),
          stroke: new Stroke({
            color: "#f4b49f",
            width: 3
          })
        }),
        zIndex: 10
      });
      this.icingMap.addLayer(vectors);
    },
    //初始化地图
    initIcingMap() {
      //底图
      let vectors1 = new ImageLayer({
        source: new ImageWMS({
          url: "http://223.243.129.130:9004/iserver/services/map-yx/wms130",
          params: {
            LAYERS: "yxdaimb_PC"
          },
          ratio: 1
        }),
        zIndex: 1
      });

      //地图对象
      this.icingMap = new Map({
        target: "icingliveMap",
        controls: defaults({
          attribution: false,
          rotate: false,
          zoom: false
        }),
        view: new View({
          projection: "EPSG:4326",
          center: [118.507906, 31.689362],
          zoom: 12,
          minZoom: 10,
          maxZoom: 18
        }),
        layers: [vectors1],
        overlays: []
      });
      // this.icingMap.getLayers().array_[0].setZIndex(100);
      console.log(this.icingMap.getLayers());
    },
    // 地图缩小
    zoomOut() {
      // 使用map对象获取view视图，然后设置View视图的放大，缩小参数即可
      let view = this.icingMap.getView();
      let zoom = view.getZoom();
      view.setZoom(zoom - 1);
    },
    // 地图放大
    zoomIn() {
      let view = this.icingMap.getView();
      let zoom = view.getZoom();
      view.setZoom(zoom + 1);
    }
  }
};
</script>
<style>
.icingliveMap {
  width: 100%;
  height: 100%;
}
</style>