526互联

vue3结合arcgis加载高德底图

发布时间 2023-08-30 11:05:14作者: ZerlinM

加载arcgis先查看这个文章 vue3中使用arcgis

高德

const map = new Map({
  basemap: '', // 此处置为空
})

mapView = new MapView({
  map,
  container: mapRef.value,
  center: [120.28985, 31.54225],
  zoom: 13
})

// 加载高德地图
const gdLayer = loadGdMapLayer()
mapView.map.layers.add(gdLayer)

加载高德地图方法

const loadGdMapLayer = () => {
  var gdMapLayer = new WebTileLayer({
    // 高德地图
    id: 'gaode',
    urlTemplate:
      'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={col}&y={row}&z={level}'
  })
  return gdMapLayer
}