Lin_Ye_Fang_Huo/public/widgets/plot/widget.js

"use script"; //开发环境建议开启严格模式
(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
    get resources() {
      return [
        "/widgets/plot/js/getGraphicDefStyle.js",
        "./lib/kml/kml-geojson.js", //导出kml支持，不用kml时可以删除
        "./lib/dom2img/dom-to-image.js", //字体标号使用到的div转img库，无此标号时可以删除
      ];
    }

    //弹窗配置
    get view() {
      return {
        type: "window",
        url: "view.html",
        windowOptions: {
          width: 250,
          position: {
            top: 50,
            right: 5,
            bottom: 5,
          },
        },
      };
    }

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

      this.storageName = "mars3d_plot";

      this.graphicGroupLayer = new mars3d.layer.GraphicGroupLayer({
        name: this.config.name,
        pid: 99, //图层管理 中使用，父节点id
        defaultLayer: "默认分组",
        isRestorePositions: true, //在标绘和编辑结束时，是否将坐标还原为普通值，true: 停止编辑时会有闪烁，但效率要好些。
        hasEdit: false,
      });
      this.map.addLayer(this.graphicGroupLayer);

      var that = this;
      this.graphicGroupLayer.bindContextMenu([
        {
          text: "删除对象",
          iconCls: "fa fa-trash-o",
          callback: function (e) {
            let graphic = e.graphic;
            if (graphic) {
              that.deleteEntity(graphic);
            }
          },
        },
      ]);

      //事件监听
      this.graphicGroupLayer.on(mars3d.EventType.drawCreated, (e) => {
        this.showLayerTree();

        var graphic = e.graphic;
        this.startEditing(graphic);
      });
      //模型加载完成后事件
      this.graphicGroupLayer.on(mars3d.EventType.load, (e) => {
        //console.log('gltf模型加载完成');
        haoutil.loading.hide();
      });
      this.graphicGroupLayer.on(mars3d.EventType.editStart, (e) => {
        var graphic = e.graphic;
        this.startEditing(graphic);
      });
      this.graphicGroupLayer.on(mars3d.EventType.editMovePoint, (e) => {
        var graphic = e.graphic;
        this.startEditing(graphic);
      });
      this.graphicGroupLayer.on(mars3d.EventType.editRemovePoint, (e) => {
        var graphic = e.graphic;
        this.startEditing(graphic);
      });
      this.graphicGroupLayer.on(mars3d.EventType.editStop, (e) => {
        var graphic = e.graphic;
        this.stopEditing();

        this.sendSaveEntity(graphic); //保存数据
        this.showLayerTree();
      });

      this.graphicGroupLayer.on(mars3d.EventType.updateAttr, (e) => {
        var graphic = e.graphic;
        //更新了名称
        if (e.attr.name && this.viewWindow) {
          this.viewWindow.treeWork.updateNode(graphic);
        }
      });

      this.sendGetList();
    }
    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      this.viewWindow = result;
    }
    //激活插件
    activate() {
      this.graphicGroupLayer.hasEdit = true;
    }
    //释放插件
    disable() {
      this.stopEditing();

      this.graphicGroupLayer.stopDraw();
      this.graphicGroupLayer.hasEdit = false;

      this.viewWindow = null;
    }
    getDefStyle(type) {
      return getGraphicDefStyle(type);
    }
    updateTemplateValues(url) {
      if (this.map.options.templateValues) {
        return mars3d.Util.template(url, this.map.options.templateValues);
      } else {
        return url;
      }
    }
    hasEdit(val) {
      this.graphicGroupLayer.hasEdit = val;
    }
    hasPopup(val) {
      if (val) {
        this.graphicGroupLayer.bindPopup(
          (event) => {
            let graphic = event.graphic;
            var html = mars3d.Util.getTemplateHtml({
              title: "属性编辑",
              template: [
                { field: "name", name: "名称" },
                { field: "address", name: "地址" },
                { field: "phone", name: "电话" },
                { field: "remark", name: "备注", type: "textarea" },
                { name: "确定", type: "button" },
              ],
              attr: graphic.attr,
              edit: true,
              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.graphicGroupLayer.closePopup();
              });
            },
            onRemove: function (eleId, graphic) {
              //popup的DOM从页面移除的回调方法
            },
            anchor: [0, -20],
          }
        );
      } else {
        this.graphicGroupLayer.unbindPopup();
      }
    }
    //开始标记
    startDraw(defval) {
      haoutil.loading.hide();
      switch (defval.type) {
        default:
          break;
        case "model": //小模型
          defval.drawShow = true; //模型点状对象绘制时，是否显示本身对象，可避免在3dtiles上拾取坐标存在问题。
          haoutil.loading.show(); //LoadEnd后关闭
          break;
        case "point":
        case "font-point":
        case "billboard":
          defval.drawShow = true; //模型点状对象绘制时，是否显示本身对象，可避免在3dtiles上拾取坐标存在问题。
          break;
      }

      console.log("开始绘制", defval);
      this.graphicGroupLayer.startDraw(defval);
    }
    //结束绘制、等同双击完成绘制，比如手机端无法双击结束
    endDraw() {
      this.graphicGroupLayer.endDraw();
    }
    startEditingById(id) {
      var graphic = this.graphicGroupLayer.getGraphicById(id);
      if (graphic == null) {
        return;
      }
      graphic.flyTo();

      this.graphicGroupLayer.startEditing(graphic);
    }
    startEditing(graphic) {
      clearTimeout(this.timeTik);

      if (this.viewWindow == null) {
        return;
      }

      var plotAttr = mars3d.widget.getClass("widgets/plotAttr/widget.js");
      if (plotAttr && plotAttr.isActivate) {
        plotAttr.startEditing(graphic, graphic.coordinates);
      } else {
        mars3d.widget.activate({
          uri: "widgets/plotAttr/widget.js",
          graphic: graphic,
          lonlats: graphic.coordinates,
        });
      }
    }
    stopEditing() {
      this.timeTik = setTimeout(function () {
        mars3d.widget.disable("widgets/plotAttr/widget.js");
      }, 200);
    }

    flyTo(target) {
      //参数解释：线面数据：scale控制边界的放大比例，点数据：radius控制视距距离
      this.map.flyToGraphic(target, { scale: 1.9, radius: 1000 });
    }
    //文件处理
    getGeoJson(target) {
      if (target) {
        return target.toGeoJSON();
      } else {
        return this.graphicGroupLayer.toGeoJSON();
      }
    }
    downloadJson(filename, target) {
      var data = this.getGeoJson(target);
      if (data == null || (data.features && data.features.length == 0)) {
        haoutil.msg("当前未标绘任何数据！");
      } else {
        var timestr = new Date().format("MMddHHmmss");
        haoutil.file.downloadFile(filename + "_" + timestr + ".json", JSON.stringify(data));
      }
    }

    toKml(target) {
      var geojsonObject = this.getGeoJson(target);
      if (geojsonObject == null) {
        return null;
      }

      geojsonObject = haoutil.system.clone(geojsonObject);

      var kml = kgUtil.toKml(geojsonObject, {
        name: "Mars3D标绘数据",
        documentName: "Mars3D标绘数据文件",
        documentDescription: "标绘数据 by mars3d.cn",
        simplestyle: true,
      });

      return kml;
    }
    downloadKml(filename, target) {
      var data = this.toKml(target);
      if (data == null) {
        haoutil.msg("当前未标绘任何数据！");
      } else {
        var timestr = new Date().format("MMddHHmmss");
        haoutil.file.downloadFile(filename + "_" + timestr + ".kml", data);
      }
    }
    loadGeoJSON(json, options) {
      if (json == null) {
        return;
      }
      var arr = this.graphicGroupLayer.loadGeoJSON(json, options);

      //本地存储
      var geojson = JSON.stringify(json);
      haoutil.storage.add(this.storageName, geojson);

      this.showLayerTree();

      return arr;
    }
    deleteAll() {
      this.stopEditing();
      this.graphicGroupLayer.clear();
      this.sendDeleteAll();
      this.showLayerTree();
    }
    deleteEntity(graphic) {
      graphic.remove();

      this.sendDeleteEntity(graphic); //保存数据
      this.showLayerTree();
    }
    //搜索
    query(text, maxcount) {
      var arrGraphic = this.graphicGroupLayer.getGraphics();

      var arr = [];
      var counts = 0;
      for (var i = 0; i < arrGraphic.length; i++) {
        var graphic = arrGraphic[i];

        var name;
        if (graphic.type == "label") {
          name = graphic.text;
        } else if (graphic.attr?.name) {
          name = graphic.attr.name;
        }

        if (name == null || name.indexOf(text) == -1) {
          continue;
        }

        arr.push({
          name: name,
          type: "标绘 - " + name,
          _datatype: "plot",
          _entity: graphic,
        });

        if (maxcount) {
          counts++;
          if (counts > maxcount) {
            break;
          }
        }
      }
      return arr;
    }
    //弹窗属性编辑处理
    // showEditAttrWindow(param) {
    //   this.last_window_param = param

    //   layer.open({
    //     type: 2,
    //     title: '选择数据',
    //     fix: true,
    //     shadeClose: false,
    //     maxmin: true,
    //     area: ['100%', '100%'],
    //     content: 'test.html?name=' + param.attrName + '&value=' + param.attrVal,
    //     skin: 'layer-mars-dialog animation-scale-up',
    //     success: function (layero) {},
    //   })
    // }
    // saveWindowEdit(attrVal) {
    //   this.viewWindow.plotEdit.updateAttr(this.last_window_param.parname, this.last_window_param.attrName, attrVal)
    //   layer.close(layer.index)
    // }

    //分组树相关方法
    showLayerTree() {
      if (!this.viewWindow || !this.isActivate) {
        return;
      }
      this.viewWindow.treeWork.loadData(this.graphicGroupLayer.getLayers());

      this.sendSaveEntity(); //保存所有数据
    }
    checkRemoveGroup(layer) {
      if (this.graphicGroupLayer.length < 2) {
        haoutil.msg("不能删除所有图层，需要至少保留1个图层！");
        return false;
      }
      return true;
    }
    deleteLayer(layer) {
      var result = this.graphicGroupLayer.deleteLayer(layer);
      if (result) {
        this.showLayerTree();
        haoutil.msg("删除成功！");
        return true;
      } else {
        haoutil.msg("删除失败！");
        return false;
      }
    }
    //删除所有非空数组
    deleteEmptyLayer() {
      if (this.graphicGroupLayer.length < 2) {
        haoutil.msg("不能删除所有图层，需要至少保留1个图层！");
        return;
      }
      this.graphicGroupLayer.deleteEmptyLayer();
      this.showLayerTree();
    }
    editGroupName(layer) {
      mars3d.widget.activate({
        uri: "widgets/plotGroupName/widget.js",
        name: layer ? "重命名分组" : "新增分组",
        data: layer ? layer.name : "",
        checkName: (newname) => {
          //校验分组是否有同名的
          return this.graphicGroupLayer.hasLayer(newname, layer);
        },
        callback: (newname) => {
          // console.log(newname)

          if (layer) {
            //修改
            layer.name = newname;
          } else {
            //新增
            this.graphicGroupLayer.createLayer(newname);
          }
          this.showLayerTree();
        },
      });
    }
    changeSelectedLayer(layer) {
      this.graphicGroupLayer.selectedLayer = layer;
      this.showLayerTree();
    }
    moveToLayer(graphic, group) {
      this.graphicGroupLayer.moveToLayer(graphic, group);
      this.showLayerTree();
    }
    //数据保存及加载处理
    sendGetList() {
      if (window.hasServer) {
        //读取后台存储
        // window.sendAjax({
        //   url: 'map/plot/list',
        //   type: 'get',
        //   success: (arr) => {
        //     var arrjson = []
        //     for (var i = 0; i < arr.length; i++) {
        //       var geojson = JSON.parse(arr[i].geojson)
        //       geojson.properties.id = arr[i].id
        //       arrjson.push(geojson)
        //     }
        //     this.loadGeoJSON({ type: 'FeatureCollection', features: arrjson }, {  clear: true,  flyTo: true })
        //   },
        // })
      } else {
        //读取本地存储
        var laststorage = haoutil.storage.get(this.storageName); //读取localStorage值
        if (laststorage == null || laststorage == "null") {
          this.loadDemoData();
        } else {
          var json = JSON.parse(laststorage);
          console.log("加载历史缓存数据", json);
          this.loadGeoJSON(json, { clear: true, flyTo: true });
        }
      }
    }
    sendSaveEntity(graphic) {
      if (this.viewWindow == null) {
        return;
      }
      console.log("plot: 保存了数据");

      if (window.hasServer) {
        //服务端存储
        // if (!graphic.attr.name) {
        //   haoutil.msg('名称不可为空！')
        //   return
        // }
        // let geojson = graphic.toGeoJSON()
        // window.sendAjax({
        //   url: 'map/plot/update',
        //   type: 'post',
        //   data: {
        //     id: graphic.id,
        //     name: graphic.attr.name || '', //名称
        //     geojson: geojson || '', //geojson
        //   },
        //   contentType: 'application/json',
        //   success: function (data) {
        //     graphic.id = data.id
        //   },
        // })
      } else {
        //本地存储
        var geojson = JSON.stringify(this.getGeoJson());
        haoutil.storage.add(this.storageName, geojson);
      }

      //测试的功能
      //this.sendSocket(graphic)
    }
    sendDeleteEntity(graphic) {
      // console.log('plot: 删除了数据')

      if (window.hasServer) {
        //后台删除
        // window.sendAjax({
        //   url: 'map/plot/' + graphic.id,
        //   type: 'delete',
        //   contentType: 'application/json',
        //   success: function (result) {},
        // })
      } else {
        var storagedata = JSON.stringify(this.getGeoJson());
        haoutil.storage.add(this.storageName, storagedata);
      }
    }
    sendDeleteAll() {
      // console.log('plot: 删除了所有数据')

      if (window.hasServer) {
        //后台删除
        // window.sendAjax({
        //   url: 'map/plot/deleteAll',
        //   contentType: 'application/json',
        //   success: function (result) {},
        // })
      } else {
        //本地存储
        haoutil.storage.del(this.storageName);
      }
    }

    //websocket更新坐标
    // socketConfig() {
    //   var that = this
    //   mars3d.widget.activate({
    //     uri: 'widgets/plotSocket/widget.js',
    //     updateAttr: function (json) {
    //       that.graphicGroupLayer.loadGeoJSON(json)
    //     },
    //   })
    // }
    // sendSocket(graphic) {
    //   var plotSocket = mars3d.widget.getClass('widgets/plotSocket/widget.js')
    //   if (plotSocket && plotSocket.isActivate) {
    //     plotSocket.sendSocket(graphic.toGeoJSON())
    //   }
    // }

    //实际系统时可以注释下面代码，该代码是mars3d官网在线加载演示数据
    loadDemoData() {
      if (window.location.hostname.indexOf("mars") == -1) {
        return;
      }

      $.getJSON("//data.mars3d.cn/file/geojson/mars3d-draw.json", (result) => {
        if (!this.isActivate) {
          return;
        }
        this.loadGeoJSON(result, { clear: true, flyTo: true });
      });
    }
  }

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

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