@mapgis/webclient-leaflet-plugin NPM

1、获取 MapGIS Client for JavaScript（Leaflet）开发包

开发时需要引入MapGIS Client for JavaScript（Leaflet）开发包；其中包括必备的 CSS 文件和 JS 文件；

开发库分为正式发行版和Beta版;

正式版：面向公网用户，半年发行一次，发行后不会增加新功能，仅会修订BUG
Beta版：面向内网用户，每周发行一次，会修订BUG并增加新功能下面分别介绍两种版本包的获取方式：

1.1、正式发行版及其更新包

1.1.1、文件方式引入

前往司马云官网下载MapGIS Client for JavaScript开发库

以10.6.2.10为例，其中：

mapgis-client-for-javascript-dist-v10.6.2.10.rar为开发库
mapgis-client-for-javascript-all-v10.6.2.10.rar为开发库+示例站点 Webclient-Leaflet-Plugin所需开发包位于如下文件夹中
webclient-leaflet-plugin库：mapgis-client-for-javascript-all-v10.6.2.10\dist\cdn\zondyclient\webclient-leaflet-plugin.min.js
Leaflet库：mapgis-client-for-javascript-all-v10.6.2.10\dist\cdn\leaflet 之后请将webclient-leaflet-plugin.min.js文件和leaflet文件夹拷贝出来，放入项目的静态资源目录。

1.1.2、npm 方式引入

通过公网NPM的方式进行安装

npm install @mapgis/webclient-leaflet-plugin

1.2、Beta版

1.2.1、文件方式引入

请前往内网开发库下载Webclient-Leaflet-Plugin相关开发包

@mapgis/webclient-leaflet-plugin
@mapgis/leaflet 以 16.1.26版本为例进行说明

1.在该网页中请先选择要下载的版本

2.之后点击相应的版本号，在右侧点击下载按钮，下载压缩包

开发包位于如下文件夹中

webclient-leaflet-plugin库：webclient-leaflet-plugin-16.3.32\package\dist\webclient-leaflet-plugin.min.js
Leaflet库：leaflet-16.3.1\package\dist

请将leaflet-16.3.1\package\dist改名为leaflet，之后将webclient-leaflet-plugin.min.js

文件和leaflet文件夹拷贝出来，放入项目的静态资源目录

1.2.2、npm 方式引入

请先将npm源切换为内网：

npm set registry http://192.168.11.130:4873/

通过内网NPM的方式进行安装

npm install @mapgis/webclient-leaflet-plugin

2、如何引入开发库

2.1、文件方式引入

在index.html中引入引擎库和插件库

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--引擎库-->
    <link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/leaflet/leaflet.css">
    <script src="http://{ip}:{port}/{你的路径}/leaflet/leaflet.js"></script>
    <!--plugin库-->
    <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-leaflet-plugin.min.js"></script>
</head>
</html>

2.1、npm 方式引入

通过npm的方式安装@mapgis/webclient-leaflet-plugin插件库

npm install @mapgis/webclient-leaflet-plugin

3、初始化场景视图

3.1、文件方式引入

在项目的css文件中设置地图视图容器的样式，否则地图视图无法显示

/*设置地图视图的样式，一定要设置否则地图无法显示*/
#你的地图视图的id {
    width: 100%;
    height: 100%;
    position: absolute;
}

初始化地图视图对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <!--引擎库-->
    <link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/leaflet/leaflet.css">
    <script src="http://{ip}:{port}/{你的路径}/leaflet/leaflet.js"></script>
    <!--plugin库-->
    <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-leaflet-plugin.min.js"></script>
    <style>
      /*设置地图视图的样式，一定要设置否则地图无法显示*/
      #你的地图视图的id {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    </style>
    <script>
      // 初始化图层管理容器
      const map = new Zondy.Map()
      // 初始化地图视图对象
      const mapView = new Zondy.MapViewLeaflet({
        // 视图id
        viewId: '你的地图视图的id',
        // 图层管理容器
        map: map
      })
    </script>
</head>
<!--地图视图容器div-->
<div id="你的地图视图的id">
</div>
</html>

