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-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 实现轨迹巡查相关推荐

ArcGis for javascript 绘制线！！！
效果图在线预览前言项目中需要使用 ArcGis 来实现地图功能,至于为什么不适用百度.高德,是因为据说 ArcGis 定位会准一点.初次接触 Arcgis for javascript,踩坑之路 ...
ArcGIS For JavaScript API 默认参数
"esri.config"的是在1.3版中的的"esriConfig"的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对 ...
利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
1.引言由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...
Arcgis for javascript不同的状态下自定义鼠标样式
俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...
Arcgis for javascript不同的状态下自己定义鼠标样式
俗话说:爱美之心.人皆有之. 是的.没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点. 在本文,给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式. 首先.说 ...
arcgis for javascript API3.13 加载天地图卫星影像
采用arcgis for javascript API 3.13, 用其中的esri.layers.TiledMapServiceLayer,这个类可以完成对切片地图的加载,ArcOnline本身自 ...
关于ArcGis for javascript整合百度地图天地图高德地图进行搜索
1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api 1  2 <script type=" ...
Arcgis server Javascript API 官网相当于HelloWorld的完整版
虽然放暑假了,不过最近依然很忙,一边忙着准备电子设计大赛,一边跟随研究生师兄们要做Arcgis相关内容,看了一本ArcGIS Server JavaScript API的书,结果发现是针对Arcgis ...
Angular(4)中加载Arcgis for JavaScript地图
背景近期我司项目的需要,采用Angular(4)+SpringBoot前后端分离的架构.并且在需要在项目中实现Arcgis地图. 本人之前有过Arcgis for JavaScript的小小填坑经验 ...

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

arcgis for JavaScript 使用view.goTo 实现轨迹巡查相关推荐

最新文章

热门文章