前言

MapGIS Client for JavaScript对接MapGIS云GIS服务产品，提供高性能 GIS、大数据 GIS、智能 GIS 等全 GIS 服务能力，实现传统WebGIS与云GIS完美融合，集成四大主流地图开源框架和Echarts、MapV、D3 等可视化库，进一步增强了大数据、实时流数据的高效可视化表达、计算及分析应用能力。本文将介绍如何在vue3项目中配置MapGIS Client for JavaScript开发环境。

开发环境准备

MapGIS Client for JavaScript产品融合了多种 GIS 服务标准，提供大量的 GIS 服务组件。开发时，可以自行构建 GIS 服务器环境，支持如下 MapGIS 服务器产品：

• 传统高性能 GIS 服务器平台：提供传统 GIS 相关的地图服务、要素服务、分析服务等。包括MapGIS IGServer 开发版、MapGIS IGServer .NET 版、MapGIS IGServer Java for Windows 版、 MapGIS IGServer（九州）版等版本。产品相关安装配置和操作使用手册，请参见司马云-开发世界-资源中心-服务器 GIS；
• 大数据 GIS 分析服务器平台：MapGIS IGServer -X，提供矢量、影像、文本等大数据分析服务，产品相关安装配置和操作使用手册，请参见司马云-开发世界-资源中心-云 GIS-MapGIS 大数据与云平台-MapGIS IGServer-X；
• 智能 GIS 分析服务器平台：MapGIS IGServer -S，提供智能 GIS 服务，产品相关安装配置和操作使用手册，请参见司马云-开发世界-资源中心-云 GIS-MapGIS 大数据与云平台-MapGIS IGServer-S；
  也可直接使用第三方已发布的 GIS 服务资源,如：
• Arcgis server
• geoserver
• 天地图、高德、百度等

软硬件配置需求

• CPU：酷睿 i5 10400F 及以上
• 内存：16G 及以上
• 显存：独立显卡，显存 6G 及以上（gtx 1060）

场景的流畅度除了和硬件配置有关外，也和数据量的大小有关，请根据实际情况进行选择。

• node版本：14.x 及以上

安装包获取

从上述架构图中可以看到，MapGIS Client for JavaScript主要由以下几部分组成：

• 公共库（common）：与地图引擎无关的API，如IGS服务接口、图层、专题图、几何、绘制工具等；
• 地图插件库（plugin）：中间兼容层，将公共库的接口“映射”到对应地图引擎的接口；
• 地图引擎库：leaflet、Mapbox、Cesium地图引擎；
• 可视化插件库：提供Echarts、MapV等数据可视化插件；
  因此安装时，也是需要根据使用情况安装这3部分的库。

npm安装

• 使用leaflet

npm install @mapgis/webclient-leaflet-plugin

• 使用mapbox

npm install @mapgis/webclient-mapboxgl-plugin

• 使用cesium
  cesium的安装和前面有所不同，需要先安装cesium的引擎库，然后再安装cesium的插件库。

npm install @mapgis/cesium
npm install @mapgis/webclient-cesium-plugin

且要额外处理node_modules\@mapgis\cesium\Build\Cesium和node_modules\@mapgis\webclient-cesium-plugin\dist\webclient-cesium-plugin-resource两个文件夹里的静态资源，并配置全局变量。
静态资源的处理方法有2种。

• 方案1：手动拷贝至public目录下。如下图所示：

public/
├── cesiumStatic/
│   ├── Assets
│   ├── ThirdParty
│   ├── Widgets
│   ├── Workers
│   └── MapGIS
└── webclient-cesium-plugin-resource/

• 方案2：配置vite或webpack的静态资源拷贝插件，实现自动拷贝。

注意：vite和webpack的配置方法不同，下面分别介绍。

vite配置

npm install vite-plugin-static-copy -D

// vite.config.js 【v5】
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from "vite-plugin-static-copy";

// 要复制的文件所在路径 
const cesiumSource = "node_modules/@mapgis/cesium/Build/Cesium";
const cesiumPluginSource = "node_modules/@mapgis/webclient-cesium-plugin/dist/webclient-cesium-plugin-resource";

// 打包后，文件的存放路径
const cesiumBaseUrl = "public/webClient/cesiumStatic";
const mapgisBaseUrl = "public/webClient/plugin";

