20240108期：如何开发二维地图页面，以supermap地图页面开发为例

aaanimals

已于 2025-05-11 23:03:34 修改

阅读量562

点赞数 6

CC 4.0 BY-SA版权

分类专栏： GIS系统开发文章标签：源代码管理 supermap

于 2024-01-10 10:36:11 首次发布

本文链接：https://blog.csdn.net/weixin_55429615/article/details/130515946

GIS系统开发专栏收录该内容

7 篇文章

订阅专栏

在开发二维地图页面之前，首先需要配置开发环境并安装必要的工具，如Node.js和npm。使用SuperMapiClientforJavaScript作为开发工具，可以方便地在网页中嵌入地图。创建一个新的项目目录，并通过npm安装所需的依赖包。接着，编写HTML文件作为地图展示的基础模板，并创建main.js文件用于初始化地图和添加图层。通过简单的代码示例，可以设置地图视图、添加底图和标记，并进一步扩展功能，如添加矢量图层和绘制图形。SuperMapiClientforJavaScript提供了丰富的API，支持更多高级功能的开发。文章还提供了一个完整版的二维地图页面开发示例，包括地图的初始化、图层的添加和控件的设置。通过这些步骤，开发者可以快速构建功能丰富的二维地图页面。

在开发二维地图页面之前，需要确保开发环境已经配置好。SuperMap iClient for JavaScript 是一个常用的开发工具，支持在网页中嵌入地图。确保已经安装了Node.js和npm，并创建一个新的项目目录。

mkdir supermap-demo
cd supermap-demo
npm init -y

在项目目录中安装SuperMap iClient for JavaScript的依赖包。可以通过npm安装。

npm install @supermap/iclient-leaflet

在项目目录中创建一个HTML文件，用于展示地图。可以使用以下代码作为基础模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperMap 2D Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/@supermap/iclient-leaflet"></script>
    <script src="main.js"></script>
</body>
</html>

在项目目录中创建一个main.js文件，用于初始化地图并添加图层。以下是一个简单的示例代码。

// 初始化地图
var map = L.map('map').setView([30.25, 120.16], 10);

// 添加底图
L.supermap.tiledMapLayer("https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China").addTo(map);

// 添加标记
var marker = L.marker([30.25, 120.16]).addTo(map);
marker.bindPopup("Hello, SuperMap!").openPopup();

SuperMap iClient for JavaScript 提供了丰富的API，可以进一步扩展地图功能。例如，添加矢量图层、绘制图形、查询地图数据等。可以参考官方文档进行更多功能的开发。

// 添加矢量图层
var vectorLayer = L.supermap.featureLayer("https://iserver.supermap.io/iserver/services/data-china400/rest/data/featureResults/1.json").addTo(map);

// 绘制图形
var circle = L.circle([30.25, 120.16], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

以下是supermap地图页面开发完整版，二维地图部分。

<template>
    <div class="plane-layout">
        <div class="plane-layout-bottom">
            <div class="plane-layout-bottom-left">
            </div>
            <div class="plane-layout-bottom-right">
                <div id="map" style="width: 100%; height: 750px;">
                </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 { reactive,nextTick } from 'vue'


const state = reactive({
    options: [
        { label: '全部' }
    ],
    value1: '全部',
    value2: '',
    value3: '全部',
    value4: '全部',
    tableData: [
    ]
})
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
    });
    // 天地图底图
    var tdtmap = new L.supermap.TiandituTileLayer({
        layerType: 'img',
        key: '1d109683f4d84198e37a38c442d68311'
    }).addTo(map);
    // 图层设置
    var world = new L.supermap.TiledMapLayer(url4326,{noWrap:true});
    var 县域城市 = new L.supermap.TiledMapLayer('http://localhost:8090/iserver/services/map/rest/maps/县域城市0529', {noWrap:true});
    var baseMaps = { "天地图WMTS": tdtmap, "world": world };
    var overlayMaps = { "Cities": 县域城市};
      // 添加控件
    L.control.layers(baseMaps, overlayMaps).addTo(map);
    L.control.scale().addTo(map);
    L.control.minimap().addTo(map);
    L.control.sideBySide().addTo(map);
    
    // L.control.sideBySide(China, ChinaDark).addTo(map);
    new L.supermap.TiledMapLayer(url4326).addTo(map);
    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);
    var options = {
        position: 'topleft',
        draw: {
            polyline: {},
            polygon: {},
            circle: {},
            rectangle: {},
            marker: {},
            remove: {}
        },
        edit: {
            featureGroup: editableLayers,
            remove: true
        }
    };
    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);
    handleMapEvent(drawControl._container, map);
    map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;
        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }
        editableLayers.addLayer(layer);
    });

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }
}
nextTick(() => {
    createMap();
    });
</script>
<style lang="less">

</style>
<style lang="less" scoped>
.plane-layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px;
    &-bottom {
        &-right {
            flex: 1;
            background: url(@/images/border.png) no-repeat;
            background-size: 100% 150%;
            padding: 1px;
        }
    }
    &-table {
        flex: 1;
        overflow: hidden;
    }
}
</style>

官方源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_tiledMapLayer4326"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
  </head>
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var map,
        url = host + '/iserver/services/map-world/rest/maps/World';

      // 方式一：1.调用 L.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
      L.supermap.initMap(url);
      /*
        // 方式二：1.调用 L.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
        //         2.调用 L.supermap.crsFromMapJSON 创建 CRS
        //         3.调用 L.map 创建地图
        //         4.调用 L.supermap.TiledMapLayer 创建底图
        new L.supermap.MapService(url).getMapInfo().then((res) => {
            var crs = L.supermap.crsFromMapJSON(res.result);
            map = L.map('map', {
              crs: crs,
              center: [23.909946174843483, 17.607615853850504],
              maxZoom: 18,
              zoom: 0
            });
            new L.supermap.TiledMapLayer(url).addTo(map);
        });
      */
    </script>
  </body>
</html>

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