Vue2 ol 开发天地图

ol官方文档

ol官方文档

安装

npm install ol --save

安装后

实例组件

<template>
  <div style="width: 100%; height: 100%"></div>
</template>

<script>
  import "ol/ol.css";
  import Fill from "ol/style/Fill";
  import Image from "ol/layer/Image";
  import ImageWMS from "ol/source/ImageWMS";
  import Text from "ol/style/Text";
  import TileLayer from "ol/layer/Tile";
  import VectorLayer from "ol/layer/Vector";
  import VectorSource from "ol/source/Vector";
  import XYZ from "ol/source/XYZ";
  import {
    Map,
    View,
    Feature
  } from "ol";
  import {
    Point
  } from "ol/geom";
  import {
    Style,
    Icon
  } from "ol/style";
  import {
    defaults
  } from "ol/control/util.js";
  import markerIcon from "@/assets/images/ship.png"; // 引入图片
  import {
    getAnalog // 这里发起请求更新Feature
  } from "@/utils/uice";
  let vectorSource = new VectorSource({
    features: [],
  });

  let vectorLayer = new VectorLayer({
    source: vectorSource,
  });

  let that;
  let realTimer;
  export default {
    name: "tianditu",
    props: {
      data: {
        type: Object,
        default: () => {
          return {
            center: [116.397428, 39.90923],
            zoom: 12, //初始化地图级别
          };
        },
      },
    },
    mounted() {
      this.tiandituUrl = "http://t0.tianditu.gov.cn/"; // 天地图
      this.hangdaotuUrl = "http://36.156.155.131:8090/"; // 航道图
      that = this;
      that.initMap();
      clearInterval(realTimer);
      getAnalog().then((response) => {
        // 这里发起请求更新Feature
      });
      realTimer = setInterval(() => {
        getAnalog().then((response) => {
          // 这里发起请求更新Feature
        });
      }, this.$store.state.data.duration);
    },
    destroyed() {
      clearInterval(realTimer);
      realTimer = null;
    },
    data() {
      return {
        map: null,
      };
    },
    methods: {
      /**
       * 初始化地图
       */
      initMap() {
        this.map = new Map({
          target: this.$el,
          controls: defaults({
            zoom: false,
          }),
          layers: [
            new TileLayer({
              source: new XYZ({
                url: `${this.tiandituUrl}DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`,
              }),
            }),
            new TileLayer({
              source: new XYZ({
                url: `${this.tiandituUrl}DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`,
              }),
            }),
            new Image({
              source: new ImageWMS({
                // ratio: 1,
                url: `${this.hangdaotuUrl}geoserver/CJ/wms`,
                params: {
                  SERVICE: "WMS",
                  VERSION: "1.1.1",
                  REQUEST: "GetMap",
                  FORMAT: "image/png",
                  TRANSPARENT: true,
                  tiled: true,
                  STYLES: "",
                  LAYERS: "CJ:G_CJ_NJ",
                  CJAUTH: "CJUSER",
                  WIDTH: 256,
                  HEIGHT: 256,
                  SRS: "EPSG:3857",
                },
              }),
            }),
            vectorLayer,
          ],
          view: new View({
            // 指定地图投影模式
            projection: "EPSG:4326",
            // 定义地图显示的坐标
            center: [116.397428, 39.90923],
            // 限制地图中心范围，但无法限制缩小范围
            // extent: [110, 26, 114, 30],
            // 定义地图显示层级为16
            zoom: 13,
            // 限制缩放级别，可以和extent同用限制范围
            maxZoom: 19,
            // 最小级别，越大则面积越大
            minZoom: 5,
          }),
        });
      },

      /**
       * 添加一个新的标注（矢量要素）
       * @param {ol.Coordinate} coordinate 坐标点 [x,y]
       */
      addFeature(ship) {
        //新建一个要素 Feature
        var newFeature = new Feature({
          //几何信息，经纬度
          geometry: new Point([Number(ship["0a4"]), Number(ship["0a5"])]),
          //名称属性
          name: ship["iboatName"],
        });

        // 设置ID
        newFeature.setId(ship["sn"]);
        // 设置样式
        newFeature.setStyle(this.getStyls(newFeature, ship));
        //将新要素添加到数据源中
        vectorSource.addFeature(newFeature);
      },

      /**
       * 更新标注（矢量要素）
       */
      setFeature(ship) {
        vectorSource.idIndex_[ship["sn"]].setStyle(
          this.getStyls(vectorSource.idIndex_[ship["sn"]], ship)
        );
        vectorSource.idIndex_[ship["sn"]].setGeometryName(ship["iboatName"]);
        vectorSource.idIndex_[ship["sn"]].setGeometry(
          new Point([Number(ship["0a4"]), Number(ship["0a5"])])
        );
      },

      /**
       * 批量更新标注（矢量要素）
       */
      updateFeatures() {
        that.$store.state.data.analogList;
        for (let i = 0; i < that.$store.state.data.analogList.length; i++) {
          let item = that.$store.state.data.analogList[i];
          // item["sn"] 是唯一值，类似id
          if (vectorSource.idIndex_[item["sn"]] != undefined) {
            that.setFeature(item);
          } else {
            that.addFeature(item);
          }
        }
      },

      /**
       * 设置Style
       */
      getStyls(feature, ship) {
        let rotation = Math.tan(Number(ship["0aA"]));
        rotation = isNaN(rotation) ? 0 : rotation;
        let Styles = [];
        Styles.push(
          new Style({
            image: new Icon({
              src: markerIcon,
              anchor: [0.5, 0.7], // 偏移的 x 与 y 方向值，注意此值与 Cesium 等GIS库偏向方向正好相反
              rotation: rotation,
            }),
          })
        );
        Styles.push(
          new Style({
            text: new Text({
              textAlign: "center",
              text: `  ${feature.values_.name}  `, //标注文本
              offsetX: 0,
              offsetY: 15,
              fill: new Fill({
                //文字填充色
                color: "#2520ff",
              }),
              backgroundFill: new Fill({
                color: "rgba(255,255,255,0)",
              }),
            }),
          })
        );
        return Styles;
      },
    },
  };
</script>

<style scoped>
</style>