便利贴--11{OpenLayers,vue项目2，添加地图的路径和标点数据---ok第二版}

动态验证，加动态地图显示，

视频

1642387412188

同样的，也是基于之前那个地图来的

—getMapDataInThere.vue页面

<template>
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="controlMapWindow">
      <div class="controlMapWindowTitle">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-finished"
            @click="openDrawLineMethod"
            :disabled="fromView"
            >新增路线</el-button
          >
          <el-button
            type="primary"
            @click="openDrawPointMethod"
            icon="el-icon-coordinate"
            :disabled="fromView"
            >新增标点</el-button
          >
        </el-button-group>
      </div>
      <div class="controlMapWindowmain">
        <transition-group
          :name="animateName"
          :enter-active-class="animateEnter"
          :leave-active-class="animateLeave"
        >
          <div
            class="getMapData__once"
            v-for="(item, index) in ourDatas"
            :key="index"
          >
            <div class="getMapData_once_label">
              <el-tag> {{ item.label }}</el-tag>
            </div>
            <el-input
              :class="[
                'getMapData_once_name',
                item.notPath == 2 ? 'notPath' : '',
              ]"
              @blur="myRules(index)"
              v-model="item.name"
              placeholder="请输入路径名称"
              :disabled="fromView"
            ></el-input>
            <transition
              :name="animateNames"
              :enter-active-class="animateEnters"
              :leave-active-class="animateLeaves"
            >
              <div class="notPathTitile" v-show="item.notPath == 2">
                请输入名称或选择路径
              </div>
            </transition>
            <el-button
              class="getMapData_once_get"
              :type="item.value ? 'success' : 'primary'"
              :title="item.value ? '重新选择' : '点击选择'"
              :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
              @click="openMap(item.label, index, item.value)"
              :disabled="MapDataShow || fromView"
            ></el-button>
            <el-button
              class="getMapData_once_endBut"
              icon="el-icon-delete"
              circle
              @click="deleteRowOurs(index)"
              :disabled="MapDataShow || fromView"
            ></el-button>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/map/mainInThere.vue";
