vue3 ts 集成 supermap

不知所云,

于 2024-08-17 10:32:31 发布

阅读量88

点赞数 2

分类专栏： GIS 文章标签： supermap vue3 ts

本文链接：https://blog.csdn.net/qq_51355375/article/details/141276531

版权

GIS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

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>