ArcGis必要关键方法

通过四点画面并定位中心

// 取四点画面，通过面定位
        toCenter(list) {
            let point1 = [] // 点 左下
            let point2 = [] // 点 左上
            let point3 = [] // 点 右上
            let point4 = [] // 点 右下
            list.forEach((item, index) => {
                const { coox, cooy } = item
                if (coox < 0 || coox < 0) { return }
                item.x = coox
                item.y = cooy

                if (!index) {
                    point1 = [coox, cooy]
                    point2 = [coox, cooy]
                    point3 = [coox, cooy]
                    point4 = [coox, cooy]
                    return
                }

                if (coox < point1[0] && cooy < point1[1]) { return (point1 = [coox, cooy]) }
                if (coox < point2[0] && cooy > point2[1]) { return (point2 = [coox, cooy]) }
                if (coox > point3[0] && cooy > point3[1]) { return (point3 = [coox, cooy]) }
                if (coox > point4[0] && cooy < point4[1]) { return (point4 = [coox, cooy]) }
            })

            // 地图 跳转
            const geometry = new this.$esri.Polygon({
                rings: [point1, point2, point3, point4, point1],
                spatialReference: this.$mapView['map'].spatialReference
            })
            // this.$mapView['map'].goTo(geometry).then(() => (this.$mapView['map'].zoom -= 1))
            this.$mapView['map'].goTo(geometry)
        },

