企业建设网站维护,做荣誉证书的网站,wordpress子目录,淮南做网站Vue.js2Cesium1.103.0 七、Primitive 绘制航线元素
用 Primitive 绘制航线元素#xff0c;包括航点图标#xff0c;航线线段#xff0c;线段距离标注#xff0c;航点序号#xff0c;海拔标注#xff0c;总航程等信息。
可同时绘制多条航线#xff1b;可根据 id 清除指…Vue.js2Cesium1.103.0 七、Primitive 绘制航线元素
用 Primitive 绘制航线元素包括航点图标航线线段线段距离标注航点序号海拔标注总航程等信息。
可同时绘制多条航线可根据 id 清除指定的某条航线设置航点图标设置航线颜色绘制时可同时将视角跳转到航线所在位置处。 Demo
templatediv stylewidth: 100%; height: 100%;div idcesium-container stylewidth: 100%; height: 100%; /div classuldiv v-for(item, index) of list :keyindex classli:class{ active: checkedList.findIndex(_ _.id item.id) -1 } clickhandleClick(item, index){{ item.name }}/div/div/div
/template
script
/* eslint-disable no-undef */
import {AddRouteGraphic,ClearRouteGraphic
} from /utils/CesiumUtils/DrawRoute
export default {data() {return {colors: [#D0021B, #F8E71C, #7ED321, #4A90E2, #BD10E0],active: ,checkedList: [],list: []}},computed: {},watch: {},mounted() {window.$InitMap()this.list require(./routes.json)viewer.camera.flyTo({destination: Cesium.Rectangle.fromDegrees(117.70714705967534, 39.074587204563336, 117.72382214389826, 39.08476744905917)})},methods: {handleClick(item, index) {if (this.checkedList.findIndex(_ _.id item.id) -1) {this.checkedList.push(item)} else {const spliceIndex this.checkedList.findIndex(_ _.id item.id)this.checkedList.splice(spliceIndex, 1)}for (let index 0; index this.list.length; index) {const element this.list[index]ClearRouteGraphic(Route element.id)}for (let index 0; index this.checkedList.length; index) {const element this.checkedList[index]AddRouteGraphic({id: Route element.id, // 航线所有元素 ID 前缀用于多处绘制/清除航线list: element.list, // 航点数据wayPointImage: require(/assets/images/waypoint.png), // 航点图标indexReverse: false, // 序号翻转// color: #ff0000,color: this.colors[index], // 航线航点颜色lineVisible: true, // 航线pointVisible: true, // 航点altitudeVisible: true, // 海拔distanceVisible: true, // 线段距离planeTimeVisible: true, // 预计飞行时间fly: true // 是否定位到航线处})}}}
}
/script
style langscss scoped
.ul {position: fixed;right: 50px;top: 100px;.li {padding: 10px 0;cursor: pointer;color: #fff;.active {color: red;}}
}
/style
