Lin_Ye_Fang_Huo/public/widgets/queryRoute/widget.js

(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //弹窗配置
    get view() {
      return {
        type: "window",
        url: "view.html",
        windowOptions: {
          width: 350,
        },
      };
    }

    //gaodePOI 通过输入名称选点
    queryPOI(text, type) {
      if (!text || !type) {
        return;
      }

      this.gaodePOI.queryText({
        text: text,
        city: "合肥市",
        success: (res) => {
          this.viewWindow.setHtmlInMCXD(res, type); //展示搜索结果
        },
        error: (msg, error) => {
          window.toastr.error(msg);
          haoutil.loading.close();
        },
      });
    }

    //初始化[仅执行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: 99, //图层管理 中使用，父节点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 + "-路线",
      });
      this.groupLayer.addLayer(this.routeLayer); //加入分组

      //设置路线随机色
      this.randomColor = ["#eaf731", "#57f72e", "#2effd2", "#cc6e26", "#ff2ec7"];
    }
    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      this.viewWindow = result;
    }
    //打开激活
    activate() {
      this.map.addLayer(this.groupLayer);
    }
    //关闭释放
    disable() {
      if (this.startGraphic) {
        this.startGraphic.remove();
        this.startGraphic = null;
      }
      if (this.endGraphic) {
        this.endGraphic.remove();
        this.endGraphic = null;
      }
      this.map.removeLayer(this.groupLayer);

      this.clearCoumpute();
    }
    //=======================起点===============================
    //绘制起点
    drawStartPoint(callback) {
      if (this.startGraphic) {
        this.startGraphic.remove();
        this.startGraphic = null;
      }

      this.pointLayer.startDraw({
        type: "billboard",
        style: {
          image: this.path + "img/start.png",
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
        success: (graphic) => {
          this.startGraphic = graphic;

          if (callback) {
            var point = graphic.point;
            point.format();
            callback(point.lng + "," + point.lat);
          }

          this.startCompute();
        },
      });
    }
    //输入起点坐标
    inputStartPoint(jd, wd) {
      if (!jd || !wd) {
        return;
      }

      let point = [jd, wd];
      if (this.startGraphic) {
        this.startGraphic.position = point;
      } else {
        this.startGraphic = new mars3d.graphic.BillboardEntity({
          position: point,
          style: {
            image: this.path + "img/start.png",
            scale: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
          },
        });
        this.pointLayer.addGraphic(this.startGraphic);
      }

      this.map.flyToPoint(point, { radius: 2500 });

      this.startCompute();
    }
    //查询起点坐标
    queryStartPoint(text) {
      if (!text) {
        window.toastr.error("请输入查询条件！");
        return;
      }
      this.queryPOI(text, "start");
    }
    //=======================终点===============================
    //绘制终点
    drawEndPoint(callback) {
      if (this.endGraphic) {
        this.endGraphic.remove();
        this.endGraphic = null;
      }

      this.pointLayer.startDraw({
        type: "billboard",
        style: {
          image: this.path + "img/end.png",
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
        success: (graphic) => {
          this.endGraphic = graphic;

          if (callback) {
            var point = graphic.point;
            point.format();
            callback(point.lng + "," + point.lat);
          }

          this.startCompute();
        },
      });
    }
    //输入终点坐标
    inputEndPoint(jd, wd) {
      if (!jd || !wd) {
        return;
      }

      let point = [jd, wd];
      if (this.endGraphic) {
        this.endGraphic.position = point;
      } else {
        this.endGraphic = new mars3d.graphic.BillboardEntity({
          position: point,
          style: {
            image: this.path + "img/end.png",
            scale: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
          },
        });
        this.pointLayer.addGraphic(this.endGraphic);
      }

      this.map.flyToPoint(point, { radius: 2500 });

      this.startCompute();
    }
    //查询终点坐标
    queryEndPoint(text) {
      if (!text) {
        window.toastr.error("请输入查询条件！");
        return;
      }
      this.queryPOI(text, "end");
    }
    //===================开始计算路线========================
    //清除计算的结果
    clearCoumpute() {
      //清除路线
      this.routeLayer.clear();
      this.viewWindow.clearRouteContent(); //清除页面搜索结果

      //取消当前的视角跟随
      this.removeTrack();

      $("#mapDH_speed").remove();
    }
    //开始计算
    startCompute() {
      if (!this.startGraphic || !this.endGraphic) {
        return;
      }

      //清除上一次的计算结果
      this.clearCoumpute();

      //当两点存在时 自动计算
      this.gaodeRoute.query({
        points: [this.startGraphic.coordinate, this.endGraphic.coordinate],
        type: 3,
        extensions: "all",
        strategy: 11,
        success: (data) => {
          this.viewWindow.startCompute();
          if (!data || data.paths.length < 1) {
            return;
          }
          this.viewWindow.showRouteBox(true);

          //添加速度控制面板
          for (var i = 0; i < data.paths.length; i++) {
            var path = data.paths[i];
            var points = path.points;
            if (!path.steps || path.steps.length < 1 || !points || points.length < 1) {
              continue;
            }

            let graphic = new mars3d.graphic.PolylineEntity({
              positions: points,
              style: {
                clampToGround: true,
                color: this.randomColor[i % 5],
                opacity: 0.8,
                width: 4,
              },
              attr: path,
            });
            this.routeLayer.addGraphic(graphic);

            //漫游路线
            let flyLine = new mars3d.graphic.RoamLine({
              positions: points,
              speed: 200,
              camera: { type: "" },
              model: {
                uri: "//data.mars3d.cn/gltf/mars/qiche.gltf",
                scale: 0.3,
                minimumPixelSize: 30,
                clampToGround: true,
                show: true,
              },
              attr: {
                lineId: graphic.id,
              },
            });
            this.routeLayer.addGraphic(flyLine);

            //展示路径信息
            this.viewWindow.showRouteInfo(graphic.id, path);
          }

          this.routeLayer.flyTo();
        },
      });
    }

    //============= 计算漫游路线 ======================
    getFlylineById(id) {
      return this.routeLayer.getGraphicByAttr("lineId", id);
    }
    roamOneById(id) {
      this.nowFline = this.getFlylineById(id);
      this.nowFline.show = true;
      this.nowFline.start(() => {
        this.reset();
      });
    }

    //漫游自动结束 或点击 停止导航按钮 后，重置界面和操作
    reset() {
      //漫游结束 重置按钮 取消跟随
      this.resetBtn();
      this.removeTrack();

      if (this.nowFline) {
        this.nowFline.show = false;
        this.nowFline = null;
      }

      //重置速度面板
      this.map.clock.multiplier = 1;

      //还原线的高亮
      this.highLightLine();
    }
    //重置按钮
    resetBtn() {
      this.viewWindow.resetButton();
    }
    //取消当前的视角跟随
    removeTrack() {
      if (this.nowFline) {
        this.nowFline.setCameraOptions({ type: "" });
      }
      this.map.trackedEntity = undefined;
    }
    //==============开始导航===================
    startDH(id, isGS) {
      //导航前释放之前的所有导航操作
      this.reset();

      if (!id) {
        return;
      }
      this.roamOneById(id);

      if (isGS) {
        this.nowFline.setCameraOptions({
          type: "gs",
          heading: 0,
          radius: 2500,
        });
      }
    }
    //============开始视角跟随=============
    startGS(id, ele) {
      //判断当前点击的视角跟随的id 是否是已在导航时的id
      if (this.nowFline) {
        //表示已开始漫游即已点击开始导航
        if (this.nowFline.attr.lineId == id) {
          this.nowFline.setCameraOptions({
            type: "gs",
            heading: 0,
            radius: 2500,
          });
        } else {
          window.toastr.error("当前路径沒有车辆运行！");
          if (ele) {
            ele.prop("checked", false);
          }
          return;
        }
      }
    }
    //==================其它方法=====================
    highLightLine(id) {
      if (this.lastRoute) {
        this.lastRoute.entityGraphic.material = this.lastRoute.entityGraphic.material_old;
        this.lastRoute.entityGraphic.width = this.lastRoute.entityGraphic.width_old;
      }

      if (!id) {
        return;
      }

      //动画线材质
      let graphic = this.routeLayer.getGraphicById(id);
      if (!graphic) {
        return;
      }

      if (!graphic.entityGraphic.material_old) {
        graphic.entityGraphic.material_old = graphic.entityGraphic.material;
      }
      if (!graphic.entityGraphic.width_old) {
        graphic.entityGraphic.width_old = graphic.entityGraphic.width;
      }

      graphic.entityGraphic.width = 10;
      graphic.entityGraphic.material = new mars3d.material.LineFlowMaterialProperty({
        color: Cesium.Color.AQUA,
        image: "./img/textures/arrow2.png",
        repeat: new Cesium.Cartesian2(50, 1),
        speed: 40, //速度，建议取值范围1-100
      });

      graphic.flyTo();

      this.lastRoute = graphic;
    }
    resetSpeed(num) {
      if (num == undefined) {
        return;
      }
      this.map.clock.multiplier = num / 120;
    }
  }

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

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