@sl-utils/cesium 1.0.0 → 1.0.1

package/src/scene/TJG/maps.ts

@@ -0,0 +1,16 @@
+import { ImageryLayer } from "cesium";
+import { CLayers, CONST_CESIUM_MAP, SLCViewer } from "../../core";
+
+export class Maps {
+    constructor(cviewer: SLCViewer) {
+        this.cviewer = cviewer;
+        this.clayers = cviewer.clayers;
+    }
+    cviewer: SLCViewer;
+    private clayers: CLayers;
+
+    /**添加地图影像图层 */
+    public addMap(name: CONST_CESIUM_MAP | `${typeof CONST_CESIUM_MAP[keyof typeof CONST_CESIUM_MAP]}`): ImageryLayer {
+        return this.clayers.addLayer(name);
+    }
+}

package/src/scene/TJG/scene-tjg.ts

@@ -0,0 +1,212 @@
+import { Billboard, BoundingRectangle, Cesium3DTile, Cesium3DTilesTerrainData, Cesium3DTileset, CesiumTerrainProvider, Color, CustomHeightmapTerrainProvider, DefaultProxy, DistanceDisplayCondition, ImageryLayer, JulianDate, NearFarScalar, Rectangle, SingleTileImageryProvider, TerrainProvider, VerticalOrigin, WebMapServiceImageryProvider } from "cesium";
+import { LNGLAT_CONST_HUANANCHEN } from "../../const";
+import { SLCViewer } from "../../core";
+import { CMath, uc_getCartesian3, uc_getLnglat, uc_getUUID } from "../../utils";
+import { CDKMeasure, Fog } from "../cdk";
+import { Areas } from "./area";
+import { ObjectEntities } from "./entityies";
+import { Maps } from "./maps";
+import { Ships } from "./ships";
+import { SLCesiumCDK } from "../../core/cdk";
+import { Tileset } from "./tileset";
+import { Billboards } from "./billboard";
+import { PluginBathymetry } from "../../plugins/bathymetry";
+import { PluginElevation } from "../../plugins/elevation";
+import { PrimitiveImage2D } from "../../primitives";
+import { RESOURCES } from "../../Assets/resource";
+import { PostProcessSnow } from "../../plugins";
+
+export class SceneTJG extends SLCViewer {
+    constructor(html) {
+        super(html)
+        // this.openGUI()
+        this.initload()
+    }
+    /**3D瓦片系统 */
+    private tileset: Tileset = new Tileset(this);
+    /**船舶系统 */
+    private ships: Ships = new Ships(this)
+    /**地图系统 */
+    private maps: Maps = new Maps(this)
+    /**保护区+警戒区 */
+    private areas: Areas = new Areas(this)
+    /**一些实体 */
+    private entity: ObjectEntities = new ObjectEntities(this)
+    /** */
+    private measure: CDKMeasure = new CDKMeasure(this)
+    /**广告牌集合 */
+    private billboards: Billboards = new Billboards(this)
+
+    /** */
+    public openMeasure() {
+        this.measure.cdkOpenMeasure()
+    }
+    /**添加船舶 */
+    public onAddShips(ships: CesiumShipInfo[]) {
+        this.ships.onAddShips(ships)
+    }
+
+    public addBouys(allIcons: BillboardInfo[]) {
+        const { billboards } = this;
+        // const texture = textureLoadRGBE(RESOURCES.ICONS);
+        allIcons.forEach((e, index) => {
+            // const { type } = e;
+            let { positions, positions: [lng, lat, height], type } = e;
+            if (!lat || !lng) return;
+            e.id = e.id || uc_getUUID();
+            if (type === 'ship') {
+                this.cprimitives.addPrimitiveImages([e as any])
+                return
+            } else if (['bridge', 'vhf', 'radar'].includes(type)) {
+                billboards.addBillboard({
+                    //根据距离缩放
+                    id: e.id,
+                    position: uc_getCartesian3(positions),
+                    image:
+                        type === 'bridge' ? RESOURCES.MAP_BRIDGE :
+                            type === 'radar' ? RESOURCES.MAP_RADAR :
+                                type === 'vhf' ? RESOURCES.MAP_VHF : '',
+                    width: 10,
+                    height: 10,
+                    scaleByDistance: new NearFarScalar(2000, 1.0, 35000, 0.3),
+                    verticalOrigin: VerticalOrigin.BOTTOM,
+                    /**一公里内关闭深度检测（不被3DTiles遮挡） */
+                    // disableDepthTestDistance: 1000,
+                }, true);
+            } else {
+                const [x, y] = e.subRegion;
+                billboards.addBillboard({
+                    //根据距离缩放
+                    id: e.id,
+                    position: uc_getCartesian3(positions),
+                    image: RESOURCES.ICONS,
+                    width: 10,
+                    height: 10,
+                    scaleByDistance: new NearFarScalar(2000, 1.0, 35000, 0.3),
+                    verticalOrigin: VerticalOrigin.BOTTOM,
+                    imageSubRegion: new BoundingRectangle(x * 33, 512 - (y * 33 + 32), 32, 32)
+                    /**一公里内关闭深度检测（不被3DTiles遮挡） */
+                    // disableDepthTestDistance: 1000,
+                }, true);
+            }
+        })
+    }
+    /**添加风电场区域 */
+    public onAddWindArea() {
+        /**风机位置 */
+        function a() {
+            // A1:起点坐标  A2:终点坐标  A3:起点平行坐标
+            const r = [], A1 = [117.95657483, 38.85955843, 0], A2 = [117.93330276, 38.82583246, 0], A3 = [117.99261508, 38.84421572, 0], N = 5, R = 5;
+            const d1 = (A1[0] - A2[0]) / N
+            const d2 = (A1[1] - A2[1]) / N
+            for (let i = 0; i <= N; i++) {
+                const lng = A1[0] - d1 * i;
+                const lat = A1[1] - d2 * i;
+                const d3 = (A1[0] - A3[0]) / R
+                const d4 = (A1[1] - A3[1]) / R
+                for (let j = 0; j <= R; j++) {
+                    const lngR = lng - d3 * j;
+                    const latR = lat - d4 * j;
+                    r.push([lngR, latR, 0])
+                }
+            }
+            return r
+        }
+        const positions = a();
+        /**保护区范围 */
+        const warningArea: LnglatHeight[] = [[117.95657483, 38.85955843, 0], [117.93330276, 38.82583246, 0], [117.96934301, 38.81048975, 0], [117.99261508, 38.84421572, 0]]
+        this.areas.onAddWarningArea(warningArea)
+        this.entity.onAddWindModel(positions)
+    }
+    /**初始化加载 */
+    private initload() {
+        this.clock.currentTime = JulianDate.fromIso8601('2025-10-01T05:00:00Z');
+
+        this.addMapAndMask();
+        this.addBillboardBYD();
+        this.openCDK();
+        this.addTilesets();
+        // this.scene.postProcessStages.add(new PostProcessSnow())
+    }
+    /**添加白洋淀指示标 */
+    private addBillboardBYD() {
+        const { billboards } = this;
+        billboards.addBillboard({
+            id: 'BYD_billboard',
+            verticalOrigin: VerticalOrigin.BOTTOM,
+            position: uc_getCartesian3([116.02425313, 38.89839672, 1000]),
+            image: RESOURCES.BYD_BILLBOARDS,
+            width: 164,
+            height: 92,
+            distanceDisplayCondition: new DistanceDisplayCondition(35000, undefined)
+        }, true)
+        billboards.addBillboard({
+            id: 'BYH_billboard',
+            verticalOrigin: VerticalOrigin.BOTTOM,
+            position: uc_getCartesian3([116.93354674, 39.74769688, 1000]),
+            image: RESOURCES.BYH_BILLBOARD,
+            width: 164,
+            height: 92,
+            distanceDisplayCondition: new DistanceDisplayCondition(35000, undefined)
+        }, true)
+        billboards.addBillboard({
+            id: 'CZD_billboard',
+            verticalOrigin: VerticalOrigin.BOTTOM,
+            position: uc_getCartesian3([116.84866703, 38.30386732, 1000]),
+            image: RESOURCES.CZD_BILLBOARD,
+            width: 164,
+            height: 92,
+            distanceDisplayCondition: new DistanceDisplayCondition(35000, undefined)
+        }, true)
+    }
+    /**添加地图和区域遮罩 */
+    private async addMapAndMask() {
+        this.maps.addMap('Tianditu_Satellite');
+        this.maps.addMap('Tianditu_Satellite_Annotion')
+        await this.cdata.loadJson(RESOURCES.GEOJSON_HEBEI)
+        const singleTileLayer = ImageryLayer.fromProviderAsync(
+            SingleTileImageryProvider.fromUrl(RESOURCES.MAP_BG, {
+                rectangle: Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+            }),
+        );
+        singleTileLayer['lightingAtmosphere'] = false
+        this.scene.imageryLayers.add(singleTileLayer);
+    }
+    /**开启cdk插件包 */
+    private openCDK() {
+        const cdk = new SLCesiumCDK(this)
+        cdk.onAddCompass();
+        cdk.onAddMouseLnglatScale();
+    }
+    /** */
+    private addTilesets() {
+        this.tileset.addTilesets();
+        return
+        var provider = new WebMapServiceImageryProvider({
+            url: `http://183.63.55.74:8001/geoserver/wms`,
+            layers: "baiyangdian:standard",
+            credit: "demo",
+            parameters: {
+                service: 'WMS',
+                request: 'GetMap',
+                layers: 'baiyangdian:standard',
+                styles: '',
+                format: 'image/png',
+                transparent: 'true',
+                version: '1.1.1',
+                tiled: 'true',
+                width: '256',
+                height: '256',
+            },
+        })
+        // this.clayers.addImageryProvider(provider)
+    }
+    /** */
+    private openGUI() {
+        const { gui, camera } = this;
+        gui.on(camera, '相机', [
+            { param: 'heading', name: '相机heading', ifNums: [-1.8, 1.8, 0.0001], listen: true, change: (e) => { console.log('相机方向X', e) } },
+            { param: 'pitch', name: '相机pitch', ifNums: [-1.8, 1.8, 0.0001], listen: true, change: (e) => { console.log('相机方向Y', e) } },
+        ])
+    }
+}

