arcgis for JavaScript 使用view.goTo 实现轨迹巡查

轨迹巡查分为俯瞰和跟随两种模式

<template>
  <div>
    <div @click="onClick">{{ info.name }}</div>
    <div id="track-content" v-show="widgetShow">
      <a-button-group>
        <a-button icon="caret-right" @click="startTrack" v-if="!onTrack"/>
        <a-button icon="pause" @click="stopTrack" v-else/>
        <a-button @click="changeViewModel">{{ fullScale?'跟随':'俯瞰' }}</a-button>
      </a-button-group>
    </div>
    <a-modal
      title="选择轨迹"
      :visible="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
      <a-list>
        <a-list-item v-for="item in trackList" :key="item.id" @click="chooseTrack(item)">
          <a>{{ item.mc }}</a>
        </a-list-item>
      </a-list>
    </a-modal>
  </div>
</template>

<script>
import Point from '@arcgis/core/geometry/Point'
import Graphic from '@arcgis/core/Graphic'
import Polyline from '@arcgis/core/geometry/Polyline'
import { trackinspectionlist, transferdictlist } from '@/api/manage'

export default {
  props: {
    info: {
      type: Object,
      default() {
        return { name: '轨迹巡查', url: '' }
      }
    }
  },
  name: 'TrackInspection',
  data() {
    return {
      prevLocation: 0,
      location: 0,
      onTrack: false,
      view: 0,
      fullScale: false,
      visible: false,
      pos: 0,
      trackList: [],
      trackData: [],
      widgetShow: false
    }
  },
  mounted() {
    transferdictlist({ parent: 'GJXC', enable: true }).then(res => {
      this.trackList = res.data
    })
  },
  methods: {
    stopTrack() {
      this.onTrack = false
    },
    startTrack() {
      this.onTrack = true
      this.doTrack(this.pos)
    },
    changeViewModel() {
      this.fullScale = !this.fullScale
    },
    onClick() {
      window.trackInspection = this
      this.widgetShow = true
      this.view = window.view
      this.pos = 0
      if (this.trackList.length === 0) {
        this.$message.warn('请先维护轨迹数据')
      } else if (this.trackList.length === 1) {
        this.chooseTrack(this.trackList[0])
      } else {
        this.visible = !this.visible
      }
    },
    doTrack(pos) {
      if (this.onTrack) {
        this.location = new Point({
          x: parseFloat(this.trackData[pos].longitude),
          y: parseFloat(this.trackData[pos].latitude),
          z: parseFloat(this.trackData[pos].height),
          spatialReference: {
            wkid: window.arcgisData.coordinatesystem
          }
        })
        const textSymbol = {
          type: 'text',
          color: 'white',
          haloColor: 'black',
          haloSize: '1px',
          text: this.trackData[pos].remark,
          xoffset: 60,
          yoffset: 3,
          font: {
            size: 12,
            family: 'Josefin Slab',
            weight: 'bold'
          }
        }
        var graphic = new Graphic({
          geometry: this.location,
          symbol: this.view.getDrawSymbol('point')
        })
        if (pos > 0) {
          // this.view.graphics.removeAt(this.view.graphics.length - 1)
          // this.view.graphics.removeAt(this.view.graphics.length - 2)
          this.view.graphics.remove(graphic)
        }
        this.polylineJson = {
          'paths': this.trackData.slice((pos === 0 ? 0 : pos - 1), pos + 1).map(ele => {
            return [parseFloat(ele.longitude), parseFloat(ele.latitude), parseFloat(ele.height)]
          }),
          'spatialReference': { 'wkid': window.arcgisData.coordinatesystem }
        }
        var polyline = new Polyline(this.polylineJson)
        var symbol = {
          type: 'simple-line',
          color: '#10d5ef',
          width: 8
        }
        var graphic3 = new Graphic({
          geometry: this.location,
          symbol: textSymbol
        })
        const graphic1 = new Graphic(polyline, symbol)
        window.view.graphics.add(graphic1)
        this.view.graphics.add(graphic)
        this.view.graphics.add(graphic3) // 展示时间
        if (!this.fullScale) {
          this.view.goTo({
            center: this.location,
            tilt: 50,
            scale: window.view.scale,
            heading: 360 - this.getHeading(this.location, this.prevLocation), // only applies to SceneView
            rotation: 360 - this.getHeading(this.location, this.prevLocation) // only applies to MapView
          })
        } else {
          let centerX = 0
          let centerY = 0
          this.trackData.forEach(ele => {
            centerX += parseFloat(ele.longitude) / this.trackData.length
            centerY += parseFloat(ele.latitude) / this.trackData.length
          })
          const center = new Point({
            x: centerX,
            y: centerY,
            spatialReference: {
              wkid: window.arcgisData.coordinatesystem
            }
          })
          this.view.goTo({
            center: center,
            tilt: 0,
            scale: window.view.scale,
            heading: 360,
            rotation: 360
          })
        }
        this.prevLocation = this.location
        if (pos === this.trackData.length - 1) {
          pos = 0
          this.view.graphics.removeAll()
        }
        setTimeout(() => {
          this.doTrack(++pos)
        }, 1000)
      } else {
        this.pos = pos
      }
    },
    getHeading(location, prevLocation) {
      const angleInDegrees = (Math.atan2(location.y - prevLocation.y, location.x - prevLocation.x) * 180) / Math.PI
      // move heading north
      return -90 + angleInDegrees
    },
    handleCancel() {
      this.visible = false
      window.measureClear()
    },
    chooseTrack(item) {
      trackinspectionlist({ dict: item.dm }).then(res => {
        this.trackData = res.data
        this.onTrack = true
        this.prevLocation = new Point({
          x: parseFloat(this.trackData[this.trackData.length - 1].longitude),
          y: parseFloat(this.trackData[this.trackData.length - 1].latitude),
          spatialReference: {
            wkid: window.arcgisData.coordinatesystem
          }
        })
        this.view.goTo({
          center: this.prevLocation,
          tilt: 50,
          scale: 5000
        }).then(() => {
          this.doTrack(0)
        })
        this.visible = false
      })
    }
  }
}
</script>

<style>
#track-content {
  position: fixed;
  left: 15px;
  bottom: 90px;
}
</style>

效果图：