diff --git a/src/utils/map/coordinate.ts b/src/utils/map/coordinate.ts new file mode 100644 index 0000000..eba3975 --- /dev/null +++ b/src/utils/map/coordinate.ts @@ -0,0 +1,37 @@ +/* + * @Author: cbwu 504-wuchengbo@htsdfp.com + * @Date: 2024-03-22 09:11:54 + * @LastEditors: cbwu + * @LastEditTime: 2024-03-26 13:33:42 + * @Description: 坐标系转化 + */ +import { Cartesian2, Viewer, Math, Cartographic } from 'cesium' +/** + * 屏幕坐标转笛卡尔坐标 + * @param viewer + * @param windowPosition :屏幕二维坐标 + * @returns :笛卡尔坐标 + */ +function cartesian2ToCartesian3(viewer: Viewer, windowPosition: Cartesian2) { + const ray = viewer.camera.getPickRay(windowPosition) + if (ray != undefined) { + return viewer.scene.globe.pick(ray, viewer.scene) + } else return undefined +} +/** + * 屏幕坐标转地理坐标 + * @param viewer + * @param windowPosition :屏幕坐标 + * @returns :WGS84坐标 + */ +function cartesian2ToWGS84(viewer: Viewer, windowPosition: Cartesian2) { + const cartesian3 = cartesian2ToCartesian3(viewer, windowPosition) + if (cartesian3 != undefined) { + const cartographic = Cartographic.fromCartesian(cartesian3) + const lon = Math.toDegrees(cartographic.longitude) // 经度 + const lat = Math.toDegrees(cartographic.latitude) // 纬度 + const alt = cartographic.height // 高度 + return [lon, lat, alt] + } else return [] +} +export { cartesian2ToCartesian3, cartesian2ToWGS84 } diff --git a/src/utils/map/geocomputation.ts b/src/utils/map/geocomputation.ts new file mode 100644 index 0000000..d336bb7 --- /dev/null +++ b/src/utils/map/geocomputation.ts @@ -0,0 +1,7 @@ +/* + * @Author: cbwu 504-wuchengbo@htsdfp.com + * @Date: 2024-03-22 15:42:49 + * @LastEditors: cbwu + * @LastEditTime: 2024-03-22 15:43:23 + * @Description: 地理计算 + */ diff --git a/src/utils/map/geometry.ts b/src/utils/map/geometry.ts new file mode 100644 index 0000000..5199560 --- /dev/null +++ b/src/utils/map/geometry.ts @@ -0,0 +1,134 @@ +/* + * @Author: cbwu 504-wuchengbo@htsdfp.com + * @Date: 2024-03-20 08:55:59 + * @LastEditors: cbwu + * @LastEditTime: 2024-03-26 09:00:46 + * @Description:几何类型类 + */ +import { + Entity, + Cartesian3, + Color, + PrimitiveCollection, + PointPrimitiveCollection, + PolylineGeometry, + PointGraphics, + Property, + PolylineGraphics, + PolygonGraphics, +} from 'cesium' +type EntityOptions = { + id?: string + name?: string + show?: boolean + pixelSize?: number + color?: Color + fillColor?: Color + fill?: boolean + width?: number + outlineWidth?: number +} +// 点 +class PointEntity extends Entity { + static id: number = 0 + options: EntityOptions = { + id: 'Point' + String(PointEntity.id), + name: 'Point' + String(PointEntity.id + 1), + show: true, + pixelSize: 10, + color: Color.GREEN, + outlineWidth: 0, + } + constructor(position: Cartesian3, options?: EntityOptions) { + super({ + // id: options?.id || String(PointEntity.id), + position: position, + }) + this.options = { ...this.options, ...options } + this.name = this.options.name + this.point = new PointGraphics({ ...this.options }) + PointEntity.id++ + } +} +// 线 +class PolylineEntity extends Entity { + static id: number = 0 + options: EntityOptions = { + id: 'Polyline' + String(PolylineEntity.id), + name: 'Polyline' + String(PolylineEntity.id + 1), + show: true, + width: 2, + color: Color.GREEN, + } + constructor(ptArr: Cartesian3[] | Property, options?: EntityOptions) { + super({ + // id: options?.id || String(PolylineEntity.id), + }) + this.options = { ...this.options, ...options } + this.name = this.options.name + this.polyline = new PolylineGraphics({ + positions: ptArr, + show: this.options.show, + width: this.options.width, + material: this.options.color, + }) + PolylineEntity.id++ + } +} +// 多边形 +class PolygonEntity extends Entity { + static id: number = 0 + options: EntityOptions = { + id: 'Polygon' + String(PolygonEntity.id), + name: 'Polygon' + String(PolygonEntity.id + 1), + show: true, + width: 2, + color: Color.RED, + fillColor: Color.RED.withAlpha(0.5), + fill: true, + } + constructor(ptArr: Cartesian3[] | Property, options?: EntityOptions) { + super({ + // id: options?.id || String(PolygonEntity.id), + }) + this.options = { ...this.options, ...options } + this.name = this.options.name + this.polygon = new PolygonGraphics({ + show: this.options.show, + hierarchy: ptArr, + material: this.options.fillColor, //填充颜色 + fill: this.options.fill, //是否填充 + outlineWidth: this.options.width, //线宽 + outlineColor: this.options.color, //线颜色 + }) + PolygonEntity.id++ + } +} +// 线 +class Polyline extends PrimitiveCollection { + constructor(ptArr: Cartesian3[]) { + super() + this.add(this.createPoints(ptArr)) + this.add(this.createPolyline(ptArr)) + // this.id + } + private createPoints(posArr: Cartesian3[]) { + const points = new PointPrimitiveCollection() + for (const pos in posArr) { + points.add({ + position: pos, + color: Color.RED, + pixelSize: 10, + }) + } + return points + } + private createPolyline(posArr: Cartesian3[]) { + return new PolylineGeometry({ + positions: posArr, + width: 2, + colors: new Array(posArr.length).fill(Color.fromCssColorString('green')), + }) + } +} +export { PointEntity, Polyline, PolylineEntity, PolygonEntity }