Cesium测量

作者: zhuyx0304 | 来源:发表于2024-04-10 09:44 被阅读0次

cesium-长度测量和面积测量
cesium-长度测量和面积测量
Cesium（八）加载倾斜摄影测量数据
cesium-print 动态打印插件
Cesium模型处理方法
cesium简单封装
cesium流动材质应用特效
Cesium入门4 - 创建Cesium Viewer
Cesium入门5 - Cesium ion
Cesium入门6 - Adding Imagery - 添加图

class MeasureAngle {
  _state = new Map();
  _layers = null;
  _handler = null;
  constructor(viewer) {
    this._viewer = viewer;
  }
  getNormal(startPoint, _temp) {
    const { _viewer }  = this;
    let zero = new Cesium.Cartographic(0.0, 1.5708, 0.0);
    zero = _viewer.scene.globe.ellipsoid.cartographicToCartesian(zero);
    let pot = Cesium.Cartesian3.subtract(zero, startPoint, new Cesium.Cartesian3());
    var dir = Cesium.Cartesian3.normalize(pot, new Cesium.Cartesian3());
    var ray = new Cesium.Ray(startPoint, dir);
    
    let distance = Math.abs(startPoint.y - _temp.y);
    let np = Cesium.Ray.getPoint(ray, distance);
    return [startPoint, np];
  }
  draw() {
    const { _viewer } = this;
    const _handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
    const _layers = this._setLayers();
    const _polylineEntity = this._polylineEntity();
    const _positions = this._setPositions(_polylineEntity);
    const _labelEntity = this._labelEntity();
    _layers.entities.add(_polylineEntity);
    _layers.entities.add(_labelEntity);
    let _currentPoint = null;
    let _dottedLine = null;
    _handler.setInputAction((e) => {
      const position = _viewer.camera.pickEllipsoid(e.position);
      let _temp = _viewer.camera.pickEllipsoid(new Cesium.Cartesian2(e.position.x, e.position.y - 100));
      if(!position || !_temp) return;
      if(_positions.length === 0) _positions.push(position.clone());            
      _positions.push(position);
      const _ps = this.getNormal(position, _temp);
      _dottedLine = this._dottedLine(_ps);
      _layers.entities.add(_dottedLine);
      _currentPoint = this._addPoint(position);      
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    _handler.setInputAction((e) => {
      const position = _viewer.camera.pickEllipsoid(e.endPosition);
      if(position && _positions.length > 0) _positions.splice(_positions.length - 1, 1, position);
      if(_positions.length === 0) {
        _labelEntity.label.text = "点击左键绘制第一个点。";
      }else if(_positions.length > 0) {
        _labelEntity.label.text = "点击左键绘制下一个点，点击右键结束。";
      }
      if(position) {
        _labelEntity.show = true;
        _labelEntity.position = position;
      }else {
        _labelEntity.show = false;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    _handler.setInputAction((e) => {
      if(_positions.length === 1 && _currentPoint && _dottedLine) {
        _layers.entities.remove(_currentPoint)
        _layers.entities.remove(_dottedLine)
      };          
      _layers.entities.remove(_labelEntity);
      this._handler.destroy();
      this._handler = null;
      _currentPoint = null;
      _dottedLine = null;
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    this._handler = _handler;
    this._layers = _layers;
  }
  clear() {
    const { _viewer } = this;
    if(this._handler) {
      this._handler.destroy();
      this._handler = null;
    }
    if(this._layers) {
      _viewer.dataSources.remove(this._layers);
      _viewer.entities.remove(this._layers)
      this._layers = null;
    }
    this._state.clear();
  }
  _dottedLine(positions) {
    return new Cesium.Entity({
      polyline: {
        positions,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.YELLOW,
          dashLength: 12.0,
        }),
        width: 2
      }
    })
  }
  _addPoint(position, distance) {
    const { _viewer } = this;
    const point = this._pointEntity(position, distance);
    this._layers.entities.add(point);
    return point;
  }
  _setPositions(_polylineEntity) {
    const { _state } = this;
    _state.set(_polylineEntity.id, []);
    const positions = _state.get(_polylineEntity.id);
    _polylineEntity.polyline.positions = new Cesium.CallbackProperty(() => {
      return positions;
    }, false)
    return positions;
  }
  _setLayers() {
    const { _viewer } = this;
    let _layers = null;
    if(!this._layers) {
      _layers = new Cesium.CustomDataSource("distanceLayers");
      _viewer.dataSources.add(_layers);
    }else {
      _layers = this._layers;
    }          
    return _layers;
  }
  _polylineEntity() {
    return new Cesium.Entity({
      name: "折线",
      polyline: {
        material: Cesium.Color.YELLOW,
        width: 2
      }
    })
  }
  _pointEntity(position, text) {
    return new Cesium.Entity({
      name: "点",
      position,
      label: {
        text,
        showBackground: true,
        font: '10px sans-serif', 
        pixelOffset: new Cesium.Cartesian2(0, -50)
      },
      point: {
        pixelSize: 8,
        color: Cesium.Color.YELLOW,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK
      }
    })
  }
  _labelEntity(position, text) {
    return new Cesium.Entity({
      name: "点",
      position,
      label: {
        text,
        showBackground: true,
        font: '10px sans-serif',
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      },
    })
  }
}

function cartesian3ToWgs84(cartesian3) {
  const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3);
  const longitude = Cesium.Math.toDegrees(cartographic.longitude);
  const latitude = Cesium.Math.toDegrees(cartographic.latitude);
  const height = cartographic.height;
  return { longitude, latitude, height };
}

function courseAngle(lng_a, lat_a, lng_b, lat_b) {
          
  //以a点为原点建立局部坐标系（东方向为y轴,北方向为x轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵
  // const localToWorld_Matrix = Cesium.Transforms.northEastDownToFixedFrame(
  //     new Cesium.Cartesian3.fromDegrees(lng_a, lat_a)
  // );
  
  //以a点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵
  const localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(
      new Cesium.Cartesian3.fromDegrees(lng_a, lat_a)
  );
  //求世界坐标到局部坐标的变换矩阵
  const worldToLocal_Matrix = Cesium.Matrix4.inverse(
      localToWorld_Matrix,
      new Cesium.Matrix4()
  );
  //a点在局部坐标的位置，其实就是局部坐标原点
  const localPosition_A = Cesium.Matrix4.multiplyByPoint(
      worldToLocal_Matrix,
      new Cesium.Cartesian3.fromDegrees(lng_a, lat_a),
      new Cesium.Cartesian3()
  );
  //B点在以A点为原点的局部的坐标位置
  const localPosition_B = Cesium.Matrix4.multiplyByPoint(
      worldToLocal_Matrix,
      new Cesium.Cartesian3.fromDegrees(lng_b, lat_b),
      new Cesium.Cartesian3()
  );
  
  //弧度
  // const angle = Math.atan2(
  //     localPosition_B.y - localPosition_A.y,
  //     localPosition_B.x - localPosition_A.x
  // );
  //弧度
  const angle = Math.atan2(
      localPosition_B.x - localPosition_A.x,
      localPosition_B.y - localPosition_A.y
  );
  //角度
  let theta = angle * (180 / Math.PI);
  if (theta < 0) {
      theta = theta + 360;
  }
  return theta;
}

class MeasureArea {
  _state = new Map();
  _layers = null;
  _handler = null;
  constructor(viewer) {
    this._viewer = viewer;
  }
  draw() {
    const { _viewer } = this;
    const _handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
    const _layers = this._setLayers();
    const _polygonHierarchy = new Cesium.PolygonHierarchy();
    const _polygonEntity = this._polygonEntity(_polygonHierarchy);
    const _positions = this._setPositions(_polygonEntity);
    const _labelEntity = this._labelEntity();
    const _areaLabelEntity = this._labelEntity();
    _layers.entities.add(_polygonEntity);
    _layers.entities.add(_labelEntity);
    _layers.entities.add(_areaLabelEntity);

    let _points = [];
    _handler.setInputAction((e) => {
      const position = _viewer.camera.pickEllipsoid(e.position);
      if(!position) return;
      if(_positions.length === 0) {
        _positions.push(position.clone());
        _polygonHierarchy.positions.push(position.clone());
      }            
      _positions.push(position);
      _polygonHierarchy.positions.push(position);
      _points.push(this._addPoint(position, 0 + " m"));
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    _handler.setInputAction((e) => {
      const position = _viewer.camera.pickEllipsoid(e.endPosition);
      if(position && _positions.length > 0) {
        _positions.splice(_positions.length - 1, 1, position);     
        _polygonHierarchy.positions.splice(_positions.length - 1, 1, position);         
      }
      if(_positions.length === 0) {
        _labelEntity.label.text = "点击左键绘制第一个点。";
      }
      if(_positions.length > 0) {
        _labelEntity.label.text = "点击左键绘制下一个点，点击右键结束。";
      }
      if(_positions.length > 2) {
        _areaLabelEntity.label.text = 0 + " ㎡";
        _areaLabelEntity.position = this._getPolygonCenter(_polygonEntity.polygon);
      }
      if(position) {
        _labelEntity.show = true;
        _labelEntity.position = position;
      }else {
        _labelEntity.show = false;
      }

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    _handler.setInputAction((e) => {
      _layers.entities.remove(_labelEntity);
      if(_points.length < 3) {
        _points.forEach(point => {
          _layers.entities.remove(point);
        });
        _polygonEntity.polyline.positions = [];
        _polygonHierarchy.positions = [];
      }else {
        _positions.pop();
        _polygonHierarchy.positions.pop();
        _positions.push(_positions[0]);
        _polygonHierarchy.positions.push(_positions[0]);
        _areaLabelEntity.position = this._getPolygonCenter(_polygonEntity.polygon);
      }                        
      
      this._handler.destroy();
      this._handler = null;
      _points = [];
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    this._handler = _handler;
    this._layers = _layers;
  }
  clear() {
    const { _viewer } = this;
    if(this._handler) {
      this._handler.destroy();
      this._handler = null;
    }
    if(this._layers) {
      _viewer.dataSources.remove(this._layers);
      _viewer.entities.remove(this._layers)
      this._layers = null;
    }
    this._state.clear();
  }
  _addPoint(position, distance) {
    const { _viewer } = this;
    const point = this._pointEntity(position, distance);
    this._layers.entities.add(point);
    return point;
  }
  _setPositions(_polygonEntity) {
    const { _state } = this;
    _state.set(_polygonEntity.id, []);
    const positions = _state.get(_polygonEntity.id);
    _polygonEntity.polyline.positions = new Cesium.CallbackProperty(() => {
      return positions;
    }, false);
    return positions;
  }
  _setLayers() {
    const { _viewer } = this;
    let _layers = null;
    if(!this._layers) {
      _layers = new Cesium.CustomDataSource("distanceLayers");
      _viewer.dataSources.add(_layers);
    }else {
      _layers = this._layers;
    }          
    return _layers;
  }
  _polygonEntity(polygonHierarchy) {
    return new Cesium.Entity({
      name: "折线",
      polyline: {
        material: Cesium.Color.YELLOW,
        width: 2
      },
      polygon: {
        hierarchy: new Cesium.CallbackProperty(() => {
          return polygonHierarchy;
        }, false),
        material: Cesium.Color.GREENYELLOW.withAlpha(0.5),
      }
    })
  }
  _pointEntity(position, text) {
    return new Cesium.Entity({
      name: "点",
      position,
      label: {
        text,
        showBackground: true,
        font: '10px sans-serif', 
        pixelOffset: new Cesium.Cartesian2(0, -50)
      },
      point: {
        pixelSize: 8,
        color: Cesium.Color.YELLOW,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK
      }
    })
  }
  _labelEntity(position, text) {
    return new Cesium.Entity({
      name: "点",
      position,
      label: {
        text,
        showBackground: true,
        font: '10px sans-serif',
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      },
    })
  }
  _getPolygonCenter(polygon) {
    const positions = polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
    return Cesium.BoundingSphere.fromPoints(positions).center;
  }
}

class MeasureDistance {
  _state = new Map();
  _layers = null;
  _handler = null;
  constructor(viewer) {
    this._viewer = viewer;
  }
  draw() {
    const { _viewer } = this;
    const _handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
    const _layers = this._setLayers();
    const _polylineEntity = this._polylineEntity();
    const _positions = this._setPositions(_polylineEntity);
    const _labelEntity = this._labelEntity();
    _layers.entities.add(_polylineEntity);
    _layers.entities.add(_labelEntity);
    let _currentPoint = null;
    _handler.setInputAction((e) => {
      const position = _viewer.camera.pickEllipsoid(e.position);
      if(!position) return;
      if(_positions.length === 0) _positions.push(position.clone());            
      _positions.push(position);
      _currentPoint = this._addPoint(position, 0 + " m");
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    _handler.setInputAction((e) => {
      const position = _viewer.camera.pickEllipsoid(e.endPosition);
      if(position && _positions.length > 0) _positions.splice(_positions.length - 1, 1, position);
      if(_positions.length === 0) {
        _labelEntity.label.text = "点击左键绘制第一个点。";
      }else if(_positions.length > 0) {
        _labelEntity.label.text = "点击左键绘制下一个点，点击右键结束。";
      }
      if(position) {
        _labelEntity.show = true;
        _labelEntity.position = position;
      }else {
        _labelEntity.show = false;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    _handler.setInputAction((e) => {
      if(_positions.length > 0) _positions.pop();   
      if(_positions.length === 1 && _currentPoint) _viewer.entities.remove(_currentPoint);         
      _layers.entities.remove(_labelEntity);
      this._handler.destroy();
      this._handler = null;
      _currentPoint = null;
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    this._handler = _handler;
    this._layers = _layers;
  }
  clear() {
    const { _viewer } = this;
    if(this._handler) {
      this._handler.destroy();
      this._handler = null;
    }
    if(this._layers) {
      _viewer.dataSources.remove(this._layers);
      _viewer.entities.remove(this._layers)
      this._layers = null;
    }
    this._state.clear();
  }
  _addPoint(position, distance) {
    const { _viewer } = this;
    const point = this._pointEntity(position, distance);
    this._layers.entities.add(point);
    return point;
  }
  _setPositions(_polylineEntity) {
    const { _state } = this;
    _state.set(_polylineEntity.id, []);
    const positions = _state.get(_polylineEntity.id);
    _polylineEntity.polyline.positions = new Cesium.CallbackProperty(() => {
      return positions;
    }, false)
    return positions;
  }
  _setLayers() {
    const { _viewer } = this;
    let _layers = null;
    if(!this._layers) {
      _layers = new Cesium.CustomDataSource("distanceLayers");
      _viewer.dataSources.add(_layers);
    }else {
      _layers = this._layers;
    }          
    return _layers;
  }
  _polylineEntity() {
    return new Cesium.Entity({
      name: "折线",
      polyline: {
        material: Cesium.Color.YELLOW,
        width: 2
      }
    })
  }
  _pointEntity(position, text) {
    return new Cesium.Entity({
      name: "点",
      position,
      label: {
        text,
        showBackground: true,
        font: '10px sans-serif', 
        pixelOffset: new Cesium.Cartesian2(0, -50)
      },
      point: {
        pixelSize: 8,
        color: Cesium.Color.YELLOW,
        outlineWidth: 2,
        outlineColor: Cesium.Color.BLACK
      }
    })
  }
  _labelEntity(position, text) {
    return new Cesium.Entity({
      name: "点",
      position,
      label: {
        text,
        showBackground: true,
        font: '10px sans-serif',
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      },
    })
  }
}

var distance = new MeasureDistance(viewer);
      var area = new MeasureArea(viewer);
      var angle = new MeasureAngle(viewer);

cesium-长度测量和面积测量
网上找的大神的实现方法有点问题，实现有一些bug，作为cesium新手一个，弃之不忍，只好硬着头皮修改了，不过还好...
cesium-长度测量和面积测量
1、新建一个MeasureTool.js文件，代码如下： 2、在CesiumViewer.vue中引用Measur...
Cesium（八）加载倾斜摄影测量数据
一、数据准备在网上下载的倾斜摄影测量数据。数据下载地址提取码：4llo 倾斜摄影测量数据.osgb格式，不能直...
cesium-print 动态打印插件
Cesium 动态打印插件cesium-print is a plugin for cesium printing...
Cesium模型处理方法
目前有倾斜摄影测量数据和美工制作的3dsMax模型数据，需要对这两种数据进行处理，以便于在cesium上进行展示，...
cesium简单封装
使用cesium简单封装基础功能方便调用简化代码新建cesium.js 引入cesium cesium地图初始化...
cesium流动材质应用特效
采用vue+cesium实现引入js部分 importCesiumfrom"cesium/Cesium"; ex...
Cesium入门4 - 创建Cesium Viewer
Cesium入门4 - 创建Cesium Viewer Cesium中文网：http://cesiumcn.org...
Cesium入门5 - Cesium ion
Cesium入门5 - Cesium ion Cesium中文网：http://cesiumcn.org/ | 国...
Cesium入门6 - Adding Imagery - 添加图
Cesium入门6 - Adding Imagery - 添加图层 Cesium中文网：http://cesium...