supermap在vue3+vite项目中的使用

supermap在vue3项目中的使用

可参考官方文档：

• https://iclient.supermap.io/web/introduction/leafletDevelop.html#GetLibs

一、安装项目所需依赖

根据官方文档

npm install @supermapgis/iclient-leaflet

二、引入依赖

在main.ts中引入地图css

// 引入iclient-leaflet样式
import 'leaflet/dist/leaflet.css'

三、在组件中使用

<script setup>
import { onMounted } from 'vue'
import L from 'leaflet'
import { TiledMapLayer } from '@supermapgis/iclient-leaflet'

const urlList = ref([
  'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China',
  // ...
])

const map = ref()

function initMap() {
  console.log('初始化')
  map.value = L.map('map', {
    center: [35.25, 102.55],
    zoom: 4,
  })
  const url = urlList.value[0]
  console.log('url', url)
  new TiledMapLayer(url).addTo(map.value)
}

onMounted(() => {
  initMap()
})
</script>

<template>
  <div id="map" class="home-map-div"></div>
</template>

<style scoped>
.home-map-div {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
</style>

效果图展示

结尾

路漫漫其修远兮