squi-mobile/src/components/MapView/index.vue

<template>
  <div>
    <div id="map" ref="rootmap"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import { fromLonLat, get as getProjection, transform } from 'ol/proj';
import { getWidth } from 'ol/extent';

import { Vector as SourceVec, OSM } from 'ol/source';
import { Feature } from 'ol';
import { Point, LineString } from 'ol/geom';
import { Style, Icon, Stroke } from 'ol/style';
import { Vector as LayerVec } from 'ol/layer';

let ispro = process.env.NODE_ENV === 'production';
//  ispro = false;
export default {
  props: {
    src: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    var that = this;
    this.initmap();
    this.map.on('load', function () {
      // 增加自定义数据源、自定义图层
      that.map.on('click', function (e) {
        console.log(e);
      });
    });

    this.addpoint();
    this.addline();
  },
  methods: {
    initmap: function () {
      this.map = new minemap.Map({
        container: 'map',
        style: 'https://tocc.jtj.suqian.gov.cn:21100/service/solu/style/id/12886' /*底图样式*/,
        center: [118.29564, 33.97441] /*地图中心点*/,
        zoom: 14 /*地图默认缩放等级*/,
        pitch: 0 /*地图俯仰角度*/,
        maxZoom: 17 /*地图最大缩放等级*/,
        minZoom: 3 /*地图最小缩放等级*/,
        projection: 'MERCATOR',
      });
    },

    addline: function () {
      var that = this;

      function addSources() {
        var center = that.map.getCenter();
        var jsonData = {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              geometry: {
                type: 'LineString',
                coordinates: [
                  [center.lng - 0.005, center.lat + 0.005],
                  [center.lng - 0.005, center.lat - 0.005],
                ],
              },
              properties: {
                title: '路线一',
                kind: 1,
              },
            },
            {
              type: 'Feature',
              geometry: {
                type: 'LineString',
                coordinates: [
                  [center.lng - 0.004, center.lat],
                  [center.lng, center.lat],
                  [center.lng + 0.008, center.lat],
                ],
              },
              properties: {
                title: '路线二',
                kind: 2,
              },
            },
          ],
        };
        that.map.addSource('lineSource', {
          type: 'geojson',
          data: jsonData,
        });
      }

      function addLayers() {
        that.map.addLayer({
          id: 'lineLayer',
          type: 'line',
          source: 'lineSource',
          layout: {
            'line-join': 'round',
            'line-cap': 'round',
            'border-visibility': 'visible', //是否开启线边框
          },
          paint: {
            'line-width': 6,
            'line-color': {
              type: 'categorical',
              property: 'kind',
              stops: [
                [1, '#ff0000'],
                [2, '#00ff00'],
              ],
              default: '#ff0000',
            },
            'line-border-width': 2, //设置线边框宽度
            'line-border-opacity': 1, //设置线边框透明度
            'line-border-color': 'blue', //设置线边框颜色
          },
          minzoom: 7,
          maxzoom: 17.5,
        });

        that.map.addLayer({
          id: 'symbolLayer',
          type: 'symbol',
          source: 'lineSource',
          layout: {
            'text-field': '{title}',
            'text-size': 10,
            'symbol-placement': 'line',
          },
          paint: {
            'text-color': '#000000',
            'text-halo-color': '#ffffff',
            'text-halo-width': 0.8,
          },
          minzoom: 7,
          maxzoom: 17.5,
        });
      }
      // addSources();
      //   addLayers();
      this.map.on('load', function () {
        // 增加自定义数据源、自定义图层
        addSources();
        addLayers();
      });
    },

    addpoint: function () {
      var markers = [];

      var lnglat = this.map.getCenter();

      if (this.map) {
        var _marker = new minemap.Marker({
          draggable: true, //可以在初始化的时候决定是否可以拖拽
          anchor: 'top-left', //锚点位置(默认值"top-left")，可选值有`'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`
          color: '#111', //默认marker标记的颜色
          rotation: 0, //marker的旋转角度，以锚点作为旋转中心点，顺时针为正
          pitchAlignment: 'map', //倾斜对齐参数(默认值是‘auto’)，此值决定marker标记是贴在地图平面上，还是立在地图平面上，当值为`map`时，marker标记贴在地图平面上，当值为`viewport`时，marker标记立在地图平面上，当值为 `auto`时，会根据 `rotationAlignment`参数的值，自动决定.
          rotationAlignment: 'map', //旋转对齐参数(默认值是‘auto’)，此值决定地图在旋转的时候，marker标记是否跟随旋转，当值为`map` 时，marker标记会固定在地图平面上，不会跟随地图的旋转而旋转；当值为`viewport`时，marker标记会跟随地图的旋转而旋转，保持正向面对观察者；当值为`auto`时，相当于值`viewport`.
          scale: 1.5, //只有默认标记有这个参数，将默认标记放大1.5倍
        })
          .setLngLat([lnglat.lng + 0.005, lnglat.lat])
          .addTo(this.map);
        markers.push(_marker);
      }
    },
  },
};
</script>

<style>
#map {
  height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
</style>