Lin_Ye_Fang_Huo/public/widgets/addmarker/widget.js

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

    //弹窗配置
    get view() {
      return {
        type: "window",
        url: "view.html",
        windowOptions: {
          width: 300,
          height: 400,
        },
      };
    }
    //初始化[仅执行1次]
    create() {
      this.storageName = "mars3d_addmarker";
      this.editable = true;

      this.graphicLayer = new mars3d.layer.GraphicLayer({
        name: this.config.name,
        pid: 99, //图层管理 中使用，父节点id
        hasEdit: false,
      });
      this.map.addLayer(this.graphicLayer);

      this.graphicLayer.bindPopup(
        (event) => {
          let graphic = event.graphic;
          if (!graphic) {
            return;
          }

          var html = mars3d.Util.getTemplateHtml({
            title: "我的标记",
            template: [
              { field: "name", name: "名称" },
              { field: "remark", name: "备注", type: "textarea" },
              this.editable ? { field: "id", name: "确定", type: "button" } : null,
            ],
            attr: {
              id: graphic.id,
              ...graphic.attr,
            },
            edit: this.editable,
            width: 190,
          });
          return html;
        },
        {
          onAdd: (event) => {
            let eleId = event.id,
              graphic = event.graphic;
            //popup的DOM添加到页面的回调方法
            $("#" + eleId + " .mars3d-popup-btn").click((e) => {
              $("#" + eleId + " .mars3d-popup-edititem").each(function () {
                var val = $(this).val();
                var key = $(this).attr("data-type");
                graphic.attr[key] = val;
              });
              this.saveEditFeature(graphic);
            });
          },
          onRemove: function (eleId, graphic) {
            //popup的DOM从页面移除的回调方法
          },
          anchor: [0, -35],
        }
      );

      //事件监听
      this.graphicLayer.on(mars3d.EventType.drawCreated, (e) => {
        var graphic = e.graphic;
        if (!graphic || !graphic.positionShow) {
          return;
        }
        graphic.attr.name = "我的标记";

        this.saveEntity(graphic, () => {
          this.graphicLayer.openPopup(graphic);
        });
      });
      this.graphicLayer.on(mars3d.EventType.editMovePoint, (e) => {
        this.saveEntity(e.graphic); //编辑修改了点
      });
      this.graphicLayer.on(mars3d.EventType.removeGraphic, (e) => {
        this.deleteItem(e.graphic.id); //保存数据
      });

      this.getList();
    }
    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      this.viewWindow = result;
    }
    //激活插件
    activate() {
      this.hasEdit(true);
    }
    //释放插件
    disable() {
      this.viewWindow = null;
      this.stopDraw();
      this.hasEdit(false);
    }
    stopDraw() {
      this.graphicLayer.stopDraw();
    }
    //配置的样式
    getStyle(name) {
      return {
        scale: 1,
        image: this.path + "img/marker.png",
        scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 8.0e6, 0.2),
        label: {
          text: name || "我的标记",
          font_size: 20,
          outline: true,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 3,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -50),
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
        },
      };
    }
    drawPoint() {
      this.graphicLayer.startDraw({
        type: "billboard",
        style: this.getStyle(),
      });
    }
    hasEdit(val) {
      this.editable = val;
      this.graphicLayer.hasEdit = val;
    }
    //========================
    saveEditFeature(graphic) {
      this.graphicLayer.closePopup();
      graphic.label.text = graphic.attr.name;

      this.saveEntity(graphic);
    }
    deleteItemById(id) {
      let graphic = this.graphicLayer.getGraphicById(id);
      if (graphic) {
        graphic.remove();
      }
      this.deleteItem(id);
    }
    getGraphicAttrList() {
      var arrAttr = [];
      var arrGraphic = this.graphicLayer.getGraphics();
      for (var i = 0, len = arrGraphic.length; i < len; i++) {
        let graphic = arrGraphic[i];
        let attr = graphic.attr;
        if (!attr.name) {
          attr.name = "我的标记";
        }
        arrAttr.push({
          id: graphic.id,
          ...attr,
        });
      }
      return arrAttr;
    }
    flyTo(id) {
      let graphic = this.graphicLayer.getGraphicById(id);
      if (graphic) {
        //参数解释：点数据：radius控制视距距离
        this.map.flyToGraphic(graphic, { radius: 2500 });
      }
    }
    getJsonData() {
      var arr = [];
      var graphics = this.graphicLayer.getGraphics();
      for (var i = 0, len = graphics.length; i < len; i++) {
        var graphic = graphics[i];
        var attr = graphic.attr;
        var point = graphic.point.format();

        arr.push({
          id: graphic.id,
          name: attr.name,
          remark: attr.remark,
          lat: point.lat,
          lng: point.lng,
          alt: point.alt,
        });
      }
      return JSON.stringify(arr);
    }
    loadJson(arr, isclear) {
      if (arr == null || arr.length == 0) {
        return;
      }
      if (isclear) {
        this.graphicLayer.clear();
      }

      var arrGraphic = [];
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if (!item.lat || !item.lng) {
          continue;
        }

        if (!isclear) {
          //叠加时，清除已有同id数据
          let graphic = this.graphicLayer.getGraphicById(item.id);
          this.graphicLayer.removeGraphic(graphic);
        }

        var graphic = new mars3d.graphic.BillboardEntity({
          id: item.id,
          position: [item.lng, item.lat, item.alt],
          style: this.getStyle(item.name),
          attr: {
            name: item.name || "",
            remark: item.remark || "",
          },
        });
        this.graphicLayer.addGraphic(graphic);

        arrGraphic.push(graphic);
      }

      this.map.flyToGraphic(arrGraphic, { duration: 2.0, scale: 2 });

      if (this.viewWindow) {
        this.viewWindow.refMarkerList();
      }
    }
    getList() {
      if (window.hasServer) {
        //读取服务端存储
        // window.sendAjax({
        //   url: 'map/mark/list',
        //   type: 'get',
        //   success: (arr) => {
        //     this.loadJson(arr, true)
        //   },
        // })
      } else {
        //读取本地存储
        var laststorage = haoutil.storage.get(this.storageName); //读取localStorage值
        if (laststorage != null && laststorage != "null") {
          var arr = JSON.parse(laststorage);
          this.loadJson(arr, true);
        }
      }
    }
    saveEntity(graphic, endfun) {
      if (window.hasServer) {
        //服务端存储
        // var attr = graphic.attr
        // var point = graphic.point
        // window.sendAjax({
        //   url: 'map/mark/update',
        //   data: JSON.stringify({
        //     id: graphic.id,
        //     name: attr.name,
        //     remark: attr.remark,
        //     lng: point.lng,
        //     lat: point.lat,
        //     alt: point.alt,
        //   }),
        //   type: 'post',
        //   contentType: 'application/json',
        //   success: (data) => {
        //     if (endfun) {
        //       endfun()
        //     }
        //     this.viewWindow.refMarkerList()
        //   },
        // })
      } else {
        //浏览器本地存储
        var storagedata = this.getJsonData();
        haoutil.storage.add(this.storageName, storagedata);

        if (endfun) {
          endfun();
        }
        this.viewWindow.refMarkerList();
      }
    }

    deleteItem(id) {
      this.graphicLayer.closePopup();
      this.viewWindow.refMarkerList();

      //服务端存储
      if (window.hasServer) {
        // window.sendAjax({
        //   url: 'map/mark/' + id,
        //   type: 'delete',
        //   success: function (data) {},
        // })
      } else {
        //浏览器本地存储
        var storagedata = this.getJsonData();
        haoutil.storage.add(this.storageName, storagedata);
      }
    }
    deleteAll() {
      this.graphicLayer.clear();

      if (this.viewWindow) {
        this.viewWindow.refMarkerList();
      }

      if (window.hasServer && window.userId) {
        //服务端存储
        // window.sendAjax({
        //   url: 'map/mark/del/' + window.userId,
        //   type: 'delete',
        //   dataType: 'json',
        //   success: function (data) {},
        // })
      } else {
        //浏览器本地存储
        haoutil.storage.del(this.storageName);
      }
    }
  }

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

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