cesium - Githubissues

sailei1 commented 1 year ago

vue.config.js //加载3D 模型文件

chainWebpack(config) { config.module .rule('czml') .test(/.(czml|kml)(\?.)?$/) //加载模型文件 .use('file-loader') .loader('file-loader') .end() // .use('gltf-webpack-loader') // .loader('gltf-webpack-loader') // .end() config.module .rule('cesium') .test(/.(glb|gltf)(\?.)?$/) //加载模型文件 .use('url-loader') .loader('url-loader') .end() },

sailei1 commented 1 year ago

//世界坐标转换为经纬度
 var cartesian3 = new Cesium.cartesian3(x,y,z);
 var p = Cesium.Ellipsoid.WGS84.cartesianToCartographic(drawPlot.positions[i]);
              var lat = Cesium.Math.toDegrees(p.latitude).toFixed(3);
              var lng = Cesium.Math.toDegrees(p.longitude).toFixed(3);
              coordinate.push({latitude: lat, longitude: lng});

sailei1 commented 1 year ago

const config={
      id: type + '_' + item.id,
      position: Cesium.Cartesian3.fromDegrees(item.lon, item.lat),
      point: new Cesium.PointGraphics({
        show: true,
        pixelSize:  5*(item.seismicLevel||1)/2,
        heightReference: Cesium.HeightReference.NONE,
        color:Cesium.Color.YELLOW.withAlpha(.5) ,
        outlineColor: new Cesium.Color(0, 0, 0, 0),
        outlineWidth:  0,
        scaleByDistance:   new Cesium.NearFarScalar(0, 1, 5e10, 1),
        translucencyByDistance:  new Cesium.NearFarScalar(0, 1, 5e10, 1),
        distanceDisplayCondition:  new Cesium.DistanceDisplayCondition(0, 4.8e10),
      }),
      label: new Cesium.LabelGraphics({
        text: `${item.location}`,
        font: '24px sans-serif',
        fillColor: Cesium.Color.YELLOW,
        horizontalOrigin: 1,
        outlineColor: new Cesium.Color(0, 0, 0, 1),
        outlineWidth: 2,
        pixelOffset: new Cesium.Cartesian2(17, -5),
        style: Cesium.LabelStyle.FILL,
        scaleByDistance:  new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0), //缩放
      })

    };
    viewer.entities.add(config)

sailei1 commented 1 year ago

if(isNow){
      let x = 1,flog = true;
      en.billboard.show= new Cesium.CallbackProperty( ()=> {  //闪烁
        if (flog) {
          x = x - 0.05;
          if (x <= 0) {
            flog = false;
          }
        } else {
          x = x + 0.05;
          if (x >= 1) {
            flog = true;
          }
        }
        return x >= 0.5;
      },false)
      setTimeout(()=>{
        let entity = viewer.entities.getById(id)
        if (entity) {
          entity.billboard.show=true;
        }
      },1000*10)
    }

sailei1 commented 1 year ago

// 解决模糊问题
if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){ 
        viewer.resolutionScale = window.devicePixelRatio;
      }
      viewer.scene.fxaa = true;
      viewer.scene.postProcessStages.fxaa.enabled = true;

sailei1 commented 1 year ago

2 3D 切换定位偏移

 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90); //默认中国区域
      Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.1;

 changeViewMode(){
      if(this.cesiumViewMode=='3D') {
        viewer.scene.morphTo2D(0) // 动画过程 干扰了定位 
        this.cesiumViewMode='2D'
        this.leftPanelWidth=0;

      }else{
        viewer.scene.morphTo3D(0)
        this.cesiumViewMode='3D'
        this.leftPanelWidth=0;
      }
}

sailei1 commented 1 year ago

  const id= datasource + '_' + obj.id;
      const entity= viewer.entities.getById(id);
      // let cartographic = Cesium.Cartographic.fromCartesian(entity.position._value);  //entity  获取经纬度
      // let lon = Cesium.Math.toDegrees(cartographic.longitude);
      // let lat = Cesium.Math.toDegrees(cartographic.latitude);

      const p= Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, entity.position._value); //Cartesian3 转换屏幕坐标
      const pick = viewer.scene.pick(p)
      const movement={
        position:p
      }
      let content=this.renderContext(datasource,obj);
      if(content) {
        CustomModal(viewer, movement, pick, content)
      }

sailei1 commented 1 year ago

//检测包含关系
import booleanContains  from '@turf/boolean-contains'
import turf from 'turf'