package/src/scene/TJG/ships.ts

@@ -0,0 +1,32 @@
+import { Cartesian3, ConstantProperty, Entity, HeadingPitchRoll, Matrix4, Quaternion, Transforms } from "cesium";
+import { SLCViewer } from "../../core";
+import { EntityImage } from "../../entities";
+import { PrimitiveImage2D } from "../../primitives";
+import { SceneTJG } from "./scene-tjg";
+
+/**所有船舶管理 */
+export class Ships {
+    constructor(cviewer: SceneTJG) {
+        this.cviewer = cviewer
+    }
+    private cviewer: SceneTJG;
+    /**添加船舶 */
+    public onAddShips(ships: CesiumShipInfo[]) {
+        const { entities, ccamera, cprimitives, viewer, } = this.cviewer, pships: any[] = [];
+        ships.forEach(ship => {
+            const { lnglat, length = 125, width = 30, id, url } = ship;
+            const entity = entities.add(new EntityImage({
+                id,
+                url: url,
+                lnglat: lnglat,
+                sizeX: width,
+                sizeY: length,
+                camera: ccamera,
+                rotate: Math.random() * 360
+            }))
+            pships.push({ lng: lnglat[0], lat: lnglat[1], size: Math.random() * 5000 + 5000, rotation: Math.random() * 360 })
+        })
+        const primitive = new PrimitiveImage2D('/Assets/images/icon_small_type_EA.png', pships)
+        cprimitives.add(primitive)
+    }
+}

