@mapgis/webclient-mapboxgl-plugin
v17.2.0
Published
开发时需要引入MapGIS Client for JavaScript(Mapboxgl)开发包;其中包括必备的 CSS 文件和 JS 文件;
Downloads
216
Readme
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相关开发包
- @mapgis/webclient-mapboxgl-plugin
- @mapgis/mapboxgl 以 17.0.0版本为例进行说明
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.MapViewMapboxgl({
// 视图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.0
更新说明:
- 功能新增
- 二维(MapboxGL)引擎支持不同裁图方式瓦片叠加显示
- 二维(MapboxGL)引擎ArcGIS地图服务图层支持出一张图模式
- 二维(MapboxGL)引擎图层支持裁剪功能
- 二维(MapboxGL)引擎支持SimpleFillSymbol支持简单填充设置样式
- 二维(MapboxGL)引擎支持ArcGIS瓦片图层
- 功能优化
- 二维(MapboxGL)引擎优化矢量瓦片加载效果
v17.0.0
更新说明:
- 功能新增
- 新增支持自定义空间参考系图层服务
- 新增支持自定义裁图方式图层服务
- 地图服务支持一张图出图模式
备注:
@mapgis/mapbox-gl v17.0.0 基于官方 Mapbox-GL v1.10.0 进行了定制和扩展开发