javascript html5 vue.js json css3 Cesium 对多边形entity进行任意编辑

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

想要做一个对多边形任意编辑的功能，但是网上大部分都是编辑一条边线的中点，所以就自己改良了一下。

一、最终效果

多边形编辑

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、主要代码

1.引入库

//这是已经画出entity或者已经存在entity之后对多边形进行编辑

import * as turf from '@turf/turf'

import * as Cesium from "cesium";

class polygonEntityEdit {

setEntityEdit(viewer, entity) {

this.viewer = viewer;

this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);

this.entity = entity;

// 用于保存实体的对象

this.gon = undefined;

// 判断是否处于编辑状态

this.isEditting = false;

// 设置当前的编辑点

this.currentPoint = undefined;

// 清空编辑点ID数组

this.pointsId = [];

this.registerEvents()

}

initprarm(){

this.unRegisterEvents()

this.viewer = undefined;

this.handler = undefined

this.entity = undefined;

// 用于保存实体的对象

this.gon = undefined;

// 判断是否处于编辑状态

this.isEditting = false;

// 设置当前的编辑点

this.currentPoint = undefined;

// 清空编辑点ID数组

this.pointsId = [];

}

//删除点数据

clearEdit(){

for (let id of this.pointsId) {

this.viewer.entities.remove(this.viewer.entities.getById(id));

}

this.initprarm()

}

//注册监听事件

registerEvents() {

//场景鼠标左键按下事件

this.initLeftDownEventHandler()

//场景鼠标左键抬起事件

this.initLeftUpEventHandler()

//场景鼠标中键按下事件

this.initMiddleDownEventHandler()

//场景鼠标移动事件

this.initMouseMoveEventHandler()

}

//取消事件监听

unRegisterEvents() {

this.handler.removeInputAction

精彩文章