矢量切片学习记录

一、矢量切片

1. 简介

2. 结构解析

三、技术路线

1. 先决条件：

2. 使用过程

创建矢量切片索引对数据进行抽稀，这一步可省略

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

四、前端加载及更换样式

 $(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);             };         });     }); });