package/src/scene/TJG/tileset.ts

@@ -0,0 +1,144 @@
+import { Cartesian3, Cesium3DTileStyle, Cesium3DTileset, CesiumTerrainProvider, ClippingPolygon, ClippingPolygonCollection, Credit, ImageryLayer, Matrix4, Rectangle, SplitDirection, Terrain, WebMapServiceImageryProvider } from "cesium";
+import { SceneTJG } from "./scene-tjg";
+import { TileCustomShader } from "../../shaders";
+import { uc_getCartesian3 } from "../../utils";
+
+export class Tileset {
+    constructor(scene: SceneTJG) {
+        this.scene = scene;
+    }
+    private scene: SceneTJG;
+    /**当前瓦片序号 */
+    private i: number = 0;
+    /**瓦片集合 */
+    private tilesets: Cesium3DTileset[] = [];
+    /**网片路径名称 */
+    // private names = ['01潘家口水库', '02迁西县潘家口-大黑汀水库通航水域', '03北运河廊坊段', '04涞源湖', '05-1易水湖旺龙湖', '05-2易水湖旺龙湖', '06-1白洋淀', '06-2白洋淀', '06-3白洋淀', '06-4白洋淀', '07-南运河沧州段', '08-1衡水湖', '08-2衡水湖', '08-3衡水湖', '08-4衡水湖', '08-5衡水湖', '09-武安市京娘湖', '10-1磁县东武仕水库', '10-2磁县东武仕水库', '10-3磁县东武仕水库', '11-滏阳河磁县段', '12-滏阳河邯郸段']
+    private names = ['06-1白洋淀', '06-2白洋淀', '06-3白洋淀', '06-4白洋淀', '07-南运河沧州段',]
+    /**加载瓦片和地形文件 */
+    public async addTilesets() {
+        const { scene: { primitives, viewer } } = this
+        const tilesets = this.tilesets = await Promise.all(this.names.map(e => Cesium3DTileset.fromUrl(`http://183.63.55.74:5000/3DTiles/${e}/tileset.json`, {
+            // 降低误差，优先加载高分辨率瓦片
+            maximumScreenSpaceError: 16,
+            show: true,
+            // 优化裁剪，提升性能
+            cullWithChildrenBounds: true,
+        })))
+        tilesets.forEach(tileset => {
+            primitives.add(tileset);
+            //tileset.splitDirection = SplitDirection.LEFT;
+        })
+        viewer.terrainProvider = await CesiumTerrainProvider.fromUrl(`http://183.63.55.74:5000/terrains/ASTGTMV003`, { requestVertexNormals: true })
+        this.addClippingPolygons()
+        this.onAddImageryLayerToTile()
+    }
+    /**添加瓦片切除区域
+     * @example https://sandcastle.cesium.com/?id=aec-clipping
+     */
+    public addClippingPolygons() {
+        return;
+        const positions = [
+            [115.98725, 38.92652738, 0], [115.9875936, 38.9255246, 0], [115.98831278, 38.925426, 0], [115.98896601, 38.92529395, 0], [115.98980299, 38.92517716, 0], [115.99062273, 38.92516725, 0], [115.99126234, 38.92508052, 0], [115.99243472, 38.92516885, 0], [115.99292552, 38.9254267, 0], [115.99353778, 38.92556671, 0], [115.99340207, 38.92608534, 0], [115.99275908, 38.92600661, 0], [115.9921613, 38.92613862, 0], [115.99217202, 38.92631707, 0], [115.99265479, 38.9263993, 0], [115.99306894, 38.92663128, 0], [115.99329111, 38.92680885, 0], [115.99284393, 38.92707261, 0], [115.99224844, 38.92678732, 0], [115.99141597, 38.92652901, 0], [115.99066024, 38.92631385, 0], [115.98982908, 38.92619403, 0], [115.98885187, 38.92620566, 0], [115.98810931, 38.92634913, 0], [115.98753164, 38.92650735, 0], [115.98681596, 38.92653805, 0], [115.98660151, 38.92652897, 0], [115.98677457, 38.92564955, 0]
+        ].map((e: LnglatHeight) => uc_getCartesian3(e));
+        const clippingPolygons = new ClippingPolygonCollection({
+            polygons: [
+                new ClippingPolygon({
+                    positions: positions,
+                }),
+            ],
+        });
+        const tileset = this.getTileset(1);
+        tileset.clippingPolygons = clippingPolygons;
+    }
+    /**在瓦片上叠加图层 */
+    public async onAddImageryLayerToTile() {
+        var provider = new WebMapServiceImageryProvider({
+            url: `http://183.63.55.74:8001/geoserver/wms`,
+            layers: "depare_depth",
+            credit: "demo",
+            rectangle:Rectangle.fromDegrees(115.80, 38.7, 116.2, 39.0),
+            parameters: {
+                service: 'WMS',
+                request: 'GetMap',
+                layers: 'depare_depth',
+                styles: '',
+                format: 'image/png',
+                transparent: 'true',
+                version: '1.1.1',
+                tiled: 'true',
+                width: '256',
+                height: '256',
+            },
+        })
+        const imageryLayers = this.scene.clayers.addImageryProvider(provider);
+        this.tilesets.forEach(tileset => tileset.imageryLayers.add(imageryLayers))
+    }
+
+    private getTileset(id: number | string) {
+        const { tilesets } = this;
+        const i = typeof id === 'number' ? id : this.names.findIndex(e => e == id);
+        if (tilesets.length === 0) {
+            console.warn('没有瓦片数据');
+            return;
+        }
+        if (i < 0 || i >= tilesets.length) {
+            console.warn('瓦片序号越界');
+            return;
+        }
+        return tilesets[i];
+    }
+
+    /**跳转切换到下一序号的瓦片 */
+    public onTo3Dtiles(num: -1 | 1): string {
+        this.i = this.i + num;
+        let i = Math.abs(this.i);
+        this.scene.viewer.zoomTo(this.tilesets[i % this.tilesets.length]);
+        return this.names[i]
+    }
+    /**用于调整位置的空间坐标 */
+    private cartesian3Pos: Cartesian3 = new Cartesian3();
+    /**调整部分瓦片的高度 */
+    private changePos(tileset: Cesium3DTileset, id: string) {
+        const translation = this.cartesian3Pos;
+        Cartesian3.normalize(tileset.boundingSphere.center, translation)
+        tileset.modelMatrix = Matrix4.fromTranslation(Cartesian3.multiplyByScalar(translation, 1, translation))
+    }
+    private setTilesetsStyle(tilesets: Cesium3DTileset) {
+        /**建筑样式条件 */
+        tilesets.style = new Cesium3DTileStyle({
+            color: {
+                conditions: [
+                    ["${Height} !== undefined && ${Height} < 5", "color('#f5fd2d')"],
+                    [
+                        "${Height} !== undefined && ${Height} >= 5 && ${Height} < 10",
+                        "color('#d3a34a')",
+                    ],
+                    [
+                        "${Height} !== undefined && ${Height} >= 10 && ${Height} < 15",
+                        "color('#947e75')",
+                    ],
+                    [
+                        "${Height} !== undefined && ${Height} >= 15 && ${Height} < 20",
+                        "color('#565a9f')",
+                    ],
+                    ["${Height} !== undefined && ${Height} > 20", "color('#223bc3')"],
+                    ["${name} === 'OCEAN'", "color('#436d9d')"],
+                    ["${name} === 'LAKE'", "color('#3987c9')"],
+                    ["${name} === 'CALCAREOUS'", "color('#BBB6B1')"],
+                    ["${name} === 'GRASS'", "color('#567d46')"],
+                    ["${name} === 'FOREST'", "color('green')"],
+                    ["${name} === 'CITY'", "color('lightgray')"],
+                    ["${name} === 'ASPHALTROAD'", "color('#434343')"],
+                    ["${name} === 'ASPHALT'", "color('#463d39')"],
+                    ["${name} === 'CONCRETE'", "color('#b9b4ab')"],
+                    ["${name} === 'DRYGROUND'", "color('#9B7653')"],
+                    ["${name} === 'WETGROUND'", "color('#5a4332')"],
+                    ["${name} === 'SAND'", "color('gold')"],
+                    ["true", "color('white')"],
+                ],
+            },
+        });
+        tilesets.customShader = new TileCustomShader()
+    }
+}

