作者： MR.
SuperMap iClient 9D 是云GIS网络客户端开发平台。基于现代Web技术栈全新构建，是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端。集成了领先的开源地图库、可视化库，且核心代码以Apache2协议完全开源，连接了SuperMap与开源社区。提供了全新的大数据可视化、实时流数据可视化功能，通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。
MapboxGL是一款使用WebGL进行渲染的WEB GIS SDK，包括JavaScript库和移动端SDK等 。它拥有优秀的可视化效果和高效的渲染性能，在世界范围内被广泛使用，是现在最流行的WEB GIS SDK之一。
Echarts和MapV都是百度前端团队出品的数据可视化JavaScript库，用于数据可视化展示，提供了丰富的展示效果。
SuperMap iClient for MapboxGL 是一套基于MapboxGL的云GIS网络客户端开发平台， 支持访问SuperMap iServer / iExpress / iPortal / iManager / Online的地图、服务和资源，为用户提供了完整专业的GIS能力， 同时提供了优秀的可视化功能。
本文介绍如何在SuperMap iClient 9D for MapboxGL中使用ECharts和MapV，在此之前，你需要先对MapboxGL、ECharts和MapV的使用有一定的了解，可参考MapboxGL官方 文档 和 示例 、ECharts官方文档和示例以及MapV官方文档及示例。
###一、使用MapboxGL加载iServer瓦片地图及矢量地图
SuperMap iServer 9D支持MapboxGL要求的瓦片地图（OpenStreetMap zxy规范）、矢量地图（Mapbox mvt格式）以及几何要素（GeoJSON格式）的数据格式，直接使用MapboxGL加载地图即可。
####1.1 加载iServer瓦片地图
由于MapboxGL只支持EPSG:3857坐标系（WEB 墨卡托），加载的地图需要是该坐标系的。iServer部分地图服务支持动态投影（将A坐标系的地图动态投影到B坐标系，转发的地图、瓦片发布的地图服务、平面无投影等坐标系均不支持动态投影），这些地图动态投影到3857坐标系后即可在MapboxGL中显示。
首先引入MapboxGL js和css，设置mapboxgl.accessToken，如下代码加载3857坐标系地图：
<div id='map' style='width:900px; height:600px;'></div> // 地图容器
<script>
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
" with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>";
var map = new mapboxgl.Map({
container: 'map', // 地图容器，html元素id
style: {
"version": 8, // 样式版本，必须是8
"sources": { // 数据源
"China3857": { // 数据源ID
"attribution": attribution, // 版权控件
"type": "raster", // 类型，栅格图像
"tiles": ['http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'], // 瓦片url模板，支持轮询
"tileSize": 256 // 瓦片大小，正方形边长
}
},
"layers": [{ // 图层
"id": "中国地图3857坐标系", // 图层ID
"type": "raster", // 类型
"source": "China3857", // 使用的数据源
"minzoom": 0, // 最小缩放级别
"maxzoom": 22 // 最大缩放级别
}]
},
center: [120.143, 30.236], // 初始显示地图的中心点
zoom: 3 // 初始显示地图的缩放级别
});
</script>
上面地图服务地址是：http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China，该服务为3857坐标系，支持zxyTileImage操作，即OpenStreetMap瓦片服务规范， .png表示使用png表述，即返回png格式瓦片，?后为参数列表，{z}、{x}、{y}会被MapboxGL替换为对应值，替换后的url表示一张瓦片，按照zxy瓦片规范将瓦片拼接起来就是完整的地图了。
加载4326坐标系（WGS84坐标系）地图，需要动态投影。在iServer支持动态投影的地图服务（访问iServer地图服务地址，如目标坐标系下拉菜单可选则支持动态投影到可选的坐标系）URL参数里加上 prjCoordSys 参数指定目标坐标系即可，比如：
var url = 'http://support.supermap.com.cn:8090/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}';
####1.2 加载矢量瓦片地图
这部分在另一篇博客有详细介绍，这里不再详述，参考: SuperMap iClient 9D for MapboxGL地图风格浅析
####1.3 添加几何要素
MapboxGL可以添加GeoJSON格式的几何要素，iServer支持查询结果的GeoJSON表述。使用iClient 9D for MapboxGL可以对接iServer提供的各种服务，所以这里要引入SuperMap iClient 9D for MapboxGL js文件（include-mapboxgl.js），查询添加几何要素代码如下：
//查询函数：
function query() {
var idsParam = new SuperMap.GetFeaturesByIDsParameters({
IDs: [247], // 查询SmID为247的要素
datasetNames: ["World:Countries"] // 查询的数据集
});
// dataUrl为iServer数据服务地址，此处为：
//"http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data"
var queryFeatures = new SuperMap.GetFeaturesByIDsService(dataUrl, {
serverType: SuperMap.ServerType.ISERVER, // 服务类型，这里是iServer提供的服务
eventListeners: { // 事件监听
processCompleted: callback // 查询完成执行callback方法
},
format: SuperMap.DataFormat.GEOJSON // 查询结果格式为 GeoJSON
});
queryFeatures.processAsync(idsParam); // 发送请求（异步执行）
}
function callback(serviceResult) { // serviceResult为查询结果
map.addSource("queryDatas", {
"type": "geojson",
"data": serviceResult.result.features
});
map.addLayer({
"id": "queryDatas",
"type": "fill", // fill类型一般用来表示一个面
"source": "queryDatas",
"paint": {
"fill-color": "#008080", // 填充的颜色
"fill-opacity": 0.4 // 填充透明度
},
// 过滤条件，只取数据源中的Polygon类型数据
"filter": ["==", "$type", "Polygon"]
});
}
###二、使用MapBoxGL的ECharts插件
MapboxGL有Echarts插件，支持在 mapbox 的地图上绘制三维的散点图，飞线图，柱状图和地图。你可以利用 Mapbox 强大的地图服务和 ECharts GL 丰富的可视化和渲染效果实现你想要的可视化作品。在使用 mapbox 组件之前你需要先引入 mapbox 的官方 sdk。详见Echarts文档及相关示例。
当然，也可以直接在MapboxGL的地图容器上添加Echarts的图层，二者并无冲突，这里直接使用iClient提供的include-mapboxgl.js脚本引入相关脚本。比如，如下代码在地图上添加模拟飞机迁徙图*（使用了Mapbox提供的矢量地图服务，需要先设置mapboxgl.accessToken）*：
// 初始化地图，使用Mapbox提供的矢量瓦片地图服务
var map = new mapboxgl.Map({
container: 'map',
style: "mapbox://styles/mapbox/dark-v9",
center: [112, 37.94],
zoom: 3
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
// 地图加载完成后添加Echarts图层
map.on('load', function () {
// 配置项参考文档：http://echarts.baidu.com/option.html#title
var option = {
GLMap: {
roam: true
},
coordinateSystem: 'GLMap',
title: {
text: '模拟迁徙',
subtext: '数据纯属虚构',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data: ['北京 Top10', '上海 Top10', '广州 Top10'],
textStyle: {
color: '#fff'
},
selectedMode: 'single'
},
geo: {
map: 'GLMap',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: series
};
var echartslayer = new EchartsLayer(map);
echartslayer.chart.setOption(option);
});
其中，series表示系列列表，即数据和相关效果选项，详情参考示例：模拟迁徙 。效果如下：
SuperMap iClient for MapboxGL在其中扮演的角色是对接了iServer提供的各种服务和扩展了MapboxGL的图层，并且整合了脚本。
更多示例可以参考如下地址列表：
- iClient 9D：http://iclient.supermapol.com/examples/mapboxgl/examples.html#viz-Echarts
- EchartsGL：http://gallery.echartsjs.com/explore.html#tags=echarts-glsort=ranktimeframe=all~author=all
相关文档地址：
- iClient 9D for MapboxGL：http://iclient.supermapol.com/web/APIs/mapboxgl.html
- MapboxGL：https://www.mapbox.com/mapbox-gl-js/api
- Echarts：http://echarts.baidu.com/api.html#echarts
###三、在MapBoxGL中使用MapV图层
和Echarts不同，MapboxGL并没有MapV插件，iClient for MapboxGL提供了 MapV图层 用以在MapBoxGL 地图上添加MapV图层。在使用上并无太多学习成本，在会用MapV的情况下几乎不需要学习如何使用，只是简单的把new mapv.baiduMapLayer换成new mapboxgl.supermap.MapvLayer，如下：
// 初始化地图
var map = new mapboxgl.Map({
container: 'map',
style: "mapbox://styles/mapbox/dark-v9",
center: [112, 37.94],
zoom: 3
});
// 地图加载完成后添加MapV图层
map.on('load', function () {
var dataSet = new mapv.DataSet(data); // MapV数据集
var options = { // MapV配置项
gradient: {
0: 'blue',
0.5: 'yellow',
1: 'red'
},
lineWidth: 0.5,
max: 30,
draw: 'intensity'
};
// 创建并添加MapV图层到地图上
new mapboxgl.supermap.MapvLayer(map, dataSet, options);
});
这里直接使用MapV的示例进行叠加，效果如下：
更多示例请参考：http://iclient.supermapol.com/examples/mapboxgl/examples.html#viz-MapV
MapV示例：http://mapv.baidu.com/gallery.html
从本文可以看出，使用方式是很灵活多样的，iClient 9D还有for OpenLayers、for Leaflet、Classic（SuperMap iClient for JavaScript 8C）等，减少了学习使用超图iClient的成本，更加开放和多元，这也将是SuperMap iClient前进的方向。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