export default {
  name: "getMapData",
  components: {
    MapInThere,
  },
  computed: {
    ...mapGetters(["rotesData", "pointData"]),
  },
  watch: {
    ourDatas: {
      handler(val) {
        // console.log("深度监听：", val);
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
      },
      deep: true,
    },
  },
  data() {
    return {
      Refresh: false,
      // routers: [
      //   {
      //     label: "路径1",
      //     value: "",
      //     routerName: "",
      //     notPath: true,
      //   },
      // ],
      // potions: [
      //   {
      //     label: "标点1",
      //     value: "",
      //     potionName: "",
      //     notPath: true,
      //   },
      // ],
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
      animateLeave: "animated fadeOut",
      //未输入动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeInDown",
      animateLeave: "animated fadeOut",
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [
        // {
        //   label: "路径2",
        //   value:
        //     "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
        //   name: "xxx2",
        //   notPath: false,
        //   isLine: true,
        //   id: 2,
        // },
        // {
        //   label: "路径3",
        //   value:
        //     "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
        //   name: "xxx3",
        //   notPath: false,
        //   isLine: true,
        //   id: 3,
        // },
        // {
        //   label: "标点4",
        //   value: [114.03887343706977, 27.63000553765213],
        //   name: "喜迎校庆选点1",
        //   notPath: false,
        //   isLine: false,
        //   id: 4,
        // },
      ],
      nowId: 0,
    };
  },
  mounted() {
    // this.$emit("setMapData", [this.routers, this.potions]);
    let that = this;
    if (that.ourDatas.length != 0) {
      for (let k in that.ourDatas) {
        that.ourDatas[k].id = +k + 1;
      }
    }
    this.checkDom("getMapDataRefs", (dom) => {
      dom.onceOnlodad(that.ourDatas);
    });
    this.nowId = +this.ourDatas.length + 1;
  },
  methods: {
    openDrawLineMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: true,
        id: +id,
      });
    },
    openDrawPointMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "标点" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: false,
        id: +id,
      });
    },
    deleteRowOurs(index) {
      this.ourDatas.splice(index, 1);
    },
    backMapDataOurData(val, index) {
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
      } else if (val == "point") {
        this.ourDatas[index].value = this.pointData;
      } else if (val == "notData") {
        this.ourDatas[index].value = "";
      }
      //单个验证
      this.myRules(index);
    },
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);
    },
    closeOpenedMap() {
      this.MapDataShow = false;
      // this.openTitle = "";
    },
    //下面是旧代码
    editInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
    },
    viewInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
      this.fromView = true; //查看数据不可改
    },
    reverseMapData(val, label) {
      //解释数据
      let rname = val[0][0].split(";"),
        r = val[0][1].split(";"),
        pname = val[1][0].split(";"),
        p = val[1][1].split(";");
      this.ourDatas = [];
      for (let k in r) {
        this.ourDatas.push({
          label: "路径" + (+k + 1),
          value: r[k],
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length,
        });
      }
      for (let k in p) {
        let potion = p[k].split(",");
        this.ourDatas.push({
          label: "标点" + (+k + 1),
          value: [+potion[0], +potion[1]],
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length,
        });
      }
      this.nowId = +this.ourDatas.length + 1;
    },
    myRules(index) {
      //单个验证
      if (this.ourDatas[index].name && this.ourDatas[index].value) {
        this.ourDatas[index].notPath = false;
      } else {
        this.ourDatas[index].notPath = 2;
      }
    },
    //自定义验证
    myRulesUse() {
      //把一个数组拆开两个来对应之前的数据
      let ourData = this.ourDatas;
      let lineBefor = [];
      let pointBefor = [];
      for (let o in ourData) {
        if (ourData[o].isLine) {
          lineBefor.push(ourData[o]);
        } else {
          pointBefor.push(ourData[o]);
        }
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      console.log(line, point);
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
        if (line[0] == "namenot") {
          errorId.push(...line[1]);
        }
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        console.log(errorId, "errorId");
        for (let x in this.ourDatas) {
          console.log(this.ourDatas[x], "x");
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
              flog = false;
            }
          }
          if (flog) {
            this.ourDatas[x].notPath = false;
          } else {
            this.ourDatas[x].notPath = 2;
          }
        }
        return false;
      } else {
        // console.log("通过");
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
        return [line, point];
      }
    },
    //规则
    changeMapData(item, names) {
      let name = "",
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      // console.log(item, names, 7777);
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
          if (
            inItem[kin] == "" &&
            kin != "notPath" &&
            kin != "isLine" &&
            kin != "id"
          ) {
            console.log(kin);
            notData.push(inItem.id);
            break;
          }
          if (kin == names) {
            name += inItem[kin];
            if (k != itemLength) {
              name += ";";
            }
          }
          if (kin == "value") {
            value += inItem[kin];
            if (k != itemLength) {
              value += ";";
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>

<style lang="scss">
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.getMapData {
  width: 100%;
  height: 100%;
  position: relative;
  .controlMapWindow {
    width: 320px;
    height: calc(100% - 20px);
    // border: 1px solid red;
    // box-shadow: 2px 0 15px 2px #acacac;
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #fff;
    border-radius: 0 15px 15px 0;
    padding: 10px 10px;
    overflow: hidden;
    .controlMapWindowTitle {
      height: 40px;
      width: 100%;
      margin-bottom: 5px;
      @extend .flexCenter;
    }
    .controlMapWindowmain {
      width: 100%;
      height: calc(100% - 45px);
      overflow-x: hidden;
      overflow-y: scroll;
      .getMapData_left {
        width: 50%;
        height: 40px;
        box-sizing: border-box;
      }
      .getMapData_right {
        width: 50%;
        height: 40px;
        box-sizing: border-box;
      }
      .getMapData__once {
        width: 100%;
        height: 40px;
        margin-bottom: 10px;
        position: relative;
        @extend .flexCenter;
        flex-direction: row;
        .getMapData_once_label {
          padding-left: 15px;
          width: 90px;
          height: 100%;
          @extend .flexCenter;
          justify-content: space-around;
        }
        .getMapData_once_name {
          width: calc(100% - 130px);
        }
        .getMapData_once_get {
          padding: 6px 16px;
          font-size: 20px;
        }
        .notPathTitile {
          position: absolute;
          left: 90px;
          bottom: -20px;
          color: red;
          font-size: 1px;
        }
      }
    }
  }
  // 验证
  .notPath {
    // border-bottom: 0.5px solid red;
  }
}

//过度动画
.list-enter {
  opacity: 0;
  transform: translateY(10px);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.list-enter-to,
.list-leave {
  opacity: 1;
}
​ .list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}
</style>

上面的那个只是引用地图框架，（原谅我说这么简单的vue页面是框架），改的不多，主要是和地图数据的动态交互，wacth监听，

··mainInThere.vue页面

<template>
  <div id="map">
    <div class="controlMap">
      <el-button-group v-if="false">
        <el-button
          type="primary"
          icon="el-icon-finished"
          @click="openDrawLineMethod"
          :class="[
            'openDrawsb',
            openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
          ]"
          >规划路线</el-button
        >
        <el-button
          type="primary"
          @click="openDrawPointMethod"
          icon="el-icon-coordinate"
          :class="[
            'openDrawsb',
            openDrawChiose == 'openDrawPoint' ? 'activeDraw' : '',
          ]"
          >规划标点</el-button
        >
      </el-button-group>
      <div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
      <el-button-group id="openDrawLine" style="display: none">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelected"
          :disabled="beginDraw"
          >{{ butTitle }}</el-button
        >
        <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
      </el-button-group>
      <el-button-group id="openDrawPoint" style="display: none">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelectedPoint"
          :disabled="beginDraw"
          >{{ butTitlePoint }}</el-button
        >
        <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
      </el-button-group>
    </div>
    <el-button-group id="dataConfirm" style="display: none">
      <el-button
        type="success"
        icon="el-icon-check"
        @click="useMapData"
        v-show="notNow"
        >确定选择</el-button
      >
      <el-button
        type="danger"
        @click="clearUseMapData"
        icon="el-icon-refresh-right"
        >清空</el-button
      >
    </el-button-group>
    <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
  </div>
</template>
<script>
import OLCesium from "olcs/OLCesium.js";
import "ol/ol.css";
import OlView from "ol/View.js";
import XYZ from "ol/source/XYZ";
import OlLayerTile from "ol/layer/Tile.js";
import OlMap from "ol/Map.js";
import tip from "./tip.vue";
import {
  // eslint-disable-next-line no-unused-vars
  defaults as OlControlDefaults,
  defaults,
  // 全屏控件
  FullScreen,
  // 比例尺控件
  ScaleLine,
  // 缩放滚动条控件
  // eslint-disable-next-line no-unused-vars
  ZoomSlider,
  // 鼠标位置控件
  // eslint-disable-next-line no-unused-vars
  MousePosition,
  // -地图属性控件
  Attribution,
  // 鹰眼控件
  // eslint-disable-next-line no-unused-vars
  OverviewMap,
  // 缩放到范围控件
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate,
} from "ol/control.js";

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";

import { OSM, TileWMS, Vector } from "ol/source";
// import Draw from "ol/interaction/Draw";
import Draw from "./Draw";

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import LineString from "ol/geom/LineString.js";
import { Icon, Style, Fill, Stroke } from "ol/style.js";

// import drawFence from "./drawFence";

import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
// import OlLayerVector from "ol/layer/Vector";
// import OlSourceVector from "ol/source/Vector";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";
// // 用来添加相关文字描述的
import OlStyleText from "ol/style/Text";
import OlStyleFill from "ol/style/Fill";
// import Cesium from "libs/Cesium/Cesium.js";

export default {
  name: "MapInThere",
  components: {
    tip,
  },
  data() {
    return {
      gunAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      peopleAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      carAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      // peopleLineAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      DrawLayer: new VectorLayer({
        // 图标图层
        // zIndex: 1000,
        source: new VectorSource(),
      }),
      peopleLineAddlayer: null,

      // 存储新增点，线，面，数据的地方
      // polygonData: [],
      // polygonFlag: false,
      // editToolbar: null,
      // addPolygonEntitys: null,

      typeSelected: "LineString",
      // drawLayer: null,
      draw: null,
      coordinates: [],
      coordinatesStr: "",
      beginDraw: false,
      butTitle: "开始绘画",
      view: "",
      // map: null,

      showTip: false,
      tipTitle: "",
      position: {
        w: 200,
        h: 10,
      },
      // openDrawChiose: "", //openDrawPoint openDrawLine
      openDrawLine: false,
      openDrawPoint: false,

      butTitlePoint: "选择标点",
      olLayer: null, //点图层

      nowIndex: "", //返回第几个

      fromView: false, //若是查看  不显示更改按钮

      openTitle: "", //当前选择

      ourDatas: [], //所有数据
      ourLayer: {}, //图层合集

      notNow: true, //如果修改，不显示确认按钮
    };
  },
  computed: {
    openDrawChiose() {
      // console.log(
      //   "this.openDrawLine:",
      //   this.openDrawLine,
      //   "this.openDrawPoint:",
      //   this.openDrawPoint
      // );
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
        return "openDrawPoint";
      } else {
        return "notBut---";
      }
    },
  },
  // watch: {
  //   openDrawChiose() {
  //     console.log(this.openDrawChiose, "openDrawChiose");
  //   },
  // },
  mounted() {
    const ol2d = new OlMap({
      layers: [
        // new OlLayerTile({
        //   zIndex: 4,
        //   title: "影像",
        //   source: new XYZ({
        //     url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
        //   }),
        // }),
        // new OlLayerTile({
        //   zIndex: 5,
        //   title: "道路+中文注记",
        //   source: new XYZ({
        //     url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
        //   }),
        // }),
        new OlLayerTile({
          zIndex: 4,
          title: "矢量",
          source: new XYZ({
            url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
            // url: "/localData/sl/{z}/{x}/{y}.png",
            tileUrlFunction: function (tileCoord) {
              var z = tileCoord[0];
              var x = tileCoord[1];
              var y = Math.pow(2, z) + tileCoord[2];
              return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
            },
          }),
        }),
        new OlLayerTile({
          zIndex: 5,
          title: "中文注记",
          source: new XYZ({
            url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
          }),
        }),
      ],

      // 注意地图控件的写法
      controls: defaults().extend([
        // new FullScreen(),
        // new ScaleLine(),
        // new MousePosition(),
        // new Rotate(),
        // new Attribution()
      ]),
      target: "map",
      view: new OlView({
        center: [0, 0],
        zoom: 2,
        projection: "EPSG:4326",
      }),
    });
    window.ol2d = ol2d;

    var view = ol2d.getView();

    // let provider = new Cesium.UrlTemplateImageryProvider({
    //   url: "/wp/{z}/{x}/{y}.png",
    //   fileExtension: "png",
    // });
    // view.imageryLayers.addImageryProvider(provider);

    // view.setCenter([115.85883507433789, 28.708432053474827])
    view.setCenter([114.03858862, 27.63088262]);

    //
    view.setZoom(18);
    this.view = view;
    const ol3d = new OLCesium({ map: window.ol2d });
    window.ol3d = ol3d;

    // ol2d.addLayer(this.gunAddlayer);
    // ol2d.addLayer(this.peopleAddlayer);
    // ol2d.addLayer(this.carAddlayer);
    // ol2d.addLayer(this.peopleLineAddlayer);
    // ol2d.addLayer(this.beginsPoint);
  },
  methods: {
    clearUseMapData() {
      if (this.openDrawPoint) {
        this.$store.commit("setPointData", ""); //用vuex清空最终数据
      } else if (this.openDrawLine) {
        this.$store.commit("setRotesData", ""); //用vuex清空最终数据
      }
      this.useMapData();
    },
    onceOnlodad(ourDatas) {
      this.ourDatas = ourDatas;
      this.Renders(ourDatas);
    },
    //加载底层路线和图标
    Renders(ourDatas) {
      // for (let i in ourDatas) {
      //   console.log(ourDatas[i].value, "------", i);
      // }
      this.deleteElement();
      for (let k in ourDatas) {
        if (ourDatas[k].isLine) {
          if (!ourDatas[k].value) {
            // this.deleteElement("line", ourDatas[k].id);
          } else {
            this.addLines(ourDatas[k], "line");
          }
        } else {
          if (!ourDatas[k].value) {
            // this.deleteElement("point", ourDatas[k].id);
          } else {
            this.addPoint(ourDatas[k], "point");
          }
        }
      }
      this.drawLayerRoom(); //重置绘画层
    },
    // 若没有value数据，删除地图上的元素
    deleteElement(name, id) {
      // console.log(name, id);
      // this.ourLayer[name + id].getSource().clear();
      for (let k in this.ourLayer) {
        this.ourLayer[k].getSource().clear();
      }
    },
    //加载点
    addPoint(data, name) {
      //创建图层
      let layer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        }),
        iconFeature = new OlFeature({
          geometry: new OlGeomPoint(data.value), //绘制图形（点）
        }),
        iconFeatureTitle = new OlFeature({
          geometry: new OlGeomPoint(data.value), //绘制图形（点）
        }),
        that = this;
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            src: "img/dingwei/dingwei5.png",
          }),
        })
      );
      iconFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
            text: data.name,
            font: "14px sans-serif", // CSS 字体设置
            scale: 1, //比例
            offsetY: -40,
            fill: new OlStyleFill({
              color: "#1296DB",
            }),
          }),
        })
      );
      layer.getSource().addFeature(iconFeature);
      layer.getSource().addFeature(iconFeatureTitle);
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
      // console.log(this.ourLayer, 77777);
    },
    addLines(data, name) {
      //创建图层
      let layer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        }),
        that = this;
      //绘画线路
      var entityData = "";
      var entityArr = [];
      entityData = data.value.match(/\(([^)]*)\)/);
      if (entityData && entityData != "") {
        entityData = entityData[1].split(",");
        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([
            Number(entityData[j].split(" ")[0]),
            Number(entityData[j].split(" ")[1]),
          ]);
        }
      }
      var lineCoords = entityArr; // 线里点的集合
      // console.log(lineCoords);
      var feature_LineString = new Feature({
        //线面板
        geometry: new LineString(lineCoords),
      });
      feature_LineString.setStyle(
        //线样式
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          //边线颜色
          stroke: new Stroke({
            color: "rgb(18,150,219)",
            width: 5,
          }),
        })
      );
      //线名称
      let lineFeatureTitle = new OlFeature({
        geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
      });
      lineFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
            text: data.name,
            font: "14px sans-serif", // CSS 字体设置
            scale: 1, //比例
            offsetY: -10,
            fill: new OlStyleFill({
              color: "#1296DB",
            }),
          }),
        })
      );
      layer.getSource().addFeature(lineFeatureTitle);
      layer.getSource().addFeature(feature_LineString);
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
      // console.log(this.ourLayer, 88888);
    },

    //上面是初始化·················

    //下面是选择点或线路开始按钮
    init(val, num, value) {
      this.openTitle = val;
      if (value) {
        this.notNow = false;
      } else {
        this.notNow = true;
      }
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径按钮");
        this.controlBut("openDrawLine", this.notNow);
      } else {
        // console.log("加载标点按钮");
        this.controlBut("openDrawPoint", this.notNow);
      }
    },
    controlBut(openName, notNow) {
      this.closeOurBut();
      this[openName] = true;
      $("#" + openName).show();
      $("#openTitle").show();
      if (!notNow) {
        $("#dataConfirm").show(100);
      }
    },
    closeOurBut(open) {
      $("#dataConfirm").hide();
      $("#openDrawPoint").hide();
      $("#openDrawLine").hide();
      $("#openTitle").hide();
      this.openDrawLine = false;
      this.openDrawPoint = false;
      if (open) {
        this.openTitle = "";
        this.$parent.closeOpenedMap(); //开放按钮
      }
    },
    //取消按钮
    stopDrawOur() {
      this.closeOurBut(true);
    },
    //确认数据
    useMapData() {
      //返回用数据
      // console.log(this.openDrawChiose, this.nowIndex);
      this.$parent.MapDataShow = false;
      let val;
      if (this.openDrawChiose == "openDrawLine") {
        val = "line";
      } else if (this.openDrawChiose == "openDrawPoint") {
        val = "point";
      } else {
        val = "notData";
      }
      this.$parent.backMapDataOurData(val, this.nowIndex);
      // 返回后关闭操作按钮
      this.closeOurBut();
      //清除绘画图层
      this.drawLayerRoom();
    },
    //提示位置
    setTipPosition(x, y, n, m) {
      this.position.w = x + n;
      this.position.h = y + m;
    },
    //实时添加最上图层，为了编辑或新建路径能在最上
    drawLayerRoom() {
      let that = this;
      //添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
      if (that.peopleLineAddlayer) {
        that.peopleLineAddlayer.getSource().clear();
        that.peopleLineAddlayer = null;
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        });
      } else {
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        });
      }
      ol2d.addLayer(this.peopleLineAddlayer);
    },

    //选择绘画路线------↓
    getTypeSelected() {
      let that = this;
      this.beginDraw = true;
      this.draw && ol2d.removeInteraction(this.draw);
      //再根据typeSelect的值绘制新的Interaction
      this.drawLayerRoom(); //重置绘画层
      this.addInteraction();
    },
    addInteraction() {
      let value = this.typeSelected,
        that = this;
      this.tipTitle = "单击左键或右键开始绘画";
      $("#map") //提示器
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });
      this.coordinates = [];
      if (value !== "None") {
        this.draw = new Draw({
          source: this.DrawLayer.getSource(),
          type: this.typeSelected,
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
          }),
          coordinate: function (res) {
            //画线中的点
            that.coordinates.push(res.coordinate_);
            that.tipTitle = "可继续，或选择最终位置双击结束";
          },
          coordinateOver: function (res) {
            // 结束绘画 处理数据
            let d = that.doData(that.coordinates);
            that.addLinesDraw(d);
            that.$store.commit("setRotesData", d); //用vuex传最终数据
          },
        });
        ol2d.addInteraction(this.draw);
      }
    },
    //处理数据
    doData(val) {
      let str = "LINESTRING(";
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`;
        if (k != val.length - 1) {
          str += ",";
        }
      }
      str += ")";
      return str;
    },
    addLinesDraw(val) {
      var that = this;
      var entityData = "";
      var entityArr = [];
      entityData = val.match(/\(([^)]*)\)/);

      // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
      if (entityData && entityData != "") {
        entityData = entityData[1].split(",");

        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([
            Number(entityData[j].split(" ")[0]),
            Number(entityData[j].split(" ")[1]),
          ]);
        }
      }

      var lineCoords = entityArr; // 线里点的集合
      //移动位置---暂不需要
      // var view = ol2d.getView();
      // view.setCenter([
      //   lineCoords[Math.ceil(entityArr.length / 2)][0],
      //   lineCoords[Math.ceil(entityArr.length / 2)][1],
      // ]);
      // view.setZoom(14.5);

      // 要素
      var feature_LineString = new Feature({
        geometry: new LineString(lineCoords),
      });

      feature_LineString.setStyle(
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          //边线颜色
          stroke: new Stroke({
            color: "red",
            width: 5,
          }),
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
      that.butTitle = "重新绘画";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (that.draw != null) {
        that.beginDraw = false;
        that.draw.controlDrawing(true);
        that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
        $("#map").unbind("mousemove");
        // setTimeout(() => {
        this.tipTitle = "";
        this.showTip = false;
      }
    },
    //绘画路线------↑
    //绘画点-------↓
    getTypeSelectedPoint() {
      this.tipTitle = "单击左键选择位置";
      let that = this;
      let isHaveOne = false;
      this.drawLayerRoom(); //重置绘画层
      $("#map")
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });

      if (this.typeSelected !== "None") {
        this.draw = new Draw({
          source: this.DrawLayer.getSource(),
          type: this.typeSelected,
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
          }),
          isPoint: true,
          coordinate: function (res) {},
          coordinateOverPoint: function (res) {
            if (isHaveOne) {
              return;
            }
            that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
            that.addIconMarker(res.coordinate);
            isHaveOne = true;
          },
        });
        ol2d.addInteraction(this.draw);
      }
    },
    addIconMarker(intlat) {
      let that = this;
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat), //绘制图形（点）
      });
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            //透明度
            opacity: 1,
            //图片路径
            src: "img/dingwei/dingwei6.png",
          }),
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(iconFeature);
      this.butTitlePoint = "重新标点";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (this.draw != null) {
        this.draw.controlDrawing(true);
        $("#map").unbind("mousemove");
        this.tipTitle = "";
        this.showTip = false;
      }
    },
    //绘制点------↑
  },
};
</script>

<style scoped lang="scss">
#map {
  position: relative;
  width: 100%;
  height: 100%;
  .controlMap {
    position: absolute;
    top: 10px;
    // left: calc(50% - 97px);
    left: 390px;
    z-index: 2 !important;
    #openTitle {
      background-color: #fff;
      border-radius: 5px;
    }
    #openDrawLine,
    #openDrawPoiton {
      width: 174px;
      // position: relative;
      // top: 43px;
      // top: 10px;
      // left: calc(50% - 96px);
      // left: 20px;
    }
    .openDrawsb {
      background-color: #fff;
      color: black;
    }
    .activeDraw {
      background-color: #409eff;
      color: #fff;
    }
  }
  #dataConfirm {
    position: absolute;
    top: 43px;
    // left: calc(50% + 82px);
    left: 564px;
    z-index: 3 !important;
  }
}
</style>

之前那个表格就不用改了 数据都是统一处理成一样的，,发现这是好事。