mapv+openlayers+vue

一开始用的mapv，一直报错说什么ol没有定义。 最后东拼西凑的这样可以用了。 记录一下，预防下次找不到

<template>
  <div id="supermap" ref="supermap" class="supermap" style="height: 100vh; width: 100%"></div>
</template>
<script>
import { Mapv } from '@supermap/iclient-ol/overlay/Mapv'
import { Image as imageLayer } from 'ol/layer'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { fromLonLat, transform } from 'ol/proj'
import * as mapv from 'mapv'

export default {
  name: 'dashboard',
  mounted() {
    this.$nextTick(() => {
      // 创建 OpenLayers 地图实例
      const map = new Map({
        target: 'supermap',
        layers: [
          new TileLayer({
            source: new OSM() // 使用 OpenStreetMap 作为底图
          })
        ],
        view: new View({
          center: fromLonLat([116.404, 39.915]), // 地图中心点（经纬度）
          zoom: 5 // 缩放级别
        })
      })
      // 创建 MapV 数据集
      var randomCount = 300
      var data = []
      var citys = [
        '北京',
        '天津',
        '上海',
        '重庆',
        '石家庄',
        '太原',
        '呼和浩特',
        '哈尔滨',
        '长春',
        '沈阳',
        '济南',
        '南京',
        '合肥',
        '杭州',
        '南昌',
        '福州',
        '郑州',
        '武汉',
        '长沙',
        '广州',
        '南宁',
        '西安',
        '银川',
        '兰州',
        '西宁',
        '乌鲁木齐',
        '成都',
        '贵阳',
        '昆明',
        '拉萨',
        '海口'
      ]
      // 构造数据

      while (randomCount--) {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)])

        data.push({
          geometry: {
            type: 'Point',
            coordinates: transform(
              [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4],
              'EPSG:4326',
              'EPSG:3857'
            )
          },
          count: 30 * Math.random()
        })
      }
      // var dataSet = new mapv.DataSet(data)
      const dataSet = new mapv.DataSet(data)

      var mapvOptions = {
        fillStyle: 'rgba(55, 50, 250, 0.8)',
        shadowColor: 'rgba(255, 250, 50, 1)',
        shadowBlur: 20,
        max: 100,
        size: 50,
        unit: 'px', // unit可选值['px', 'm']，默认值为'px'
        label: {
          show: true,
          fillStyle: 'white'
        },
        globalAlpha: 0.5,
        gradient: { 0.25: 'rgb(0,0,255)', 0.55: 'rgb(0,255,0)', 0.85: 'yellow', 1.0: 'rgb(255,0,0)' },
        draw: 'honeycomb'
      }
      var options = {
        map: map,
        dataSet: dataSet,
        mapvOptions: mapvOptions
      }
      map.addLayer(
        new imageLayer({
          source: new Mapv(options)
        })
      )
    })
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ol-control {
  left: auto;
  right: 0.5em;
}
.check_box {
  position: absolute;
  right: 16px;
  top: 450px;
  ::v-deep {
    .el-checkbox__label {
      color: #fff !important;
      position: relative;
      z-index: 99;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #2d8cf0 !important;
    }
  }
}
.dashboard_page {
  height: 100vh;
  width: 100%;
  background: #010223;
  .main-container {
    height: calc(100% - 100px);
    background: url('./_imgs/bg.png') top center no-repeat #010223;
    background-size: 1505px 916px;
    .line {
      margin: 0 10px;
      height: 3px;
      background: #0c73a3;
      border-right: 84px solid #02c7f7;
      border-left: 84px solid #02c7f7;
    }
  }
}
</style>