矢量切片学习记录

一、矢量切片

1. 简介

       GIS中是有多种服务的，每种服务都有特定的应用场景，例如要素服务可以在前端进行编辑，切片服务可以通过切片缓存的形式加快地图数据的浏览，GP服务可以将桌面端的地理处理能力带到Web端……

       矢量切片，通俗地讲，就是将矢量数据一建立金字塔的方式，像栅格切片那样分割成一个个描述性文件，以Geojson或者pbf等自定义格式组织，然后在前端根据显示需要按需请求不同的矢量切片数据进行Web绘图。

       ArcGIS的矢量切片是利用协议缓冲技术的二进制数据格式传递信息的，前端通过解析样式动态渲染矢量切片数据。相对于传统的动态服务、栅格切片，矢量切片优势很明显：

       ①切图快

       ②体积小

       ③传输快

       ④渲染速度快

       ……

       从技术上来说，矢量切片有点类似于要素服务加载矢量的方式和影像切片加载的结合，但是需要注意的是，矢量切片是为了替代栅格切片作为底图，而不是为了取代要素图层。

2. 结构解析

       下图是矢量切片整个结构说明：

 

       需要注意的几个文件：

 

       使用过程中最关注的是修改符号，符号和P12/resources/sprites/sprite.json（索引）以及P12/resources/sprites/sprite.png（符号）有关              

三、技术路线

      整体技术路线如下图：

 

1. 先决条件：

     ①ArcGIS Pro1.2及以上版本

     ②Portal及Server10.4及以上版本

     ③ArcGIS API for JS 3.15/4.0以上

     ④ArcGIS Runtime 100.x

2. 使用过程

     ①使用ArcGIS Pro加载矢量数据，如有需要，对数据进行相应制图

     ②当图斑数量较多时，可以使用创建矢量切片索引对数据进行抽稀，这一步可省略

     ③使用创建矢量切片包工具，创建矢量切片包，vtpk格式

     ④通过ArcGIS Pro的共享包工具上传至Portal或者ArcGIS Online中，点击发布，即可创建成功

    ⑤前端加载

              实例化地图，运用“VectorTileLayer”实例化矢量切片图层，将图层添加至地图进行显示

    ⑥移动端Runtime类似。

四、前端加载及更换样式

       下面贴出一个代码示例，主要实现的功能是前端进行颜色的更改

$(function () {
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/VectorTileLayer"
    ], function(Map, MapView, VectorTileLayer) {
        //01 初始化地图
        var map = new Map();

        var view = new MapView({
            container: "mapdiv",
            map: map,
            center: [113.865658,34.037604],
            zoom: 13
        });

        //02 加载矢量切片
        var tileLayer = new VectorTileLayer({
            url:
                "https://w107.esricd.com/server/rest/services/Hosted/yngt_vtpk/VectorTileServer/resources/styles/root.json"
        });
        map.add(tileLayer);

        //03 绑定颜色控件事件，颜色变化时触发
        $(".changeColor").bind("change",function (e) {

            let colorSettingModel= {
                selectedField: e.target.id,
                pickedColor: $(this).val()
            };
            let vectorTileLayer = tileLayer;

            //获取矢量切片图层的样式，即currentStyleInfo.style属性
            if (
                vectorTileLayer.hasOwnProperty('currentStyleInfo') &&
                vectorTileLayer.currentStyleInfo.style.glyphs.substring(0, 2) === '..'
            ) {
                vectorTileLayer.currentStyleInfo.style.glyphs =
                    vectorTileLayer.currentStyleInfo.serviceUrl +
                    '/resources/styles/' +
                    vectorTileLayer.currentStyleInfo.style.glyphs;
                vectorTileLayer.currentStyleInfo.style.sprite =
                    vectorTileLayer.currentStyleInfo.serviceUrl +
                    '/resources/styles/' +
                    vectorTileLayer.currentStyleInfo.style.sprite;
                vectorTileLayer.currentStyleInfo.style.sources.esri.url =
                    vectorTileLayer.currentStyleInfo.serviceUrl;
            }

            let vectorTileLayerStyle = { ...vectorTileLayer.currentStyleInfo.style };

            //改变style属性中每个图层的fill-color属性值
            if (vectorTileLayerStyle) {
                for (let i = 0; i < vectorTileLayerStyle.layers.length; i++) {
                    let tileLayer = vectorTileLayerStyle.layers[i];

                    if (tileLayer.id.split(',')[0].indexOf(colorSettingModel.selectedField) < 0) continue;

                    if (tileLayer.type === 'fill') {
                        let pColorStr = tileLayer.paint['fill-color'];

                        if (pColorStr) {
                            if (pColorStr.indexOf('#') > -1) {
                                tileLayer.paint['fill-color'] = colorSettingModel.pickedColor;
                                vectorTileLayerStyle.layers[i] = tileLayer;
                            } else {
                                let num1 = colorSettingModel.pickedColor.lastIndexOf(',') + 1;
                                let num2 = colorSettingModel.pickedColor.indexOf(')');
                                let alpha = colorSettingModel.pickedColor.substring(num1, num2);
                                tileLayer.paint['fill-color'] =
                                    colorSettingModel.pickedColor.substring(
                                        0,
                                        colorSettingModel.pickedColor.lastIndexOf(',') + 1
                                    ) +
                                    alpha +
                                    ')';
                                vectorTileLayerStyle.layers[i] = tileLayer;
                            }
                        }
                    }
                }

                //矢量切片图层重新加载渲染方案
                vectorTileLayer.loadStyle(vectorTileLayerStyle);
            };
        });
    });
});

 效果：

更深一级的应用，更换符号，图片上传不了，只能截图说明一下：

 

 

五、Portal端更改样式

       前端可以通过js api对矢量切片样式进行修改，那么这一部分主要就说明一下如何在portal端对矢量切片进行样式修改。

1. 直接替换portal上的矢量切片包，比较麻烦

2. 更换样式文件

（1） 在map viewer中加载矢量切片服务

（2） 复制图层，并保存图层

（3） 回到内容中，多了刚才保存的图层，点击进去，下载样式文件

（4）下载的样式文件即为root.json文件，可以对样式进行修改

（5）修改完之后， 点击更新，上传新的root.json文件，样式修改就成功了

 

 

 

参考：

1. https://enterprise.arcgis.com/zh-cn/portal/latest/use/update-vector-tile-style.htm

2. http://zhihu.esrichina.com.cn/topic/矢量切片

3. 感谢前端大神 https://me.csdn.net/qq_35117024 ，欢迎学习arcgis js api开发的关注ta   

【附录】

          欢迎大家关注我的微信公众号：gis小僧