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

目录

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 定义空间

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()
      })
  })

  二维地图完整版代码：

      
          
              
                  
              
          
      
  
  
  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()
      })
  })
  
  
  
  .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.6 界面展示

  在前端页面显示为：

  

  ---

  5 html环境下加载二维地图

  如果时使用html来构造二维地图，首先需要在supermap官网注册开发者账号，进入控制台创建新应用，获取 appKey（用于身份验证）。

  5.1 引入 SuperMap JS API

  在 HTML 文件中通过 CDN 或本地文件引入 API：

  5.2 创建地图容器

  在 HTML 头部中添加一个用于承载地图的 ：

  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               // 缩放级别
  }));

  完整代码如下：

  
  
    aaanimals_SuperMap_二维地图
    
    
      #map { width: 100%; height: 600px; }
    
  
  
    
    
      // 初始化地图
      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
      }));
    
  
  

  ---

  6 常见问题排查

  • 地图不显示：检查容器尺寸是否明确（如设置 width/height），确保 API 加载成功。
  • 图层加载失败：确认图层 URL 和 serverType 正确，或替换为自有服务地址。
  • 坐标偏移：若使用非官方地图，需确认坐标系（如 WGS84 或 GCJ02）。

    ---

    喜欢本篇文章请多多关注，您的鼓励是我最大的动力。欢迎大家互相分享交流。（aaanimals）

    ---