package/src/scene/TJG/tjg.d.ts

@@ -0,0 +1,14 @@
+/**船舶信息 */
+interface CesiumShipInfo {
+    id: string;
+    /**图片地址 */
+    url: string;
+    /**船舶所在经纬度 */
+    lnglat: [number, number, number?];
+    /**船舶长 */
+    length: number;
+    /**船舶宽 */
+    width: number;
+    /**船向 */
+    rotate: number
+}

package/src/scene/cdk/fog.ts

@@ -0,0 +1,47 @@
+import { Cartesian4, Color, PostProcessStage } from "cesium";
+
+const fragmentShaderSource = `
+          float getDistance(sampler2D depthTexture, vec2 texCoords)
+          {
+              float depth = czm_unpackDepth(texture(depthTexture, texCoords));
+              if (depth == 0.0) {
+                  return czm_infinity;
+              }
+              vec4 eyeCoordinate = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth);
+              return -eyeCoordinate.z / eyeCoordinate.w;
+          }
+          float interpolateByDistance(vec4 nearFarScalar, float distance)
+          {
+              float startDistance = nearFarScalar.x;
+              float startValue = nearFarScalar.y;
+              float endDistance = nearFarScalar.z;
+              float endValue = nearFarScalar.w;
+              float t = clamp((distance - startDistance) / (endDistance - startDistance), 0.0, 1.0);
+              return mix(startValue, endValue, t);
+          }
+          vec4 alphaBlend(vec4 sourceColor, vec4 destinationColor)
+          {
+              return sourceColor * vec4(sourceColor.aaa, 1.0) + destinationColor * (1.0 - sourceColor.a);
+          }
+          uniform sampler2D colorTexture;
+          uniform sampler2D depthTexture;
+          uniform vec4 fogByDistance;
+          uniform vec4 fogColor;
+          in vec2 v_textureCoordinates;
+          void main(void)
+          {
+              float distance = getDistance(depthTexture, v_textureCoordinates);
+              vec4 sceneColor = texture(colorTexture, v_textureCoordinates);
+              float blendAmount = interpolateByDistance(fogByDistance, distance);
+              vec4 finalFogColor = vec4(fogColor.rgb, fogColor.a * blendAmount);
+              out_FragColor = alphaBlend(finalFogColor, sceneColor);
+          }
+          `;
+/**雾效 */
+export const Fog = new PostProcessStage({
+    fragmentShader: fragmentShaderSource,
+    uniforms: {
+        fogByDistance: new Cartesian4(300, 0.0, 3000, 1.0),
+        fogColor: Color.WHITE
+    }
+})

