当前位置：首页 > news >正文

20250330期：在前端网页上开发超图二维地图（vue+html）

news 来源：原创 2025/6/23 7:41:05

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>