mapv+openlayers+vue 面

mapBaseUrl:是我自己的网关地址
json文件可以来https://datav.aliyun.com/portal/school/atlas/area_selector这个地方取

<template>
  <div id="supermap" ref="supermap" class="supermap" style="height: 100vh; width: 100vw; margin: 0 14px 0 10px"></div>
</template>
<script>
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import { Image as ImageLayer } from 'ol/layer'
import { TileSuperMapRest } from '@supermap/iclient-ol'
import { Mapv } from '@supermap/iclient-ol/overlay/Mapv'
import * as mapv from 'mapv'

export default {
  name: 'dashboard',

  computed: {
    mapBaseUrl() {
      return this.$params?.SUPER_MAP_URL || ''
    }
  },

  mounted() {
    var url = this.mapBaseUrl + 'iserver/services/map-china400/rest/maps/ChinaDark?prjCoordSys={epsgcode:4326}'
    var map = new Map({
      target: 'supermap',
      view: new View({
        center: [113.28, 22.65],
        zoom: 8,
        projection: 'EPSG:4326',
        multiWorld: true
      }),
      layers: [
        new TileLayer({
          source: new TileSuperMapRest({
            url: url,
            prjCoordSys: { epsgCode: 4326 }
          }),
          projection: 'EPSG:4326'
        })
      ]
    })

    const geojson = require('./modules/map/json/guangdong.json')
    var dataSet1 = mapv.geojson.getDataSet(geojson)
    var citys = {
      深圳市: 20,
      广州市: 40,
      佛山市: 60,
      江门市: 80,
      中山市: 100
    }
    var data1 = dataSet1.get({
      filter: function (item) {
        if (!citys[item.name]) {
          return false
        }

        item.count = citys[item.name]
        return true
      }
    })
    dataSet1 = new mapv.DataSet(data1)
    var options = {
      gradient: {
        0: 'yellow',
        1: 'red'
      },
      globalAlpha: 0.8,
      draw: 'intensity'
    }

    map.addLayer(
      new ImageLayer({
        source: new Mapv({ map: map, dataSet: dataSet1, mapvOptions: options })
      })
    )

    var data2 = []
    for (var key in citys) {
      var center = mapv.utilCityCenter.getCenterByCityName(key.replace('市', ''))
      data2.push({
        geometry: {
          type: 'Point',
          coordinates: [center.lng, center.lat]
        },
        text: key
      })
    }
    var dataSet2 = new mapv.DataSet(data2)
    var textOptions = {
      draw: 'text',
      font: '14px Arial',
      fillStyle: 'blue',
      shadowColor: 'white',
      shadowBlue: 20,
      zIndex: 11,
      shadowBlur: 10
    }
    map.addLayer(
      new ImageLayer({
        source: new Mapv({ map: map, dataSet: dataSet2, mapvOptions: textOptions })
      })
    )
  }
}
</script>