MapGIS Client for JavaScript API

# new ArcGISVectorTileLayer(options)

参数:

查看源代码 common/document/layer/arcgis/ArcGISVectorTileLayer.js, line 14

支持如下方法：

[1、根据子图层id查询图层]
[2、获取矢量瓦片样式]
[3、通过传入的json构造并返回一个新的几何对象]
4、导出为json对象
5、克隆几何对象
[6、获取图层布局属性]
[7、设置图层布局属性]
[8、获取图层绘制属性]
[9、设置图层绘制属性]
[10、获取图层]
[11、设置图层属性对象]
[12、删除图层]
[13、设置图层可见性]
[14、获取图层可见性]
[15、获取属性过滤条件]
[16、属性过滤]
[17、获取图层最小、最大层级]
[18、设置图层最小、最大层级]

示例

加载矢量瓦片服务

//初始化地图管理容器
// ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
const { Map,MapView } = Zondy
// ES6引入方式
import { ArcGISVectorTileLayer,Map,MapView } from "@mapgis/webclient-common"
const map = new Map();
//初始化地图引擎
const mapView = new MapView({
  //指定视图id
  viewId: "viewer-id",
  //绑定地图管理容器
  map: map
});
//添加矢量瓦片图层
const arcgisVectorTileLayer = new ArcGISVectorTileLayer({
  url: 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer'
});
map.add(arcgisVectorTileLayer);

加载矢量瓦片样式文件

 // ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
const { Map,MapView } = Zondy
// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
//初始化地图管理容器
const map = new Map();
//初始化地图引擎
const mapView = new MapView({
  //指定视图id
  viewId: "viewer-id",
  //绑定地图管理容器
  map: map
});
//添加矢量瓦片图层
const arcgisVectorTileLayer = new ArcGISVectorTileLayer({
  url: 'https://jsapi.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db/resources/styles/root.json'
});
map.add(arcgisVectorTileLayer);

加载矢量瓦片样式

 // ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
const { Map,MapView } = Zondy
// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
//初始化地图管理容器
const map = new Map();
//初始化地图引擎
const mapView = new MapView({
  //指定视图id
  viewId: "viewer-id",
  //绑定地图管理容器
  map: map
});
//添加矢量瓦片图层
const arcgisVectorTileLayer = new ArcGISVectorTileLayer({
  // 设置你的样式
  style: {}
});
map.add(arcgisVectorTileLayer);

设置图层透明度

igsVectorTileLayer.opacity = 0.5

显示或隐藏图层

igsVectorTileLayer.visible = !igsVectorTileLayer.visible

删除图层

map.remove(igsVectorTileLayer)

显示所有子图层

 // ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 添加图层
const igsVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/VectorTile/{serviceName}/VectorTileServer',
  //默认不设置sublayers,加载全部图层
});
map.add(igsVectorTileLayer);

根据id显示子图层

// ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 添加图层
const igsVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/VectorTile/{serviceName}/VectorTileServer',
  // 根据id显示子图层
  sublayers: [
     {
       // 子图层id
       id: '子图层id',
       // 显示子图层
       visible: true
     }
   ]
});
map.add(igsVectorTileLayer);

通过修改子图参数，设置子图层显隐

// ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 添加图层
const igsVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/VectorTile/{serviceName}/VectorTileServer'
});
map.add(igsVectorTileLayer);
igsVectorTileLayer.on('layerview-created', function (result) {
  console.log("加载完毕:", result.layer)
  // 根据id获取子图层
  const subLayer = igsVectorTileLayer.findSublayerById('图层id')
  // 设置子图层显隐
  subLayer.visible = false
  // 视点跳转
  sceneView.flyTo({
    extent: result.layer.extent
  })
})

设置子图层专题图-单值专题图

// ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
const { UniqueValueRenderer } = Zondy.Renderer
const { SimpleFillSymbol,SimpleLineSymbol } = Zondy.Symbol
const { Color } = Zondy
// ES6引入方式
import { ArcGISVectorTileLayer,UniqueValueRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-common"
const igsVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/VectorTile/{serviceName}/VectorTileServer',
  // 设置子图层专题图
  sublayers: [
     {
       // 子图层id
       id: '子图层id',
       // 设置渲染样式-单值专题图
       renderer: new UniqueValueRenderer({
         //专题图过滤字段名
         field: '你的字段名',
         // 默认样式,当没有匹配到指定值时,会使用默认样式
         //因为该数据的几何类型为区,因此设置区样式
         defaultSymbol: new SimpleFillSymbol({
           // 填充颜色
           color: 'rgba(1,1,252,0)',
           // 外边线样式
           outline: new SimpleLineSymbol({
             //线颜色
             color: new Color(255, 1, 0, 1),
             //线宽
             width: 1
           })
         }),
         //单值专题图过滤调条件数组
         uniqueValueInfos: [{
           //指定字段值
           value: "指定的值",
           //匹配到该值后的样式
           //因为该数据的几何类型为区,因此设置区样式
           symbol: new SimpleFillSymbol({
             // 填充颜色
             color: 'rgba(1,1,252,1)',
             // 外边线样式
             outline: new SimpleLineSymbol({
               //线符号颜色
               color: new Color(255, 1, 0, 11),
               //线宽
               width: 1
               })
             })
           },{
             //指定字段值
             value: "指定的值",
             //匹配到该值后的样式
             //因为该数据的几何类型为区,因此设置区样式
             symbol: new SimpleFillSymbol({
               // 填充颜色
               color: new Color(211, 111, 11, 1)
             })
           }]
       })
     }
  ]
});
map.add(igsVectorTileLayer);

