在SuperMap iClient 9D for MapboxGL中使用ECharts和MapV

作者: MR.

    SuperMap iClient 9D 是云GIS网络客户端开发平台。基于现代Web技术栈全新构建,是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端。集成了领先的开源地图库、可视化库,且核心代码以Apache2协议完全开源,连接了SuperMap与开源社区。提供了全新的大数据可视化、实时流数据可视化功能,通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。
    MapboxGL是一款使用WebGL进行渲染的WEB GIS SDK,包括JavaScript库和移动端SDK等 。它拥有优秀的可视化效果和高效的渲染性能,在世界范围内被广泛使用,是现在最流行的WEB GIS SDK之一。
    EchartsMapV都是百度前端团队出品的数据可视化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的图层,并且整合了脚本。
    更多示例可以参考如下地址列表:

    相关文档地址:

三、在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的示例进行叠加,效果如下:

MapVLayer

    更多示例请参考: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前进的方向。

阅读更多

扫码向博主提问

SuperMap技术控

非学,无以致疑;非问,无以广识
去开通我的Chat快问
版权声明:本文为博主原创文章,欢迎转载,SuperMap技术问答社区 http://ask.supermap.com https://blog.csdn.net/supermapsupport/article/details/78004577
个人分类: iClient
相关热词: supermap
上一篇SuperMap iClient 9D for MapboxGL地图风格浅析
下一篇快速搭建iServer大数据分布式空间分析服务
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