在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>

在前端页面显示为：