安装
pnpm i cesium-plot@latest
静态资源
在index.html中全局引入Cesium
<link rel="stylesheet" href="./cesium/Widgets/widgets.css">
<script src="./cesium/Cesium.js"></script>
创建标绘对象
import {Plot} from "cesium-plot"
const viewer = new Cesium.Viewer("cesiumContainer")
const plot = new Plot({viewer})
常用API
| 方法名称 |
参数 |
说明 |
| changeMode |
(String,Boolean)=>void |
第一个参数是模式，不填写默认Select，第二个参数用来控制是否连续绘制，默认为true，连续绘制模式 |
| export |
()=>GeoJson[] |
导出标绘的数据，符合Geojson格式的数据 |
| load |
(geojson)=>void |
导入一组符合Geojson格式的数据，回显图元 |
| removeAll |
()=>void |
清除所有图元 |
| updateEntityStyle |
（style）=>void |
更新选中的图元样式 |
模式
| 模式 |
说明 |
| Point |
点 |
| Polyline |
线 |
| Polygon |
面 |
| Label |
文字 |
| LabelClamp |
贴地文字 |
| PolygonArrow |
箭头 |
| Pencil |
画笔 |
| Select |
选中模式，即普通模式，可以选中绘制的图元，对选中的图元进行拖拽等操作 |
回调监听
const plot = new Plot({viewer})
//创建结束 监听
plot.on('created', (plotObj: { geojson: { [key: string]: any } }) => {
isEdit.value = true
const { geojson } = plotObj
const { properties, featureConstructorName, id } = geojson
const { style } = properties
currentPlot.value = id
propsType.value.type = featureConstructorName
propsType.value.propsConfig = style
})