目录
1 获取脚手架
2 运行环境
3 新建page页
4 vue环境下加载二维地图
4.1 定义空间
4.2 空间样式优化
4.3 安装依赖库
4.4 创建存储地图的函数
4.5 地图初始化
4.6 界面展示
5 html环境下加载二维地图
5.1 引入 SuperMap JS API
5.2 创建地图容器
5.3 初始化地图
6 常见问题排查
1 获取脚手架
首先在GITTE上爬取一个框架，或者自己创建一个脚手架。
2 运行环境
用VScode打开查看（其他环境均可）
这里输入“npm run dev”，运行
npm run dev报错啦，原因，未安装相关依赖
在运行之前需要先安装依赖（如果在安装node时已经全局安装了就不会报错）
把相关依赖配置上。
npm install --legacy-peer-deps
再次运行“npm run dev”，进入系统页面。
3 新建page页
在page页下新建两个vue文件，用于二维、三维地图的测试（新建一个就行）。
在标题图层内加两个索引页，本框架在layout路径下的“navs.vue”文件内，添加两个索引。
给这两个索引定义两个路由。
保存并刷新页面，查看效果。
4 vue环境下加载二维地图
4.1 定义空间
<div class="plane-layout"><div class="plane-layout-2D"><div class="plane-layout-2D-middle"><div id="map"></div></div></div></div>4.2 空间样式优化
.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%;}}}
}4.3 安装依赖库
在script中导入一些必备的模块。
导入 'leaflet'库
import * as L from 'leaflet'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css'
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet'4.4 创建存储地图的函数
const createMap = () => {}4.5 地图初始化
定义一个开源的在线地图
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>4.6 界面展示
在前端页面显示为：
5 html环境下加载二维地图
如果时使用html来构造二维地图，首先需要在supermap官网注册开发者账号，进入控制台创建新应用，获取 appKey（用于身份验证）。
5.1 引入 SuperMap JS API
在 HTML 文件中通过 CDN 或本地文件引入 API：
<script src="https://iclient.supermap.io/dist/supermap.js"></script>
<!-- 或本地引入（需下载 SDK） -->
<script src="./path/to/supermap.js"></script>5.2 创建地图容器
在 HTML 头部中添加一个用于承载地图的 <div>：
<div id="map" style="width: 100%; height: 600px;"></div>5.3 初始化地图
在正文部分，使用 JavaScript 初始化地图实例，并加载底图：
// 初始化地图对象
const map = new supermap.Map({controls: [new supermap.NavigationControl(), // 添加缩放控件new supermap.ScaleLineControl() // 添加比例尺]
});// 创建图层
const layer = new supermap.TileLayer({url: "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China",serverType: "iServer"
});// 将图层添加到地图
map.addLayers([layer]);// 将地图绑定到容器
map.setTarget("map");// 设置初始视口（中心点坐标和缩放级别）
map.setView(new supermap.View({center: [116.4, 39.9], // 中心点坐标zoom: 4 // 缩放级别
}));完整代码如下：
<!DOCTYPE html>
<html>
<head><title>aaanimals_SuperMap_二维地图</title><script src="https://iclient.supermap.io/dist/supermap.js"></script><style>#map { width: 100%; height: 600px; }</style>
</head>
<body><div id="map"></div><script>// 初始化地图const map = new supermap.Map({controls: [new supermap.NavigationControl(),new supermap.ScaleLineControl()]});// 添加底图图层const layer = new supermap.TileLayer({url: "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China",serverType: "iServer"});map.addLayers([layer]);// 绑定到容器并设置视口map.setTarget("map");map.setView(new supermap.View({center: [116.4, 39.9],zoom: 4}));</script>
</body>
</html>6 常见问题排查
- 地图不显示：检查容器尺寸是否明确（如设置
width/height），确保 API 加载成功。 - 图层加载失败：确认图层 URL 和
serverType正确，或替换为自有服务地址。 - 坐标偏移：若使用非官方地图，需确认坐标系（如 WGS84 或 GCJ02）。
喜欢本篇文章请多多关注，您的鼓励是我最大的动力。欢迎大家互相分享交流。（aaanimals）