不闪烁更新地图元素

 // await this.clearLayerData()
            // 构建 graphics
            const graphics = this.listData.map((item, i) => {
                item.uniqueId = i // 补充ID
                return {
                    geometry: {
                        type: 'point',
                        x: item.x,
                        y: item.y,
                        spatialReference: this.$mapView.spatialReference
                    },
                    attributes: item
                }
            })

            // 添加图层数据
            this.layers.riverWaterLevel.applyEdits({
                addFeatures: graphics
            const layer = this.layers
            // 第一次要渲染所有的点，第二次后进行更新操作
            layer.riverWaterLevel.queryFeatures().then(function(results) {
                if (results.features.length > 0) {
                    this.layers.riverWaterLevel.applyEdits({
                        updateFeatures: graphics
                    })
                } else {
                    layer.riverWaterLevel.applyEdits({
                        addFeatures: graphics
                    })
                }
            })
            // 添加数据

根据值查询要素Features

const layer = this.$mapView.map.findLayerById('sewageFarmClickLayer')
                    if (layer === undefined) {
                        return false
                    }
                    const query = layer.createQuery()
                    query.where = `NAME = '${item.sjdw}'`
                    layer.queryFeatures(query).then(results => {
                        if (results.features.length) {
                            const graphic = results.features[0]
                            // 调取地图的定位、高亮函数
                            console.log(graphic)
                            this.$mapView.goTo(graphic)
                        }
                    })

根据值查询要素Features

const layer = this.$mapView.map.findLayerById('sewageFarmClickLayer')
const graphic = layer.graphics.find(graphic => {
  return graphic.attributes.swid === 'id'
})

地图定位goTo

 this.$mapView.goTo(graphic)

增加高亮效果highlight

this.$mapView.whenLayerView(graphic.layer).then(layerView => {
                            if (this.highlight) {
                                this.highlight.remove()
                            }
                            this.highlight = layerView.highlight(graphic)
                        })

添加图形并进行定位

this.$mapView.graphics.removeAll()
            const graphic = new this.$esri.Graphic({
                geometry: {
                    type: 'point',
                    x: row.coox,
                    y: row.cooy,
                    spatialReference: this.$mapView.spatialReference
                },
                symbol: {
                    type: 'picture-marker',
                    url: this.getSymbolPath(row.alarmSort),
                    width: '20px',
                    height: '26px',
                    yoffset: '13px'
                }
            })
            this.$mapView.graphics.add(graphic)
            this.$mapView.goTo({
                target: graphic,
                zoom: 12
            })

获取当前地图层级

this.$mapView.zoom

goTo方法总结

goTo方法的参数可以是两个或一个。当只有一个参数时，是一个数组；当是两个参数时，第一个参数是数组（一维或二维）或对象或某个图层的graphics，第二个参数是duration。
示例：

 view.goTo([112.6, 22.542])
 ------------------------------------------
mapView.goTo([113.6042903, 22.5501197], {
	duration: 2000 //视角跳转时长为2秒
})
---------------------------------------------
mapView.goTo([
		[113.59764, 22.49856],
		[113.59513, 22.50922],
		[113.60482, 22.51036],
		[113.60669, 22.49959],
		[113.59764, 22.49856]
	], {
	duration: 2000
});
---------------------------------------------
 mapView.goTo({
		target: [113.60389, 22.54591],
		zoom: 13,
	    heading: 48,
	    tilt: 40
	}, {
	   duration: 2000, //视角跳转时长为2秒，
	}).then(function () {
	   // console.log("跳转完成");
	})
-------------------------------------------------
	mapView.goTo(videoPointLayer.graphics, {
   	duration: 2000 //视角跳转时长为2秒
   	})

1、可以使用定时器创建连续的动画

  goTo返回一个承诺，该承诺在动画完成时解决。这个承诺可能会被链接以创建一系列动画。
          view.goTo([112.6, 22.542])
            .then(function() {
              return view.goTo([113.6, 25.542]);
            })
            .then(function() {
              return view.goTo([113.6, 22.542]);
            });

2、点击，回到初始化位置以及视角

      backToOldVisualAngle() {
        var mapView = global.mapView;
        mapView.goTo({
          target: [113.60389, 22.54591],
          zoom: 13,
          heading: 48,
          tilt: 40
        }, {
          duration: 2000, //视角跳转时长为2秒，
        }).then(function () {
          // console.log("跳转完成");
        })
      },


		// 下面这个camera属性似乎不灵但是，
        // mapView.goTo({
        //   camera: {
        //     position: {
        //       x: 113.60389,
        //       y: 22.54591
        //       // z: 0
        //     },
        //   },
        //   zoom: 13,
        //   heading: 48,
        //   tilt: 40
        // }, {
        //   duration: 2000,
        // });

3、扶正视角，但是不回到初始位置

backToOldVisualAngle() {
        var mapView = global.mapView;
        mapView.goTo({
          zoom: 13,
          heading: 48,
          tilt: 40
        }, {
          duration: 2000, //视角跳转时长为2秒，
        }).then(function () {
          // console.log("跳转完成");
        })
      },

4、 target: [113.6, 22.542], 可以换为
center: {
x: 113.6,
y: 22.542,
spatialReference: {wkid: 4490}在这里插入代码片
},
并添加参考系属性

  view.when(function () {
     view.goTo({
         // target: [113.6, 22.542],
         center: {
           x: 113.6,
           y: 22.542,
           spatialReference: {wkid: 4490}
         },
         zoom: 13,
         heading: 80, // 旋转角
         tilt: 30 // 倾斜角
       }, {
         duration: 2000 // 视角跳转时长为2秒，
       })
     })

获取中心点

const local = { // 记录地图的状态
                x: this.$mapView.center.x,
                y: this.$mapView.center.y,
                spatialReference: this.$mapView.spatialReference,
                zoom: this.$mapView.zoom
            }
this.$store.commit('drainFacilityIndex/setMapViewZoom', local)

跳转到指定点

// 返回最初状态
            const { x, y, spatialReference, zoom } = this.$store.state.drainFacilityIndex.mapView
            const  target = new this.$esri.Point(
                { type: 'point',
                    x: x,
                    y: y,
                    spatialReference: spatialReference
                })
            this.$mapView.goTo({
                target: target,
                zoom: zoom
            })

不刷新更新图层内容

 // 获取数据
            await this.getListData()
            // await this.clearLayerData()
            // 构建 graphics
            const graphics = this.listData.map(item => {
                return {
                    geometry: {
                        type: 'point',
                        x: item.x,
                        y: item.y,
                        spatialReference: this.$mapView.spatialReference
                    },
                    attributes: item
                }
            })
            // 第一次要渲染所有的点，第二次后进行更新操作
            const layer = this.layers.riverWaterLevel
            layer.queryObjectIds().then(function(ids) {
                const addFeatures = []
                const updateFeatures = []
                graphics.forEach(item => {
                    if (ids.indexOf(item.attributes.id) !== -1) {
                        updateFeatures.push(item)
                    } else {
                        addFeatures.push(item)
                    }
                })
                layer.applyEdits({
                    addFeatures: addFeatures,
                    updateFeatures: updateFeatures
                })
            })

图层位置变换监听

mapView: {
            handler: function() {
                if (this.mapView) {
                    // 弹窗位置变动监听
                    const handle = this.mapView.watch('extent', this.setPopupPosition)
                    this.$once('hook:beforeDestroy', () => {
                        handle.remove()
                    })
                }
            },
            immediate: true
        }

图层截屏

screenShot() {
            this.$mapView['map'].takeScreenshot({ area: {}, format: 'png' }).then(screenshot => {
                this.downloadImage('广州市水旱灾害综合防御(图层截屏)', screenshot.dataUrl)
            })
        },
        downloadImage(filename, dataUrl) {
            if (!window.navigator.msSaveOrOpenBlob) {
                const element = document.createElement('a')
                element.setAttribute('href', dataUrl)
                element.setAttribute('download', filename)
                element.style.display = 'none'
                document.body.appendChild(element)
                element.click()
                document.body.removeChild(element)
            } else {
                const byteString = atob(dataUrl.split(',')[1])
                const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0]
                const ab = new ArrayBuffer(byteString.length)
                const ia = new Uint8Array(ab)
                for (let i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i)
                }
                const blob = new Blob([ab], { type: mimeString })
                window.navigator.msSaveOrOpenBlob(blob, filename)
            }
        }

全屏展示所有点

this.$mapView['map'].extent = this.comBaseLayer.fullExtent