ArcGis for JavaScript 之 加载TileLa

说明：

• 1.本文主要记录自己这段时间使用Arcgis for JavaScript的一些总结，其中包括如何调用，如何在前端页面进行对数据的查询，不同符号渲染，小部件，等相关内容
• 2.将使用官网提供的数据，后期可能自己发布相应的服务辅助
• 3.前面已有一篇文章介绍了Arcgis的产品体系，以及我们前端需要用到的离线部署，这里就不赘述了。
• 4.本次示例基于Vue框架,Arcgis for JavaScript API版本4.6
• 项目Git地址

一、理解图层

把图层想象成几张透明的塑料膜，你在上面画画，第一张一个房子，第二张一棵树，第三张一个人，然后画完之后你把它们叠在一起，一幅画就出来了。

同样的地图的图层也是这个道理，虽然在ArcGis for JavaScript中他对图层的类型进行了不同分类，比如：TileLayer，FeatureLayer，CSVLayer，ImageryLayer...，但是实际上是离不开上述的那个原理，这些图层都会带有不同的数据，但是都是把这些图层一层一层的叠加起来，然后再展示给我们或者用户。

• 创建TileLayer图层

loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/TileLayer', 'dojo/domReady!'], option)
  .then(([Map, MapView, TileLayer]) => {
    let tileLayer = ServiceUrl.tileLayer.map(item => {
      return new TileLayer({ // 可配置属性，见TileLayer类
        id: item.id,
        url: item.url
      })
    })
    this.map = new Map({
      layers: tileLayer
    })
    this.view = new MapView({
      container: this.$refs.baseMap, // 视图的容器
      map: this.map, // Map的实例放入视图中
      center: [104.06, 30.67], // 初始显示的地图中心点，经纬度
      zoom: 10 // 当前地图缩放等级
    })
    console.log(this.view)
    console.log(this.map)
  })
  .catch(err => {
    console.log(err)
  })

这里没有使用Map的baseMap属性，而是使用的layers属性，其实也是在给Map加入新的图层。输出的当前Map如下:

[图片上传失败...(image-c2fe3-1530862763905)]

1 可以知道实际上layer就是Map这个类的一个属性值，且可以是多个layer的集合

2 如果需要操作图层，可以从Map中获取到图层，然后进行一些相关操作(移除，添加，显示，隐藏等)