数据新增调整

shuishen

2022-07-21 03df59a72de4354fcc731675c53dd2805c2ec8b1

 src/components/map/mainInThere.vue

@@ -18,8 +18,7 @@
            'openDrawsb',
            openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
          ]"
          >规划路线</el-button
        >
                >规划路线</el-button>
        <el-button
          type="primary"
          @click="openDrawPointMethod"
@@ -28,8 +27,7 @@
            'openDrawsb',
            openDrawChiose == 'openDrawPoint' ? 'activeDraw' : '',
          ]"
          >规划标点</el-button
        >
                >规划标点</el-button>
      </el-button-group>
      <div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
      <el-button-group id="openDrawLine" style="display: none">
@@ -38,11 +36,8 @@
          icon="el-icon-edit"
          @click="getTypeSelected"
          :disabled="beginDraw"
          >{{ butTitle }}</el-button
        >
        <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
                >{{ 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
@@ -50,36 +45,26 @@
          icon="el-icon-edit"
          @click="getTypeSelectedPoint"
          :disabled="beginDraw"
          >{{ butTitlePoint }}</el-button
        >
        <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
                >{{ 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"
        >确定选择</el-button
      >
            <el-button type="success" icon="el-icon-check" @click="useMapData">确定选择</el-button>
      <!-- v-show="notNow" -->
      <el-button
        type="danger"
        @click="clearUseMapData"
        icon="el-icon-refresh-right"
        >清空</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 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,
@@ -103,31 +88,31 @@
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate,
} from "ol/control.js";
} from "ol/control.js"

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

import { OSM, TileWMS, Vector } from "ol/source";
import { OSM, TileWMS, Vector } from "ol/source"
// import Draw from "ol/interaction/Draw";
import Draw from "./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 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 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 OlStyleStyle from "ol/style/Style"
import OlStyleIcon from "ol/style/Icon"
// // 用来添加相关文字描述的
import OlStyleText from "ol/style/Text";
import OlStyleFill from "ol/style/Fill";
import OlStyleText from "ol/style/Text"
import OlStyleFill from "ol/style/Fill"
// import Cesium from "libs/Cesium/Cesium.js";

export default {
@@ -208,7 +193,7 @@
      ourLayer: {}, //图层合集

      notNow: true, //如果修改，不显示确认按钮
    };
        }
  },
  computed: {
    openDrawChiose() {
@@ -219,11 +204,11 @@
      //   this.openDrawPoint
      // );
      if (this.openDrawLine) {
        return "openDrawLine";
                return "openDrawLine"
      } else if (this.openDrawPoint) {
        return "openDrawPoint";
                return "openDrawPoint"
      } else {
        return "notBut---";
                return "notBut---"
      }
    },
  },
@@ -249,25 +234,35 @@
        //     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: 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", // 注记
                //     }),
                // }),

        new OlLayerTile({
          zIndex: 5,
          title: "中文注记",
                    title: "cesium切图",
          source: new XYZ({
            url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
                        url: "/wp/{z}/{x}/{y}.png", // 注记
          }),
        }),
      ],
@@ -282,14 +277,14 @@
      ]),
      target: "map",
      view: new OlView({
        center: [0, 0],
        zoom: 2,
                center: [116.026801, 28.683427],
                zoom: 16,
        projection: "EPSG:4326",
      }),
    });
    window.ol2d = ol2d;
        })
        window.ol2d = ol2d

    var view = ol2d.getView();
        var view = ol2d.getView()

    // let provider = new Cesium.UrlTemplateImageryProvider({
    //   url: "/wp/{z}/{x}/{y}.png",
@@ -298,13 +293,11 @@
    // 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;
        this.view = view
        const ol3d = new OLCesium({ map: window.ol2d })
        window.ol3d = ol3d

    // ol2d.addLayer(this.gunAddlayer);
    // ol2d.addLayer(this.peopleAddlayer);
@@ -315,45 +308,45 @@
  methods: {
    clearUseMapData() {
      if (this.openDrawPoint) {
        this.$store.commit("setPointData", ""); //用vuex清空最终数据
                this.$store.commit("setPointData", "") //用vuex清空最终数据
      } else if (this.openDrawLine) {
        this.$store.commit("setRotesData", ""); //用vuex清空最终数据
                this.$store.commit("setRotesData", "") //用vuex清空最终数据
      }
      this.useMapData();
            this.useMapData()
    },
    onceOnlodad(ourDatas) {
      this.ourDatas = ourDatas;
      this.Renders(ourDatas);
            this.ourDatas = ourDatas
            this.Renders(ourDatas)
    },
    //加载底层路线和图标
    Renders(ourDatas) {
      // for (let i in ourDatas) {
      //   console.log(ourDatas[i].value, "------", i);
      // }
      this.deleteElement();
            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");
                        this.addLines(ourDatas[k], "line")
          }
        } else {
          if (!ourDatas[k].value) {
            // this.deleteElement("point", ourDatas[k].id);
          } else {
            this.addPoint(ourDatas[k], "point");
                        this.addPoint(ourDatas[k], "point")
          }
        }
      }
      this.drawLayerRoom(); //重置绘画层
            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();
                this.ourLayer[k].getSource().clear()
      }
    },
    //加载点
