首页 > 其他分享> 文章详细

矢量切片学习记录

2019-09-21 14:01:14 阅读：409 来源： 互联网

标签：currentStyleInfo vectorTileLayer 记录矢量 style 切片 tileLayer

一、矢量切片

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

标签：currentStyleInfo,vectorTileLayer,记录,矢量,style,切片,tileLayer
来源： https://blog.csdn.net/u012599377/article/details/101102787

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9