軌跡巡查分為俯瞰和跟隨兩種模式

<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-modaltitle="選擇軌跡":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 = truethis.doTrack(this.pos)},changeViewModel() {this.fullScale = !this.fullScale},onClick() {window.trackInspection = thisthis.widgetShow = truethis.view = window.viewthis.pos = 0if (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 SceneViewrotation: 360 - this.getHeading(this.location, this.prevLocation) // only applies to MapView})} else {let centerX = 0let centerY = 0this.trackData.forEach(ele => {centerX += parseFloat(ele.longitude) / this.trackData.lengthcenterY += 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.locationif (pos === this.trackData.length - 1) {pos = 0this.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 northreturn -90 + angleInDegrees},handleCancel() {this.visible = falsewindow.measureClear()},chooseTrack(item) {trackinspectionlist({ dict: item.dm }).then(res => {this.trackData = res.datathis.onTrack = truethis.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>

效果圖：

總結

以上是生活随笔為你收集整理的arcgis for JavaScript 使用view.goTo 实现轨迹巡查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。