更改车辆撒点样式

zhaoxing

2022-10-19 eac3f6477fc835e8759dc6a0140aac11ce25e819

更改车辆撒点样式

 js/changable_params.js

@@ -53,7 +53,7 @@
}
var tiandituArr = ['51915011aa0997aa2ddd7e38504fa8bc', '51915011aa0997aa2ddd7e38504fa8bc']
// http://112.74.77.127:8090/  http://223.167.111.168:7002/
var default_system_params = { geoserver_url_predix: 'http://223.167.111.168:7001/', nodejs_url_predix: 'http://223.167.111.168:7002/', userid: 2, queryDataType: 'hour', weathercitycode: '101020100', wind360: 0, windSpeed: 10, is_single_taxi_replaying: false,summary_topN_count :50, un_authorization_url: 'http://223.167.111.168:8016/PollutionData/loginpage.aspx?returnurl=http://223.167.111.168:8004/shanghai/index.html',regionCode:2};
var default_system_params = { geoserver_url_predix: 'http://223.167.111.168:7001/', nodejs_url_predix: 'http://223.167.111.168:7002/', userid: 2, queryDataType: 'hour', weathercitycode: '101020100', wind360: 0, windSpeed: 10, is_single_taxi_replaying: false,summary_topN_count :50, un_authorization_url: 'http://223.167.111.168:8016/PollutionData/loginpage.aspx?returnurl=http://223.167.111.168:8004/shanghai/index.html',regionCode:0};
var default_grid_camerview = {grid5000:{"lat":30.367931,"lng":121.518409,"alt":128482,"heading":2,"pitch":-57},grid3000:{"lat":30.902475,"lng":121.487751,"alt":38716,"heading":2,"pitch":-57},grid1000:{"lat":31.066346,"lng":121.462529,"alt":10026,"heading":2,"pitch":-57},grid500:{"lat":31.112561,"lng":121.458433,"alt":2483,"heading":2,"pitch":-57}};

function bindPopupFunction(event) {

 js/index.js

@@ -103,26 +103,6 @@
  //创建三维地球场景
  map = new mars3d.Map("mars3dContainer", mapOptions);

  //上海边界遮罩
  geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    url: "data/shanghai.json",
    mask: true, //标识为遮罩层【重点参数】
    symbol: {
      styleOptions: {
        fill: true,
        color: "rgb(2,26,79)",
        outline: true,
        outlineColor: "#39E09B",
        outlineWidth: 8,
        outlineOpacity: 0.8,
        arcType: Cesium.ArcType.GEODESIC,
        clampToGround: true,
      },
    },
    zIndex: 99999999999,
  });
  map.addLayer(geoJsonLayer);

  //构造widget
  initWidget(map);


 widgetsTS/taxiRouteReplay/widget.js