3.2、npm 方式引入

以VUE项目为例，React和Angular类似

在项目的css文件中设置地图视图容器的样式，否则地图视图无法显示

/*设置地图视图的样式，一定要设置否则地图无法显示*/
#你的地图视图的id {
    width: 100%;
    height: 100%;
    position: absolute;
}

在你的vue组件的template中设置地图视图容器的div元素

<!--地图视图容器div-->
<div id="你的地图视图的id">
</div>

引入需要的构造函数

import { MapViewLeaflet } from '@mapgis/webclient-leaflet-plugin'
import { Map } from "@mapgis/webclient-common"

在mounted生命周期中初始化地图视图

// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapViewLeaflet({
  // 视图id
  viewId: "你的地图视图的id",
  // 图层管理容器
  map: map
});

4、@mapgis/webclient-leaflet-plugin 版本说明

4.1、正式版

v17.2.0

更新说明：

功能新增

二维（Leaflet）引擎矢量瓦片支持多区、带洞区裁剪
二维（Leaflet）引擎ArcGIS地图支持出一张图模式

v17.0.0

更新说明：

功能新增

二维Leaflet插件支持相同空间参考系支持不同裁图方式瓦片图层的叠加显示
二维Leaflet插件增加地图旋转功能
二维Leaflet插件支持动态服务图层支持多区、带洞区裁剪

功能优化

二维Leaflet插件符号体系优化: 增加文字光晕效果二维虚线样式优化
地图视图Leaflet插件 MapImageLayer 平滑更新

V16.8.0

更新说明：

SpatialReference支持自定义坐标系（深汕坐标系）
二维地图增加地图旋转功能
示例数据及二维示例丰富、更新、完善

V16.6.0

更新说明：

功能新增

新增自定义坐标系（如高斯）数据和服务(含矢量瓦片)的接入功能
新增全局的请求拦截器

功能优化

完善和增强前端符号体系在 leaflet 引擎上的实现。

V16.4.0

更新说明：

基础对象接口优化升级，为不同地图引擎提供统一的数据模型支持，便于功能在不同引擎上的快速移植。
增强 MapGIS 高性能 GIS 服务接入能力，全面适配 MapGIS IGServer 2.0 服务接口。
新增支持 EPSG:4326 空间参考系矢量瓦片接入。
基础功能丰富与完善：地图图片图层支持根据视图全图范围取图；新增绘制工具和地图出图工具等。
增强客户端专题图功能，矢量瓦片图层、要素图层、WFS 图层、GeoJson 图层新增支持客户端专题图；地图图片图层新增支持服务端专题图；并统一不同地图引擎专题图接口。
示例完善：新增 MapGIS 瓦片/要素服务、ArcGIS 瓦片/地图服务、GeoJson 图层、矢量瓦片图层、图形图层、长度测量等示例，并优化若干示例。

V16.2.0

更新说明：

维护更新，修复若干 Bug

V16.0.0

更新说明：

维护更新，修复若干 Bug

V15.6.0

更新说明：

维护更新，修复若干 Bug

V15.4.0

更新说明：

维护更新，修复若干 Bug

V15.2.0

更新说明：

功能新增

Leaflet 示例全面优化，提供配套示例说明文档与 API；
新增支持 ElasticSearch 的分布式大数据搜索与分析能力，可实现热力分析、聚类分析等功能。

站点维护

示例说明文档美化

V15.0.0

更新说明：

全面整合了 Leaflet 等脚本库，代码模块化，采用最新的 JavaScript ES6 标准；
提供 Leaflet 开发库、示例、API，支持基于 OpenLayers5 的二维数据可视化（含 OGC、MapGIS 地图服务、第三方地图服务等）、量算、查询编辑、空间分析、专题图、矢量瓦片，以及大数据可视化与分析等功能；
新增集成 Echarts、MapV 可视化库，支持在 Web 三维模式下实现大数据可视化、大数据分析功能；
新增集成 Turf.js 客户端空间分析库，提供客户端空间计算能力，支持实现在客户端层的空间分析、拓扑分析、空间关系计算等功能。