vue基于高德地图实现城市管网、压力点、区域绘制编辑器

最近在做城市管网项目，项目中需要绘制一些管道路线，压力点位，和区域等，为了满足项目需求，于是基于高德地图实现了一个简单的编辑器

1、显示地图管网路线绘制，颜色设置、管线宽度设置、管材、长度、设置，自定义注入数据，点击可以实现管网信息查看

2、自定义选取地图压力点位，绑定压力点和项目数据，实时查看官网末端压力，瞬时流量，当前液位，累计流量

3、自定义绘制区域，设置区域颜色，区域边框，不透明度，注入区域数据，点击区域可查看对应区域数据

部分代码如下：

<template>
  <div class="line-panel_wrapper">
    <div class="content">
      <!-- 编辑区域 -->
      <div class="edit_box">
        <div class="edit_btn">
          <el-button type="primary" size="mini" @click="addFence">新增</el-button>
          <!-- <el-button type="success" size="mini" @click="addSave" style="margin-left: 10px"
            >保存</el-button
          > -->
        </div>
      </div>
      <div class="content">
        <!-- 路线名称 -->
        <div class="item-line" v-for="(v, index) in fenceData" :key="v.id">
          <div class="lie">
            <div class="name">名称：</div>
            <input
              type="text"
              class="route_input"
              v-model="v.name"
              placeholder="请输入路线名称"
            />
          </div>
          <div class="lie">
            <div class="name">长度：</div>
            <input
              type="text"
              class="route_input"
              v-model="v.len"
              placeholder="请输入路线名称"
            />
          </div>
          <div class="lie">
            <div class="name">深度：</div>
            <input
              type="text"
              class="route_input"
              v-model="v.deep"
              placeholder="请输入路线名称"
            />
          </div>
          <div class="lie">
            <div class="name">材质：</div>
            <input
              type="text"
              class="route_input"
              v-model="v.material"
              placeholder="请输入围栏材质名称"
            />
          </div>
          <div class="lie">
            <div class="name">厂商：</div>
            <input
              type="text"
              class="route_input"
              v-model="v.factory"
              placeholder="请输入围栏厂商名称"
            />
          </div>
          <div class="color_edit">
            <div class="lie">
              <div class="left">
                <div class="name">颜色：</div>
                <el-color-picker
                  class="color_input"
                  v-model="v.cloor"
                  @change="strokColor($event)"
                />
              </div>
            </div>
            <div class="lie">
              <div class="name">粗细：</div>
              <el-input-number
                v-model="v.strok"
                class="thickness_input"
                @change="strokChange"
                :min="1"
                :max="15"
              />
            </div>
          </div>
          <div class="color_edit">
            <div class="lie">
              <div class="left">
                <div class="name">填充：</div>
                <el-color-picker
                  class="color_input"
                  v-model="v.fillColor"
                  @change="FillColor($event)"
                />
              </div>
            </div>
            <div class="lie">
              <div class="name">透明度：</div>
              <el-input-number
                v-model="v.fillOpacity"
                class="thickness_input"
                @change="FillOpacity"
                :step="0.1"
                :precion="1"
                :min="0"
                :max="1"
              />
            </div>
          </div>
          <div class="btn" v-show="!v.isFence">
            <div class="edit save" @click="addSaveFence">保存</div>
            <div class="edit del" @click="delAddFence(v.id)">取消</div>
          </div>
          <div class="btn" v-show="v.isFence">
            <div class="edit" @click="toEditFence(v.id, index)">修改</div>
            <div class="edit save" @click="toFenceSave(v.id)">保存</div>
            <div class="edit del" @click="toFenceDel(v.id, v.name)">删除</div>
          </div>
        </div>
      </div>
      <hr />
    </div>
  </div>
</template>