@@ -11,11 +11,11 @@
        },
      };
    }

 
    reloadData(new_taxi_sn) {
      this.viewWindow.resetStartQueryTaxiDataText(new_taxi_sn);
      this.taxi_sn = new_taxi_sn;

 
      if (this.startGraphic) {
        this.startGraphic.remove();
        this.startGraphic = null;
@@ -26,14 +26,14 @@
      }
      this.routeLayer.clear();
    }

 
    clearReplayLayers() {
      this.pointLayer.clear();
      this.routeLayer.clear();
    }

 
    addTaxiReplayGraphic(points) {

 
      this.startGraphic = new mars3d.graphic.BillboardEntity({
        position: points[0],
        style: {
@@ -45,7 +45,7 @@
        },
      });
      this.pointLayer.addGraphic(this.startGraphic);

 
      this.endGraphic = new mars3d.graphic.BillboardEntity({
        position: points[points.length - 1],
        style: {
@@ -58,56 +58,84 @@
      });
      this.pointLayer.addGraphic(this.endGraphic);

      var Pointsdata = mars3d.global_variables.singleTaxiReplayData
        for (var i = 0, len = Pointsdata.length; i < len; i++) {
          var item = Pointsdata[i];
          var lng = Number(item["lon"]); //经度
          var lat = Number(item["lat"]); //纬度
          var position = null;
          if (lng && lat) {
            position = Cesium.Cartesian3.fromDegrees(lng, lat);
          }
          item = changeNullAndundefinedToEmpty(item)


      let Pointsdata = mars3d.global_variables.singleTaxiReplayData
      for (var i = 0, len = Pointsdata.length; i < len-1; i++) {
        var item = Pointsdata[i];
        var item2 = Pointsdata[i+1];
        var lng = Number(item["lon"]); //经度
        var lat = Number(item["lat"]); //纬度
        var lng2 = Number(item2["lon"]); //经度
        var lat2 = Number(item2["lat"]); //纬度
        var position = null;
        var position2 = null;
        if (lng && lat&&lng2&&lat2) {
          position = Cesium.Cartesian3.fromDegrees(lng, lat);
          position2 = Cesium.Cartesian3.fromDegrees(lng2, lat2);
        }
        item = changeNullAndundefinedToEmpty(item)
      let graphic = new mars3d.graphic.PolylineEntity({
        positions: points,
        positions: [position,position2],
        style: {
          width: 10,
          material: new mars3d.material.LineFlowMaterialProperty({
            color:this.viewWindow.getLayerPointColorByQindexandValue(1004,this.qindex, item[this.qindex]),
            image: "./img/textures/arrow2.png",
            repeat: new Cesium.Cartesian2(30, 1),
            speed: 30, //速度，建议取值范围1-100
            repeat: new Cesium.Cartesian2(1, 1),
            speed: 40, //速度，建议取值范围1-100
          })
        },
      });
      this.routeLayer.addGraphic(graphic);
      }
      // console.log(items,"items")
      // let graphic = new mars3d.graphic.PolylineEntity({
      //   positions: points,
      //   style: {
      //     width: 10,
      //     material: new mars3d.material.LineFlowMaterialProperty({
      //       color: Cesium.Color.AQUA,
      //       image: "./img/textures/arrow2.png",
      //       repeat: new Cesium.Cartesian2(50, 1),
      //       speed: 40, //速度，建议取值范围1-100
      //     })
      //   },
      // });
      // this.routeLayer.addGraphic(graphic);
      this.routeLayer.flyTo();
    }}

    }
 
    addTaxiPointInfoGraphic() {
        var Pointsdata = mars3d.global_variables.singleTaxiReplayData;
        var points = [];
        for (var i = 0, len = Pointsdata.length; i < len; i++) {
        var Pointsdata = mars3d.global_variables.singleTaxiReplayData
        for (var i = 0, len = Pointsdata.length; i < len-1; i++) {
          var item = Pointsdata[i];
          var item2 = Pointsdata[i+1];
          var lng = Number(item["lon"]); //经度
          var lat = Number(item["lat"]); //纬度
          // var position = null;
          // if (lng && lat) {
          //   //position = Cesium.Cartesian3.fromDegrees(lng, lat);
          // }
          points[Pointsdata.length] = [lng, lat];

          var lng2 = Number(item2["lon"]); //经度
          var lat2 = Number(item2["lat"]); //纬度
          var position = null;
          var position2 = null;
          if (lng && lat&&lng2&&lat2) {
            position = Cesium.Cartesian3.fromDegrees(lng, lat);
            position2 = Cesium.Cartesian3.fromDegrees(lng2, lat2);
          }
          item = changeNullAndundefinedToEmpty(item)
          var CorridorPrimitive = new mars3d.graphic.CorridorPrimitive({
            position: points,
          var CircleEntity = new mars3d.graphic.CorridorEntity({
            positions: [position,position2],
            style: {
              with: 50,
              height: 0,
              diffHeight: this.qindex == "co" ? 1000 * item[this.qindex] : item[this.qindex] || item[qindex] == "/" ? 3000 : item[qindex], //高度
              // length: 60.0,
              width: 10.0,
              height: 0,
              cornerType: Cesium.CornerType.BEVELED,
              // radius: 8.0,
              diffHeight: this.qindex == "co" ? 300 * item[this.qindex] :  item[this.qindex]  || item[this.qindex] == "/" ? 500 : item[this.qindex], //高度
              color:this.viewWindow.getLayerPointColorByQindexandValue(1004,this.qindex, item[this.qindex]),
              opacity: 0.5,
              opacity: 0.6,
              // rotationDegree: 45,
              highlight: {
                opacity: 1
               opacity: 1
              }
            },
            item: item,
@@ -126,41 +154,41 @@
            "<tr><td>CO：</td><td align= right>" + item["co"] + '&nbsp' + "</td><td>mg/m³</td></tr>" +
            "</table>" 
          });
          this.routeLayer.addGraphic(CorridorPrimitive);
          this.routeLayer.addGraphic(CircleEntity);
        }
        this.routeLayer.flyTo();
    }

 
    setSingleTaxiReplayData(datas) {
      mars3d.global_variables.singleTaxiReplayData = datas;
    }

 
    refreshDetailTable(tmpattr) {
      this.viewWindow.refreshDetailTable(tmpattr);
    }

 
    //初始化[仅执行1次]
    create() {

 
      this.gaodeRoute = new mars3d.query.GaodeRoute({
        // key: ['ae29a37307840c7ae4a785ac905927e0'],
      });
      this.gaodePOI = new mars3d.query.GaodePOI({
        // key: ['ae29a37307840c7ae4a785ac905927e0'],
      });

 
      //图层管理使用的分组
      this.groupLayer = new mars3d.layer.GroupLayer({
        name: this.config.name,
        pid: 50, //图层管理 中使用，父节点id
      });

 
      //创建矢量数据图层
      this.pointLayer = new mars3d.layer.GraphicLayer({
        name: this.config.name + "-起止点",
      });
      this.groupLayer.addLayer(this.pointLayer); //加入分组

 
      this.routeLayer = new mars3d.layer.GraphicLayer({
        name: this.config.name + "-路线",
      });
@@ -174,7 +202,7 @@
      this.nodejs_url_predix = mars3d.global_variables.nodejs_url_predix;
      this.taxi_sn = this.config.params;
      this.viewWindow.resetStartQueryTaxiDataText(this.taxi_sn);

 
    }
    //打开激活
    activate() {
@@ -195,7 +223,7 @@
      this.map.clock.stopTime = this.old_map_clock_stopTime;
      this.map.clock.multiplier = this.old_map_clock_multiplier;
      mars3d.global_variables.is_single_taxi_replaying = false;

 
      if (this.startGraphic) {
        this.startGraphic.remove();
        this.startGraphic = null;
@@ -205,7 +233,7 @@
        this.endGraphic = null;
      }
      this.map.removeLayer(this.groupLayer);

 
    }
    
    //漫游自动结束 或点击 停止导航按钮 后，重置界面和操作
@@ -213,12 +241,12 @@
      // 暂停回放
      this.map.clock.shouldAnimate = false;
    }

 
    ContinueReplay() {
      // 继续回放
      this.map.clock.shouldAnimate = true;
    }

 
    //取消当前的视角跟随
    removeTrack() {
      if (this.nowFline) {
@@ -234,7 +262,7 @@
      this.map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourStart));
      this.map.clock.stopTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourEnd));
      this.map.clock.multiplier = 2.0;

 
    }
    //============开始视角跟随=============
    startGS() {
@@ -246,9 +274,9 @@
    }
   
  }

 
  //注册到widget管理器中。
  mars3d.widget.bindClass(MyWidget);

 
  //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
})(window, mars3d);
})(window, mars3d);