设置子图层专题图-分段专题图

// ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
const { ClassBreakRenderer } = Zondy.Renderer
const { SimpleFillSymbol,SimpleLineSymbol } = Zondy.Symbol
const { Color } = Zondy
// ES6引入方式
import { ArcGISVectorTileLayer,ClassBreakRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-commo
const igsVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/VectorTile/{serviceName}/VectorTileServer',
  // 设置子图层专题图
  sublayers: [
    {
     // 子图层id
     id: '子图层id',
     // 设置渲染样式-分段专题图
     renderer: new ClassBreakRenderer({
       //专题图过滤字段名
       field: '你的字段名',
       // 默认样式,当没有匹配到指定值时,会使用默认样式
       // 因为该数据的几何类型为区,因此设置区样式
       defaultSymbol:  new SimpleFillSymbol({
         // 填充颜色
         color: 'rgba(222,1,252,1)',
         // 线符号样式
         outline: new SimpleLineSymbol({
           //线符号颜色
           color: new Color(255, 1, 0, 1),
           //线宽
           width: 1
         })
       }),
       //分段专题图过滤条件数组
       classBreakInfos: [{
         // 最大过滤范围,field对应的值小于maxValue
         maxValue: "最大范围",
         // 最小过滤范围,field对应的值大于等于minValue
         minValue: "最小范围",
         // 匹配到该值后的样式
         // 因为该数据的几何类型为区,因此设置区样式
         symbol:  new SimpleFillSymbol({
           // 填充颜色
           color: 'rgba(1,1,252,1)',
           // 线符号样式
           outline: new SimpleLineSymbol({
             //线符号颜色
             color: new Color(255, 1, 0, 1),
             //线宽
             width: 1
           })
         })
       }]
     })
   }
 ]
});
map.add(igsVectorTileLayer);

通过修改子图参数，设置子图层专题图

// ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
const { ClassBreakRenderer } = Zondy.Renderer
const { SimpleFillSymbol,SimpleLineSymbol } = Zondy.Symbol
const { Color } = Zondy
// ES6引入方式
import { ArcGISVectorTileLayer,ClassBreakRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-commo
const igsVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/VectorTile/{serviceName}/VectorTileServer'
});
map.add(igsVectorTileLayer);
// 根据id获取子图层
const subLayer = igsVectorTileLayer.findSublayerById('子图层id')
// 设置渲染样式-分段专题图
subLayer.renderer = new ClassBreakRenderer({
    // 专题图过滤字段名
    field: '你的字段名',
    // 默认样式,当没有匹配到指定值时,会使用默认样式
    // 因为该数据的几何类型为区,因此设置区样式
    defaultSymbol:  new SimpleFillSymbol({
      // 填充颜色
      color: 'rgba(222,1,252,1)',
      // 线符号样式
      outline: new SimpleLineSymbol({
        //线符号颜色
        color: new Color(255, 1, 0, 1),
        //线宽
        width: 1
      })
    }),
    //分段专题图过滤条件数组
    classBreakInfos: [{
      // 最大过滤范围,field对应的值小于maxValue
      maxValue: "最大范围",
      // 最小过滤范围,field对应的值大于等于minValue
      minValue: "最小范围",
      // 匹配到该值后的样式
      // 因为该数据的几何类型为区,因此设置区样式
      symbol:  new SimpleFillSymbol({
        // 填充颜色
        color: 'rgba(1,1,252,1)',
        // 线符号样式
        outline: new SimpleLineSymbol({
          //线符号颜色
          color: new Color(255, 1, 0, 1),
          //线宽
          width: 1
        })
      })
    }]
  })

统一专题图

// ES5引入方式
const { ArcGISVectorTileLayer } = Zondy.Layer
const { SimpleRenderer } = Zondy.Renderer
const { SimpleFillSymbol,SimpleLineSymbol } = Zondy.Symbol
const { Color } = Zondy
// ES6引入方式
import { ArcGISVectorTileLayer,SimpleRenderer ,SimpleFillSymbol,SimpleLineSymbol,Color} from "@mapgis/webclient-commo
const igsVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址，当不指定图层名称时，默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/VectorTile/{serviceName}/VectorTileServer',
  // 设置渲染样式-统一专题图
  renderer: new SimpleRenderer({
    // 因为该数据的几何类型为区，因此设置区样式
    symbol: new SimpleFillSymbol({
      // 填充颜色
      color: new Zondy.Color(255, 0, 0),
      // 外边线样式
      outline: new SimpleLineSymbol({
        // 线颜色
        color: new Color(0, 0, 0),
        // 线宽度
        width: 1
      })
    })
  })
})