<script>
export default {
  name: "linePanel",
  props: {
    isFence: {},
    fence: {},
    fenceData: {},
  },
  methods: {
    // 新增
    addFence() {
      this.$emit("addFence");
    },
    // 新增保存
    addSave() {
      this.$emit("addSave");
    },
    // 新增--数据保存
    addSaveFence() {
      this.$emit("addSaveFence");
    },
    // 新增--数据删除
    delAddFence(id) {
      this.$emit("delAddFence", id);
    },
    //数据--修改
    toEditFence(id, idx) {
      this.$emit("toEditFence", id, idx);
    },
    //数据--修改保存
    toFenceSave(id) {
      this.$emit("toFenceSave", id);
    },
    // 数据--修改删除
    toFenceDel(id, name) {
      this.$emit("toFenceDel", id, name);
    },
    // 线颜色
    strokColor($event) {
      this.$emit("strokColor", $event);
    },
    // 线大小
    strokChange() {
      this.$emit("strokChange");
    },
    // 填充色
    FillColor($event) {
      this.$emit("FillColor", $event);
    },
    // 透明度
    FillOpacity() {
      this.$emit("FillOpacity");
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .edit_box {
    .edit_btn {
      display: flex;
      margin-bottom: 30px;
      margin-left: 0;
      .add {
        width: 60px;
        height: 30px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        background-color: #409eff;
        border-radius: 6px;
        line-height: 30px;
      }
      .save {
        margin-left: 20px;
      }
    }
  }
  .name {
    font-weight: 600;
  }
  .color_edit {
    display: flex;
  }
  .lie {
    height: 30px;
    line-height: 30px;
    display: flex;
    margin-bottom: 15px;
    .route_input {
      margin-top: 2px;
      height: 26px;
      width: 165px;
      outline: none;
      padding-left: 8px;
      font-size: 13px;
      border: 1px solid #409eff;
    }
    .color_input {
      margin-top: 5px;
      margin-right: 20px;
      ::v-deep .el-color-picker__trigger {
        width: 20px;
        height: 20px;
        padding: 0;
        border: none;
        border-radius: none;
      }
      ::v-deep .el-color-picker__icon {
        font-size: 0;
      }
      ::v-deep .el-color-picker__color {
        border: none;
      }
      ::v-deep .el-color-picker__color-inner {
        border-radius: 4px;
      }
    }
    .left,
    .right {
      display: flex;
    }
    .thickness_input {
      width: 80px;
      ::v-deep .el-input__inner {
        height: 30px;
      }
      ::v-deep .el-input-number__decrease,
      ::v-deep .el-input-number__increase {
        width: 25px;
      }
    }
    ::v-deep .el-input-number {
      line-height: 28.5px !important;
    }
    ::v-deep .el-input-number .el-input__inner {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .ul_path {
    max-height: 800px;
    overflow-y: scroll;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .li_path {
    // background-color: pink;
    margin-top: 20px;
    border-bottom: 1px dashed #409eff;
    .btn {
      display: flex;
      .edit {
        width: 60px;
        height: 25px;
        text-align: center;
        color: #fff;
        background-color: #67c23a;
        border-radius: 6px;
        line-height: 25px;
        margin-bottom: 10px;
        margin-right: 10px;
      }
      .del {
        background-color: #f56c6c;
      }
      .save {
        background-color: #409eff;
      }
    }
  }
  .btn {
    display: flex;
    .edit {
      width: 60px;
      height: 25px;
      text-align: center;
      color: #fff;
      background-color: #67c23a;
      border-radius: 6px;
      line-height: 25px;
      margin-bottom: 10px;
      margin-right: 10px;
    }
    .del {
      background-color: #f56c6c;
    }
    .save {
      background-color: #409eff;
    }
  }
}
</style>

 //  数据--修改删除
    toFenceDel(id, name) {
      this.$confirm("此操作将永久删除该围栏, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = this.fenceData.filter((item) => item.id !== id);
          this.fenceData = data;
          this.polyEditorData = [];
          // 重新绘制路线
          this.createMap();
          this.$message.success(`成功删除，${name} 围栏`);
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 保存围栏数据
    addSaveFence() {
      var _that = this;
      this.$confirm("此操作将保存【新增围栏】, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.polyEditor.on("end", function (event) {
            // event.target 即为编辑后的多边形对象
            //多边形的坐标
            this.coordList = event.target.getPath();
            // console.log("coordList", this.coordList);
            let mapList = [];
            this.coordList.forEach((v) => {
              // console.log("v", v.lng, "--", v.lat);
              mapList.push([v.lng, v.lat]);
            });
            // _that.$emit("mapList", mapList);
            // console.log("mapList", mapList);
            _that.fenceData[0].path = mapList;
            _that.fenceData[0].isFence = true;

            // 重新绘制地图
            _that.createMap();
            _that.isFence = false;

            // 清空围栏表单
            _that.formFence();
            // console.log("fenceData", _that.fenceData);
          });
          // 关闭绘制
          this.polyEditor.close();
        })
        .catch(() => {
          this.$message.info("取消继续编辑");
        });
    },

    // 清空围栏表单
    formFence() {
      this.fence = {
        isFence: false,
        id: `fence-${new Date().getTime()}`,
        name: `围栏-${new Date().getTime()}`, //围栏名称
        strok: 5,
        cloor: "#409eff",
        material: "",
        len: 1, // 长度
        deep: 1, // 深度
        fillColor: "#93dece",
        fillOpacity: 0.5,
        path: [],
      };
      this.polyEditorData = [];
    },
    //保存新增围栏
    addSave() {
      console.log(this.fenceData, "----------fenceData---------");
    },

// 清空表单数据
    formData () {
      this.pipe = {
        isEdit: false,
        pipId: `pipId-${new Date().getTime()}`,
        name: `管线-${new Date().getTime()}`, //路线名称
        size: 8, // 粗细
        color: '#409eff',
        material: '', // 材质`
        factory: '', // 生产厂商
        serviceLife: '', // 使用寿命
        diameter: '', // 管径
        length: '', // 长度
        depth: '', // 深度
        startPressureId: '', // 始端监测点1
        endPressureId: '', // 末端监测点2
        paths: [],
      };
      this.bezierCurveData = [];
    },
    // 取消新增路线
    delAdd() {
      this.formData();
      this.isEdit = false;
    },

    // 面板颜色改变
    EditColor(e) {
      this.addColor = e;
    },
    // 新增路线
    toAdd() {
      const vm = this;
      this.isEdit = true;
      const hadEdit = this.pathData.find((v) => v.isEdit);
      if (hadEdit) {
        this.$message.warning("已经存在未保存项，请先保存后再进行编辑");
        return;
      }
      // 新增数据
      let data = { ...this.pipe, isShow: true, isEdit: true };
      data.pipId = `pipId-${new Date().getTime()}`;
      this.pathData.unshift(data);
      this.$message.success("开启，新增路线。");

      this.bezierCurveEditor = new AMap.PolylineEditor(map);
      // 开始编辑新增路线
      this.bezierCurveEditor.on('addnode', event => {
        // 增加一个节点时触发此事件
        console.log("addnode", event.target.$x[0]);
        this.addPath = event.target.$x[0];
        this.pathData[0].paths = this.addPath;
      });
      this.bezierCurveEditor.on('adjust', event => {
        // 调整折线上某个点时触发此事件
        // console.log("adjust", event);
        this.addPath = event.target.$x[0];
        this.pathData[0].paths = this.addPath;
        console.log(event.target.$x[0], 'event.target.$x[0]');
      });
      this.bezierCurveEditor.on('removenode', event => {
        // 删除一个节点时触发此事件
        // console.log("removenode", event);
      });
      this.bezierCurveEditor.on('end', event => {
        // 调用close之后触发该事件，target即为编辑后的覆盖物对象
        // console.log("end", event);
        // 保存编辑的路线
        this.addPath = event.target.$x[0];
        // 判断不保存只有两个坐标的数据
        if (this.addPath.length == 2) {
          this.addPath = [];
          return;
        }
        console.log(event.target.$x[0], 'event.target.$x[0]');
        this.pathData[0].paths = this.addPath;
        this.pathData[0].isEdit = true; // 可编辑修改标识
        // 缓存本地
        // localStorage.setItem("mapPathData", JSON.stringify(this.pathData));
        // 重新绘制路线
        this.createMap();
        this.isEdit = false;
        // 清空表单数据
        this.formData();
        this.$message.success("保存，新增路线。");
      });

      // 打开编辑路线
      this.bezierCurveEditor.open();
    },
    // 保存新增路线
    toAddSave () {
      this.bezierCurveEditor.close();
    },