17.2.12 • Published 8 months ago

@mapgis/webclient-mapboxgl-plugin v17.2.12

Weekly downloads
1
License
Apache-2.0
Repository
-
Last release
8 months ago

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

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

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

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

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

1.1.1、文件方式引入

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

以10.7.0.10为例，其中：

  • mapgis-client-for-javascript-dist-v10.7.0.10.rar为开发库

  • mapgis-client-for-javascript-all-v10.7.0.10.rar为开发库+示例站点 Webclient-Mapboxgl-Plugin所需开发包位于如下文件夹中

  • webclient-mapboxgl-plugin库：mapgis-client-for-javascript-all-v10.7.0.10\dist\cdn\zondyclient\webclient-mapboxgl-plugin.min.js

  • Mapboxgl库：mapgis-client-for-javascript-all-v10.7.0.10\dist\cdn\mapboxgl 之后请将webclient-mapboxgl-plugin.min.js文件和mapboxgl文件夹拷贝出来，放入项目的静态资源目录。

1.1.2、npm 方式引入

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

npm install @mapgis/webclient-mapboxgl-plugin

1.2、Beta版

1.2.1、文件方式引入

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

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

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

开发包位于如下文件夹中

  • webclient-mapboxgl-plugin库：webclient-mapboxgl-plugin-17.0.0\package\dist\webclient-mapboxgl-plugin.min.js
  • Mapboxgl库：mapboxgl-17.0.0\package\dist

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

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

1.2.2、npm 方式引入

请先将npm源切换为内网：

npm set registry http://192.168.11.130:4873/

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

npm install @mapgis/webclient-mapboxgl-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}/{你的路径}/mapboxgl/mapbox-gl.css">
    <script src="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.js"></script>
    <!--plugin库-->
    <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-mapboxgl-plugin.min.js"></script>
</head>
</html>

2.1、npm 方式引入

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

npm install @mapgis/webclient-mapboxgl-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}/{你的路径}/mapboxgl/mapbox-gl.css">
    <script src="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.js"></script>
    <!--plugin库-->
    <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-mapboxgl-plugin.min.js"></script>
    <style>
      /*设置地图视图的样式，一定要设置否则地图无法显示*/
      #你的地图视图的id {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    </style>
    <script>
      // 初始化图层管理容器
      const map = new zondy.Map()
      // 初始化地图视图对象
      const mapView = new zondy.mapboxgl.MapView({
        // 视图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 { MapViewMapboxgl } from '@mapgis/webclient-mapboxgl-plugin'
import { Map } from "@mapgis/webclient-common"

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

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

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

4.1、正式版

v17.2.12

更新说明：

  1. 功能优化
  • 修复已知问题

v17.2.11

更新说明：

  1. 功能优化
  • 修复已知问题

v17.2.10

更新说明：

  1. 功能优化
  • 修复已知问题

v17.2.9

更新说明：

  1. 功能优化
  • 修复已知问题

v17.2.8

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎修复已知问题

v17.2.7

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎修复已知问题

v17.2.6

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎修复已知问题

v17.2.5

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎修复已知问题

v17.2.4

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎修复已知问题

v17.2.3

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎修复已知问题

v17.2.2

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎修复已知问题

v17.2.1

更新说明：

  1. 功能优化
  • 二维（MapboxGL）引擎优化命名空间结构
  • 二维（MapboxGL）引擎修复已知问题

v17.2.0

更新说明：

  1. 功能新增
  • 二维（MapboxGL）引擎支持不同裁图方式瓦片叠加显示
  • 二维（MapboxGL）引擎ArcGIS地图服务图层支持出一张图模式
  • 二维（MapboxGL）引擎图层支持裁剪功能
  • 二维（MapboxGL）引擎支持SimpleFillSymbol支持简单填充设置样式
  • 二维（MapboxGL）引擎支持ArcGIS瓦片图层
  1. 功能优化
  • 二维（MapboxGL）引擎优化矢量瓦片加载效果

v17.0.0

更新说明：

  1. 功能新增
  • 新增支持自定义空间参考系图层服务
  • 新增支持自定义裁图方式图层服务
  • 地图服务支持一张图出图模式

备注：

@mapgis/mapbox-gl v17.0.0 基于官方 Mapbox-GL v1.10.0 进行了定制和扩展开发

zondyservice&mapboxgl
@mapgis/mapbox-gl@mapgis/webclient-common
@everything-registry/sub-chunk-579@infinitebrahmanuniverse/nolb-_map@mapgis/webclient-vue-mapboxgl
17.2.11

8 months ago

17.2.12

8 months ago

17.2.10

8 months ago

17.2.1

12 months ago

17.4.1

9 months ago

17.2.3

11 months ago

17.4.0

9 months ago

17.2.2

11 months ago

17.2.8

10 months ago

17.2.5

10 months ago

17.2.4

11 months ago

17.2.7

10 months ago

17.2.6

10 months ago

17.2.0

12 months ago

17.0.7

1 year ago

17.0.6

1 year ago

17.0.5

1 year ago

17.0.4

1 year ago

17.0.2

1 year ago

17.0.0

1 year ago

10.3.4

6 years ago

10.3.3

6 years ago

10.3.1

7 years ago

10.3.0

7 years ago