在vue框架内实现加载supermap二维三维底图及功能实现（待更新）

记录了如何从一个vue框架，初步设计并加载二三维底图，并实现相关功能。

---

目录

01.框架获取

02.运行脚手架

03.新建page页

04.配置二维地图

---

01.框架获取

首先在GITTE上爬取一个框架，或者自己创建一个脚手架。

02.运行脚手架

用VScode打开查看（其他环境均可）

这里输入“npm run dev”，运行

npm run dev

报错啦，原因，未安装相关依赖（说明框架内部有东西）

我们只需要把相关依赖配置上即可。

npm install --legacy-peer-deps

再次运行“npm run dev”，进入系统页面。

03.新建page页

在page页下新建两个vue文件，用于二维、三维地图的测试。

在标题图层内加两个索引页，本框架在layout路径下的“navs.vue”文件内，添加两个索引。

给这两个索引定义两个路由。

保存并刷新页面，查看效果。

04.配置二维地图

首先定义一个空间。

    <div class="plane-layout"><div class="plane-layout-2D"><div class="plane-layout-2D-middle"><div id="map"></div></div></div></div>

并对空间样式进行优化

.plane-layout {width: 100%;height: 100%;display: flex;flex-direction: column;padding: 0px;&-2D {height: 100%;&-middle {flex: 1;background-size: 100% 150%;padding: 1px;height: 100%;#map {width: 100%;height: 100%;}}}
}

接下来，在script中导入一些必备的模块。

导入 'leaflet'库

import * as L from 'leaflet'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css'
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet'

创建一个存储地图的函数

const createMap = () => {}

定义一个开源的在线地图

var url4326 = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";

对地图的属性进行定义

如地图名称、投影、中西当年、最大缩放等级、最小缩放等级、当前缩放等级等。

    var map = L.map('map', {crs: L.CRS.EPSG4326,center: [40.044716, 111.489059],maxZoom: 18,zoom: 4,minZoom: 4});

将在线地图显示在定义的地图图层中

（函数引用：support.supermap.com.cn:8090/iserver/iClient/forJavaScript/docs/leaflet/TiledMapLayer.html）

new L.supermap.TiledMapLayer(url4326).addTo(map);

这里，我们需要给地图定义一个出发指令。

• mounted: 组件初始化完成，可以访问dom，
• $nextTick: 每次数据更新之后，渲染完毕的回调，
• created: 可以正常访问数据。

onMounted(() => {nextTick(() => {createMap()})
})

二维地图完整版代码：

<template><div class="plane-layout"><div class="plane-layout-2D"><div class="plane-layout-2D-middle"><div id="map"></div></div></div></div>
</template>
<script setup lang="ts">
import * as L from 'leaflet'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css'
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet'
import { onMounted, nextTick } from 'vue'const createMap = () => {var url4326 = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";var map = L.map('map', {crs: L.CRS.EPSG4326,center: [40, 111],maxZoom: 18,zoom: 4,minZoom: 4});new L.supermap.TiledMapLayer(url4326).addTo(map);
}
onMounted(() => {nextTick(() => {createMap()})
})
</script>
<style></style>
<style lang="less" scoped>
.plane-layout {width: 100%;height: 100%;display: flex;flex-direction: column;padding: 0px;&-2D {height: 100%;&-middle {flex: 1;background-size: 100% 150%;padding: 1px;height: 100%;#map {width: 100%;height: 100%;}}}
}
</style>

在前端页面显示为：