export default defineConfig({
  define: {
    // 定义Cesium资源路径和webclient-cesium-plugin资源路径
    CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
    MAPGIS_BASE_URL: JSON.stringify(mapgisBaseUrl)
  },

  plugins: [
    vue(),
    viteStaticCopy({
      // 拷贝 Cesium 静态资源
      targets: [
        {
          src: cesiumSource + '/**',
          dest: cesiumBaseUrl,
        },
        // 拷贝 webclient-cesium-plugin 静态资源到项目静态资源目录
        {
          src: cesiumPluginSource + '/**',
          dest: mapgisBaseUrl,
        }
      ]
    })
  ]
});

webpack配置

使用vue/CLI构建的vue3工程，目录下会有一个vue.config.js,可以修改该文件中的配置，实现打包时自动复制文件到指定目录。

npm install copy-webpack-plugin -D

// vue.config.js 【v5】
const { defineConfig } = require('@vue/cli-service');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

// 要复制的文件所在路径 
const cesiumSource = "node_modules/@mapgis/cesium/Build/Cesium";
const cesiumPluginSource = "node_modules/@mapgis/webclient-cesium-plugin/dist/webclient-cesium-plugin-resource";

// 打包后，文件的存放路径
const cesiumBaseUrl = "public/webClient/cesiumStatic";
const mapgisBaseUrl = "public/webClient/plugin";

module.exports = defineConfig({
  transpileDependencies: true,
  // 修改webpack配置
  configureWebpack: {
    plugins: [
      // 拷贝 Cesium 静态资源 Assets,ThirdParty,Widgets, Workers and MapGIS 到项目静态资源目录
      new CopyWebpackPlugin({
        patterns: [
          {
            from: cesiumSource,
            to: cesiumBaseUrl,
          },
          // 拷贝 webclient-cesium-plugin 静态资源到项目静态资源目录
          {
            from: cesiumPluginSource,
            to: mapgisBaseUrl,
          }
        ]
      }),
      new webpack.DefinePlugin({
        // 定义Cesium资源路径和webclient-cesium-plugin资源路径 
        CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
        MAPGIS_BASE_URL: JSON.stringify(mapgisBaseUrl)
      })
    ]
  },

});

使用

leaflet与mapBox

leaflet与mapbox的视图都是MapView,使用时从对应的plugin中导入即可。

<script setup>
import { onMounted, ref } from 'vue'
import { Map, IGSTileLayer } from '@mapgis/webclient-common'
import { MapView } from '@mapgis/webclient-leaflet-plugin' // 使用leaflet
// import { MapView } from '@mapgis/webclient-mapboxgl-plugin' // 或使用mapboxgl

// 导入leaflet样式文件
import '@mapgis/leaflet/dist/leaflet.css'


let map, view, layer

onMounted(async () => {
  // 初始化地图组件
  map = new Map()
  view = new MapView({
    viewId: 'map-container',
    map
  })
  addLayer()
})

// 添加瓦片图层
function addLayer() {
  // 创建瓦片图层
  layer = new IGSTileLayer({
    // 服务基地址
    url: 'http://webclient.smaryun.com:8089/igs/rest/services/Tile/湖北省_4326_normal_3-10/TileServer',
    // 图层透明度
  })
  // 添加图层
  map.add(layer)
}
</script>

<template>
  <div id="map-container"></div>
</template>

<style scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>

Cesium

<script setup>
import { onMounted } from 'vue'
import * as Cesium from '@mapgis/cesium'
import { Map } from '@mapgis/webclient-common'
import { SceneView } from '@mapgis/webclient-cesium-plugin'
// 将导入的Cesium赋值给全局window对象，确保Plugin能访问
window.Cesium = Cesium

// 导入Cesium样式文件
import '@mapgis/cesium/Build/Cesium/Widgets/widgets.css'


let map, sceneView

onMounted(async () => {
  // 在生命周期函数中初始化地图组件，确保map-container元素已经创建
  // 初始化地图组件
  map = new Map()
  sceneView = new SceneView({
    viewId: 'map-container',
    map
  })
})
</script>

<template>
  <div id="map-container"></div>
</template>

<style scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>