ArcGIS for JavaScript的vue2巡线轨迹播放
时间: 2023-07-18 08:35:49 浏览: 50
对于ArcGIS for JavaScript的vue2巡线轨迹播放,可以参考以下步骤:
1. 在Vue项目中安装ArcGIS for JavaScript模块:
```
npm install @arcgis/core
```
2. 在Vue组件中加载map、view、GraphicsLayer等相关组件:
```javascript
import { loadModules } from 'esri-loader';
export default {
data() {
return {
map: null,
view: null,
graphicsLayer: null
};
},
mounted() {
loadModules(
['esri/Map', 'esri/views/MapView', 'esri/layers/GraphicsLayer'],
{ css: true }
).then(([Map, MapView, GraphicsLayer]) => {
this.map = new Map({
basemap: 'streets'
});
this.view = new MapView({
container: this.$refs.mapView,
map: this.map,
center: [-118.805, 34.027],
zoom: 13
});
this.graphicsLayer = new GraphicsLayer();
this.map.add(this.graphicsLayer);
});
},
methods: {
// 在GraphicsLayer中添加轨迹线
addPolyline() {
const polyline = {
type: 'polyline',
paths: [...]
};
const lineSymbol = {
type: 'simple-line',
color: [226, 119, 40],
width: 4
};
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
});
this.graphicsLayer.add(polylineGraphic);
},
// 播放轨迹
play() {
const polyline = this.graphicsLayer.graphics.getItemAt(0).geometry;
const totalLength = geometryEngine.geodesicLength(polyline, 'meters');
let distance = 0;
let step = 50; // 每次移动的距离
let timer = setInterval(() => {
if (distance >= totalLength) {
clearInterval(timer);
return;
}
const point = geometryEngine.geodesicMove(
polyline,
step,
'meters'
).coords;
this.view.goTo(point);
distance += step;
}, 50);
}
}
};
```
上述代码中,我们首先加载了ArcGIS for JavaScript模块,然后在组件的mounted生命周期钩子中初始化了地图、视图和GraphicsLayer,并在其中添加了轨迹线。接下来,我们定义了两个方法:addPolyline用于添加轨迹线,play用于播放轨迹。在play方法中,我们首先获取轨迹线的总长度,然后每隔50毫秒移动一定距离,直到移动到轨迹线的终点为止。
总体来说,这是一个简单的ArcGIS for JavaScript的vue2巡线轨迹播放示例,你可以根据自己的需求进行修改和扩展。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)