wangzhibo
2021-09-06 2efb5d2a02ce47a9fd6f1cec138496aba72f0815
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
(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);