let line = turf.lineString(area[n].baseInfo.points);
           let bbox = turf.bbox(line);
           let bboxPolygon = turf.bboxPolygon(bbox);
           booleanContains(bboxPolygon, point); //true 包含

sailei1 commented 1 year ago

// cesium 绘制扇形 `` import Polygon from "../Polygon" export default class Sector extends Polygon {

constructor(viewer, baseInfo, properties) {
    super(viewer, baseInfo, properties);
    this.baseInfo.plotName = PlotTypes.SECTOR;
}

initConsts() {
    this.fixPointCount = 3;
}

generate() {

    if (this.getPointCount() < 2) {
      return;
    }

      // console.log(`getPointCount : ${this.getPointCount()}`)

    if (this.getPointCount() == 2) {
      // debugger
      this.generatePositions(this.baseInfo.points);

    } else {
        // debugger
        var pnts = this.getPoints();
        var center = pnts[0];
        var pnt2 = pnts[1];
        var pnt3 = pnts[2];
        var radius = PlotUtils.distance(pnt2, center);
        var startAngle = PlotUtils.getAzimuth(pnt2, center);
        var endAngle = PlotUtils.getAzimuth(pnt3, center);
        //优化绘制大扇形时像椭圆的问题
        var d_1 = startAngle * 180 / 3.14;
        var d_2 = endAngle * 180 / 3.14;
        var r1 = this.distance(pnt2, center);
        var pList1 = this.generatSectorPoints(center, r1, d_1, d_2);
        // var pList1 = PlotUtils.getArcPoints(center, radius, startAngle, endAngle);
        // pList.push(center, pList[0]);

      var positions = [];
        pList1.push(center, pList1[0]);
         for(let i=0;i<pList1.length;i++){
           positions.push(`${pList1[i][0]}  ${pList1[i][1]}`)
           // viewer.entities.add({
           //   position: Cesium.Cartesian3.fromDegrees(pList1[i][0], pList1[i][1]),
           //   point: new Cesium.PointGraphics({
           //     show: true,
           //     pixelSize:  5,
           //     heightReference: Cesium.HeightReference.NONE,
           //     color:Cesium.Color.GREEN ,
           //     outlineColor: new Cesium.Color(0, 0, 0, 0),
           //     outlineWidth:  0,
           //     scaleByDistance:   new Cesium.NearFarScalar(0, 1, 5e10, 1),
           //     translucencyByDistance:  new Cesium.NearFarScalar(0, 1, 5e10, 1),
           //     distanceDisplayCondition:  new Cesium.DistanceDisplayCondition(0, 4.8e10),
           //   }),
           // })
         }

      var wktString = 'POLYGON((' + positions.join(', ') + ', ' + positions[0] + '))';
      console.log("WKT 格式: " + wktString);
      positions.push(positions[0])
      this.properties.pointList=positions

        this.generatePositions(pList1);
    }
}

//计算两个点的距离
distance(lngLat1, lngLat2) {
    var radLat1 = lngLat1[1] * Math.PI / 180.0;
    var radLat2 = lngLat2[1] * Math.PI / 180.0;
    var a = radLat1 - radLat2;
    var b = lngLat1[0] * Math.PI / 180.0 - lngLat2[0] * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137;
    s = Math.round(s * 10000) / 10;
    return s
}

//获取一个圆的边缘坐标
generatSectorPoints(center, radius, startAngle, endAngle) {
    startAngle = 90 - startAngle;
    endAngle = 90 - endAngle;
    let points = [];
    if (startAngle < endAngle) {
        for (let i = startAngle; i < endAngle; i += 2) {
            points.push(this.getCirclePoint(center[0], center[1], i, radius))
        }
    } else {
        for (let i = startAngle; i > endAngle; i -= 2) {
            points.push(this.getCirclePoint(center[0], center[1], i, radius))
        }
    }
    return points;
}

getCirclePoint(lon, lat, angle, radius) {
    let dx = radius * Math.sin(angle * Math.PI / 180.0);
    let dy = radius * Math.cos(angle * Math.PI / 180.0);
    let ec = Constants.PRADIUS + (Constants.ERADIUS - Constants.PRADIUS) * (90.0 - lat) / 90.0;
    let ed = ec * Math.cos(lat * Math.PI / 180);
    let newLon = (dx / ed + lon * Math.PI / 180.0) * 180.0 / Math.PI;
    let newLat = (dy / ec + lat * Math.PI / 180.0) * 180.0 / Math.PI;
    return [newLon, newLat];
}

} ``

sailei1 / blog

cesium #120