Lin_Ye_Fang_Huo/public/widgets/streetscape/widget.js

(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
    get resources() {
      return ["view.css"];
    }

    //弹窗配置
    get view() {
      return {
        type: "append",
        url: "view.html",
        parent: "body",
      };
    }

    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      var that = this;
      $("#btn_streetscapeBar_close").click(function () {
        that.disableBase();
      });
    }
    //激活插件
    activate() {
      var point = this.config.point || { lat: 31.833789, lng: 117.183995 };
      this.updateMarker(point);

      var pointBd = this.getBaiduPoint(point);

      var inhtml = `<div id="streetscapeView" style="position:absolute;right:0px;top:0px;border:1px solid #ccc;top: 0px;bottom: 0px;width:50%;overflow: hidden;">
                    <iframe id="streetscape" name="streetscape" style="width:100%;height:100%;overflow:hidden;margin:0;"
                        scrolling="no" frameborder="0" src="${this.path}streetscape.html?lng=${pointBd.lng}&lat=${pointBd.lat}"></iframe>
                  </div>`;
      $("body").append(inhtml);

      $("#centerDiv").css({
        position: "",
        height: "100%",
        width: "50%",
      });
      $(".no-print-view").hide();

      //单击地图事件
      this.map.on(mars3d.EventType.click, this.onMapClick, this);
      $(".cesium-viewer").css("cursor", "crosshair");
    }
    //释放插件
    disable() {
      //释放单击地图事件
      this.map.off(mars3d.EventType.click, this.onMapClick, this);
      $(".cesium-viewer").css("cursor", "");

      if (this.graphic) {
        this.map.graphicLayer.removeGraphic(this.graphic, true);
        this.graphic = null;
      }
      $("#streetscapeView").remove();

      $("#centerDiv").css({
        position: "",
        height: "100%",
        width: "100%",
      });
      $(".no-print-view").show();
    }
    onMapClick(event) {
      var cartesian = event.cartesian;
      if (cartesian) {
        var point = mars3d.LatLngPoint.fromCartesian(cartesian);

        this.updateMarker(point);

        //点击地图的事件,触发街景改变
        var pointBd = this.getBaiduPoint(point);
        var streetscapeFrame = document.getElementById("streetscape");
        if (streetscapeFrame && streetscapeFrame.contentWindow.setPosition) {
          streetscapeFrame.contentWindow.setPosition(pointBd); //根据经纬度坐标展示全景图
        }
      }
    }
    getBaiduPoint(point) {
      let pointbd = mars3d.PointTrans.wgs2bd([point.lng, point.lat]);
      return { lng: pointbd[0], lat: pointbd[1] };
    }
    updateMarker(position) {
      if (this.graphic) {
        this.graphic.position = position;
      } else {
        this.graphic = new mars3d.graphic.BillboardEntity({
          position: position,
          style: {
            image: this.path + "img/streetimg.png",
            scale: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
          },
        });
        this.map.graphicLayer.addGraphic(this.graphic);
      }
      this.map.flyToGraphic(this.graphic, { radius: 800 });
    }
  }

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

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