package/src/scene/cdk/index.ts

@@ -0,0 +1,4 @@
+export * from './measure';
+export * from './plot';
+export * from './source';
+export * from './fog'

package/src/scene/cdk/measure.ts

@@ -0,0 +1,108 @@
+import { AssociativeArray, CallbackProperty, Cartesian2, Cartesian3, Color, Entity, EntityCollection, ScreenSpaceEventHandler, createGuid, Math as CMath, CustomDataSource, PolylineDashMaterialProperty } from "cesium";
+import { SLCViewer } from "../../core/viewer";
+import { uc_getCartesian3, uc_getDistanceAndUnits } from "../../utils";
+import { COLOR_CONST_LINE } from "../../const";
+import { EntityLabel, EntityPoint, EntityPolyline } from "../../entities";
+/**组件开发工具包--测量 */
+export class CDKMeasure {
+    constructor(viewer: SLCViewer) {
+        this.viewer = viewer
+    }
+    private viewer: SLCViewer;
+    /**测量的所有实体集合 */
+    private measurs: AssociativeArray = new AssociativeArray();
+    /**本次测量的id */
+    private measurId?: string;
+    /**本次测量的所有实体 */
+    private dataSource?: CustomDataSource;
+    /**本次的线条实体 */
+    private line?: EntityPolyline;
+    /**鼠标移动label提示 */
+    private moveLable: EntityLabel = new EntityLabel();
+    /**鼠标移动的点 */
+    private movePoint: EntityPoint = new EntityPoint({ ifChange: true });
+    /**虚线 */
+    private dashLine: EntityPolyline = new EntityPolyline({
+        ifChange: true,
+        material: new PolylineDashMaterialProperty({
+            color: COLOR_CONST_LINE, // 线的颜色
+            dashLength: 16.0, // 每个虚线的长度
+            dashPattern: parseInt('1100110011001100', 2) // 虚线模式，二进制表示
+        })
+    })
+    /**点击后是否移动过 */
+    private flagMove: boolean = false;
+    /**开发组件开启测量 */
+    public cdkOpenMeasure() {
+        console.log(this.viewer.entities.id, this.viewer.dataSources)
+        this.measurId = createGuid();
+        this.dataSource = new CustomDataSource();
+        const { dataSources, centities } = this.viewer, { measurId, dataSource, measurs, movePoint, moveLable, dashLine } = this;
+        measurs.set(measurId, dataSource);
+        dataSources.add(dataSource);
+        this.cdkCloseMeasure();
+        centities.add(movePoint);
+        centities.add(moveLable);
+        centities.add(dashLine);
+        this.addEventListener();
+    }
+    /**开发组件关闭测量*/
+    public cdkCloseMeasure() {
+        const { dataSources, centities, cevent, id } = this.viewer, { movePoint, moveLable, dashLine } = this;
+        this.line = undefined;
+        centities.remove(movePoint);
+        centities.remove(moveLable);
+        centities.remove(dashLine);
+        cevent.off(`.${id}`);
+    }
+    /**添加事件 */
+    private addEventListener() {
+        const { cevent, id } = this.viewer, points = [];
+        cevent.on(`MOUSE_MOVE.${id}`, (e: ScreenSpaceEventHandler.MotionEvent) => {
+            this.onMouseMove(points)
+        });
+        cevent.on(`LEFT_DOWN.${id}`, (e: ScreenSpaceEventHandler.PositionedEvent) => {
+            this.onLeftClick(points);
+        });
+        cevent.on(`LEFT_DOUBLE_CLICK.${id}`, (e: ScreenSpaceEventHandler.PositionedEvent) => {
+            this.onLeftDoubleClick()
+        });
+    }
+    /**鼠标移动 */
+    private onMouseMove(points: Cartesian3[]) {
+        const { position } = this.viewer, { movePoint, moveLable, dashLine } = this, point = points[points.length - 1];
+        this.flagMove = true
+        movePoint.cdkSetPosition(position)
+        /**没有第一个点，不用画虚线 */
+        if (!point) {
+            moveLable.cdkSetLabelText('起点');
+            moveLable.cdkSetLabelPosition(position);
+            return
+        } else {
+            let { distance, units } = uc_getDistanceAndUnits(position, point);
+            moveLable.cdkSetLabelText(`${distance}${units}`);
+            moveLable.cdkSetLabelPosition(position);
+            dashLine.cdkSetPositions([point, position])
+        };
+    }
+    /**鼠标点击 */
+    private onLeftClick(points: Cartesian3[]) {
+        const { centities, position } = this.viewer, { flagMove, line, moveLable, dataSource: { entities } } = this;
+        if (!flagMove) return;
+        this.flagMove = false;
+        points.push(position.clone())
+        /**点 */
+        entities.add(new EntityPoint({ position: position }))
+        /**本次测量的线 */
+        if (!line) this.line = entities.add(new EntityPolyline({ positions: points, ifChange: true })) as EntityPolyline
+        /**提示语 */
+        entities.add(moveLable);
+        centities.remove(moveLable);
+        this.moveLable = new EntityLabel()
+        centities.add(this.moveLable)
+    }
+    /**鼠标双击 */
+    private onLeftDoubleClick() {
+        this.cdkCloseMeasure();
+    }
+}