基于Cesium实现轨迹线（OD线）

最新推荐文章于 2024-05-10 15:41:24 发布

空心爱code

最新推荐文章于 2024-05-10 15:41:24 发布

阅读量3.9k

点赞数 1

分类专栏： Cesium 文章标签： 3d javascript

本文链接：https://blog.csdn.net/weixin_45694629/article/details/122208547

版权

Cesium 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基于Cesium实现轨迹线（OD线）

使用Cesium原生的方法绘制轨迹线和点，也可以使用第三方库绘制材质线，也就是material

话不多说直接上代码,首先是轨迹线的创建和销毁事件

	//生成轨迹线，参数为中心点坐标
    facilitiesQuery(msg) {
        this.eentitiesDestroy();
        let center = [];
        center.push(msg.x);
        center.push(msg.y);
        this.addPolylines(center);
    },
    //移除轨迹线的事件
    eentitiesDestroy() {
      viewer.entities.removeAll();
      this.facilitiesDatas = [];
    },

然后是线的绘制

    //添加线
	addPolylines(center) {
      // 生成随机周边设施
      let circlePoints = this.generateCirclePoints(center, 1000); //圆周边坐标
      //获取中心点
      let startP = Cesium.Cartesian3.fromDegrees(center[0], center[1], 0);
      // 添加中心点图标
      this.addCenterBillboard(startP)
      let endP;
      let positions;

      circlePoints .forEach((item) => {
        endP = Cesium.Cartesian3.fromDegrees(item[0], item[1], 0);
        positions = this.generateCurve(startP, endP);
        //使用entity对象生成轨迹线
        viewer.entities.add({
          polyline: {
            positions: positions,
            width: 4,
            material: Cesium.Color.YELLOW
          },
        });
        //也可以在终点添加标记点（可以使用label标签或者billborder广告牌）
        viewer.entities.add({
        //广告牌
        // billboard: {
        //   image: require("../../assets/img/landmanage/symbol1.png"),
        //   scaleByDistance: new Cesium.NearFarScalar(1200, 1, 5200, 0.1), //设置随图缩放距离和比例
        //   distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //     0,
        //     60000
        //   ), //设置可见距离
        // },
        //标签
          label: {
          text: ‘点’
          font: "700 40px Microsoft YaHei", // 15pt monospace
          scale: 0.6,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          fillColor: Cesium.Color.WHITE,
          showBackground: true,
          backgroundColor: color,
          disableDepthTestDistance: 500,
          scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 10000, 0),
          pixelOffset: new Cesium.Cartesian2(0, -20),
          pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
            0,
            1.5,
            10000,
            0
          ),
        },
        });
      });
    },

生成随级坐标的事件

  //获取一个圆的随机边缘坐标
    generateCirclePoints(center, radius) {
      let points = [];
      for (let i = 0; i < 360; i += 20) {
        points.push(
          this.getCirclePoint(center[0], center[1], i, radius * Math.random())
        );
      }
      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 = 6356725 + ((6378137 - 6356725) * (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];
    },

添加中心点图标的事件

  //中心点图标
    addCenterBillboard(startP) {
      window.earth.entities.add({
        position: startP,
         billboard: {
           image: require("../../assets/img/landmanage/symbol2.png"),
           scaleByDistance: new Cesium.NearFarScalar(1200, 1, 5200, 0.1), //设置随图缩放距离和比例
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
             0,
             60000
           ), //设置可见距离
          }
        },
      });
    },