文章目录
- 1. 依赖安装
- 2. 模块声明
- 3. css 全局引入
- 4. 地图加载
1. 依赖安装
npm install @supermapgis/iclient-leaflet
npm install leaflet
2. 模块声明
env.d.ts
declare module 'leaflet' {
const L: any;
export default L;
}
declare module '@supermapgis/iclient-leaflet'
3. css 全局引入
import 'leaflet/dist/leaflet.css'
import '@supermapgis/iclient-leaflet/dist/iclient-leaflet.min.css'
4. 地图加载
<template>
<div id="map" class="map-container1"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import L from 'leaflet'
import { TiledMapLayer } from '@supermapgis/iclient-leaflet'
let url = 'http://192.168.1.51:8090/iserver/services/map-China10_test1/rest/maps/Xingkaihu_R%40mapFeatureTest1'
var map: any = {}
onMounted(() => {
console.log("load map")
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: { lon: 132.42, lat: 44.94 },
maxZoom: 18,
zoom: 9,
});
new TiledMapLayer(url).addTo(map);
})
<script>