Vue3+Cesium开发教程（21）---Cesium与turf.js结合，以椭圆形的绘制与编辑为例

GisCoder
87 阅读2分钟

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，详情参见原文链接Cesium+Vue3学习教程系列（21）---Cesium与turf.js结合，以椭圆形的绘制与编辑为例

在前几篇文章里，多边形顶点的坐标全靠比较底层的代码计算算出来。实际上，业界已有不少开箱即用的开源 GIS 引擎，能帮我们省去大量解析与推导的工夫——本文选用的 Turf.js 正是其中的佼佼者。借助它可以很轻松实现我们想要的功能，而且整体代码显得既简洁又可靠。

Turf.js 是开源地理空间客户端引擎，用 JavaScript 编写并提供大量符合 OGC 简单要素规范的 GIS 分析函数：量算、投影、缓冲区、叠加、网格、插值、聚合、分类、路径规划等一应俱全，支持 GeoJSON 作为核心数据格式，无需依赖后端即可在前端实时完成空间查询与几何处理，为 Web 地图应用提供轻量、高性能的客户端空间分析能力。

1、安装Turf.js。在vscode的终端中输入

npm i @turf/turf

2、安装完成后，在程序中需要turf库导入即可。

import * as turf from '@turf/turf';

3、以椭圆的标绘与编辑为例，使用turf库。接下来就是老套路了。

（1）新建CommonEllipse库继承BasePolygon。本文使用两点生成椭圆，即通过两个点确定的矩形，计算其内切椭圆的坐标信息。第一个点是矩形的左上角点，第二个点是矩形的右下角点。


import EventDispatcher from "@/system/EventDispatcher/EventDispatcher";
import { Viewer } from "cesium";
import { GeometryType } from "../BaseDraw";
import { CreateEllipsePoints } from "./CreatePolygonPoints";
import BasePolygon from "./BasePolygon";
export default class CommonEllipse extends BasePolygon {
    constructor(viewer: Viewer, dispatcher: EventDispatcher) {
        super(viewer, dispatcher);
        this.geometryType = GeometryType.COMMON_ELLIPSE;
        this.minPointCount = 2;
    }
    protected get maxPointCount() { return 2; }
    protected createPolygonPoints = CreateEllipsePoints;
}

（2）利用turf实现生成椭圆图形点坐标。turf.distance计算两点的距离，turf.ellipse直接生成椭圆的图形点，然后再将生成的图形点转为笛卡尔坐标就行了，是不是很简单？！

export const CreateEllipsePoints = (pos: Cartesian3[]) => {
    const lnglatPoints = CoordinatesUtil.cartesianArrayToWGS84Array(pos);
  
    const pnt1 = lnglatPoints[0];
    const pnt2 = lnglatPoints[1];
    const center = CoordinatesUtil.MidPoint(pnt1, pnt2);
    let leftPoint = [pnt1[0],center[1]];
    let topPoint = [center[0],pnt2[1]];
    let options =  {units: 'kilometers' as Units};
    
    let xSemi = turf.distance(leftPoint, center,options)
    let ySemi = turf.distance(topPoint, center, options)
    let geometry = turf.ellipse(center, xSemi, ySemi, options)    
    return TurfUtil.TurfGeometry2Cartesians(geometry);
}

（3）最后再将椭圆添加到EditHelper类里，这样我们就结合Turf.js实现了椭圆的绘制与编辑。


            case GeometryType.COMMON_ELLIPSE:
                 this.shapeEntity.polygon!.hierarchy = new CallbackProperty(() => new PolygonHierarchy(CreateEllipsePoints(this.positions)), false);
                break;

4、最终效果

5、更多详细代码参见原文链接[Cesium+Vue3学习教程系列（21）---Cesium与turf.js结合，以椭圆形的绘制与编辑为例]

avatar
文章
阅读
粉丝