@@ -369,7 +362,7 @@
        iconFeatureTitle = new OlFeature({
          geometry: new OlGeomPoint(data.value), //绘制图形（点）
        }),
        that = this;
                that = this
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
@@ -379,7 +372,7 @@
            src: "img/dingwei/dingwei5.png",
          }),
        })
      );
            )
      iconFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
@@ -392,12 +385,12 @@
            }),
          }),
        })
      );
      layer.getSource().addFeature(iconFeature);
      layer.getSource().addFeature(iconFeatureTitle);
            )
            layer.getSource().addFeature(iconFeature)
            layer.getSource().addFeature(iconFeatureTitle)
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
            this.ourLayer[name + data.id] = layer
            ol2d.addLayer(that.ourLayer[name + data.id])
      // console.log(this.ourLayer, 77777);
    },
    addLines(data, name) {
@@ -406,26 +399,26 @@
          zIndex: 22,
          source: new VectorSource(),
        }),
        that = this;
                that = this
      //绘画线路
      var entityData = "";
      var entityArr = [];
      entityData = data.value.match(/\(([^)]*)\)/);
            var entityData = ""
            var entityArr = []
            entityData = data.value.match(/\(([^)]*)\)/)
      if (entityData && entityData != "") {
        entityData = entityData[1].split(",");
                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 lineCoords = entityArr // 线里点的集合
      // console.log(lineCoords);
      var feature_LineString = new Feature({
        //线面板
        geometry: new LineString(lineCoords),
      });
            })
      feature_LineString.setStyle(
        //线样式
        new Style({
@@ -439,11 +432,11 @@
            width: 5,
          }),
        })
      );
            )
      //线名称
      let lineFeatureTitle = new OlFeature({
        geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
      });
            })
      lineFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
@@ -456,12 +449,12 @@
            }),
          }),
        })
      );
      layer.getSource().addFeature(lineFeatureTitle);
      layer.getSource().addFeature(feature_LineString);
            )
            layer.getSource().addFeature(lineFeatureTitle)
            layer.getSource().addFeature(feature_LineString)
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
            this.ourLayer[name + data.id] = layer
            ol2d.addLayer(that.ourLayer[name + data.id])
      // console.log(this.ourLayer, 88888);
    },

@@ -469,115 +462,115 @@

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

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

      // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
      if (entityData && entityData != "") {
        entityData = entityData[1].split(",");
                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 lineCoords = entityArr // 线里点的集合
      //移动位置---暂不需要
      // var view = ol2d.getView();
      // view.setCenter([
@@ -645,7 +638,7 @@
      // 要素
      var feature_LineString = new Feature({
        geometry: new LineString(lineCoords),
      });
            })

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

      if (this.typeSelected !== "None") {
        this.draw = new Draw({
@@ -705,21 +698,21 @@
          coordinate: function (res) {},
          coordinateOverPoint: function (res) {
            if (isHaveOne) {
              return;
                            return
            }
            that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
            that.addIconMarker(res.coordinate);
            isHaveOne = true;
                        that.$store.commit("setPointData", res.coordinate) //用vuex传最终数据
                        that.addIconMarker(res.coordinate)
                        isHaveOne = true
          },
        });
        ol2d.addInteraction(this.draw);
                })
                ol2d.addInteraction(this.draw)
      }
    },
    addIconMarker(intlat) {
      let that = this;
            let that = this
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat), //绘制图形（点）
      });
            })
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
@@ -732,17 +725,17 @@
            src: "img/dingwei/dingwei6.png",
          }),
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(iconFeature);
      this.butTitlePoint = "重新标点";
            )
            that.peopleLineAddlayer.getSource().addFeature(iconFeature)
            this.butTitlePoint = "重新标点"
      if (!this.fromView) {
        $("#dataConfirm").show(100);
                $("#dataConfirm").show(100)
      }
      if (this.draw != null) {
        this.draw.controlDrawing(true);
        $("#map").unbind("mousemove");
        this.tipTitle = "";
        this.showTip = false;
                this.draw.controlDrawing(true)
                $("#map").unbind("mousemove")
                this.tipTitle = ""
                this.showTip = false
      }
    },
    //绘制点------↑