数据新增调整

shuishen

2022-07-21 03df59a72de4354fcc731675c53dd2805c2ec8b1

 src/components/map/mainInThere.vue

@@ -7,788 +7,781 @@
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
  <div id="map">
    <div class="controlMap">
      <el-button-group v-if="false">
        <el-button
          type="primary"
          icon="el-icon-finished"
          @click="openDrawLineMethod"
          :class="[
    <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="[
                >规划路线</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>
                >规划标点</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">确定选择</el-button>
            <!-- v-show="notNow" -->
            <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>
    <el-button-group id="dataConfirm" style="display: none">
      <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-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,
  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";
    // 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 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 {
  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---";
      }
    name: "MapInThere",
    components: {
        tip,
    },
  },
  // 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";
    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,
            },
          }),
        }),
        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", // 注记
          }),
        }),
      ],
            // openDrawChiose: "", //openDrawPoint openDrawLine
            openDrawLine: false,
            openDrawPoint: false,

      // 注意地图控件的写法
      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;
            butTitlePoint: "选择标点",
            olLayer: null, //点图层

    var view = ol2d.getView();
            nowIndex: "", //返回第几个

    // let provider = new Cesium.UrlTemplateImageryProvider({
    //   url: "/wp/{z}/{x}/{y}.png",
    //   fileExtension: "png",
    // });
    // view.imageryLayers.addImageryProvider(provider);
            fromView: false, //若是查看  不显示更改按钮

    // view.setCenter([115.85883507433789, 28.708432053474827])
    view.setCenter([114.03858862, 27.63088262]);
            openTitle: "", //当前选择

    //
    view.setZoom(18);
    this.view = view;
    const ol3d = new OLCesium({ map: window.ol2d });
    window.ol3d = ol3d;
            ourDatas: [], //所有数据
            ourLayer: {}, //图层合集

    // 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");
          }
            notNow: true, //如果修改，不显示确认按钮
        }
      }
      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;
      }
      //notNow来确定是修改值还是增加值 是否显示$("#dataConfirm").show(100);
      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) {
      //判断哪个dom打开
      this.closeOurBut();
      this[openName] = true;
      $("#" + openName).show();
      $("#openTitle").show();
      if (!notNow) {
        $("#dataConfirm").show(100);
      }
    },
    closeOurBut(open) {
      //整体关闭dom
      $("#dataConfirm").hide();
      $("#openDrawPoint").hide();
      $("#openDrawLine").hide();
      $("#openTitle").hide();
      this.openDrawLine = false;
      this.openDrawPoint = false;
      if (open) {
        this.openTitle = "";
        this.$parent.closeOpenedMap(); //开放按钮
        this.drawLayerRoom();
      }
    },
    //取消按钮
    stopDrawOur() {
      this.closeOurBut(true);
    },
    //确认数据
    useMapData() {
      //返回用数据
      // console.log(this.openDrawChiose, this.nowIndex);
      this.$parent.MapDataShow = false;
      let val =
        this.openDrawChiose == "openDrawLine"
          ? "line"
          : this.openDrawChiose == "openDrawPoint"
          ? "point"
          : "notData";
      // console.log(val);
      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;
    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---"
            }
            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",
          }),
    // 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", // 注记
                //     }),
                // }),

                new OlLayerTile({
                    zIndex: 5,
                    title: "cesium切图",
                    source: new XYZ({
                        url: "/wp/{z}/{x}/{y}.png", // 注记
                    }),
                }),
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                // new FullScreen(),
                // new ScaleLine(),
                // new MousePosition(),
                // new Rotate(),
                // new Attribution()
            ]),
            target: "map",
            view: new OlView({
                center: [116.026801, 28.683427],
                zoom: 16,
                projection: "EPSG:4326",
            }),
        })
      );
      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;
      }
        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])

        //
        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
            }
            //notNow来确定是修改值还是增加值 是否显示$("#dataConfirm").show(100);
            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) {
            //判断哪个dom打开
            this.closeOurBut()
            this[openName] = true
            $("#" + openName).show()
            $("#openTitle").show()
            if (!notNow) {
                $("#dataConfirm").show(100)
            }
        },
        closeOurBut (open) {
            //整体关闭dom
            $("#dataConfirm").hide()
            $("#openDrawPoint").hide()
            $("#openDrawLine").hide()
            $("#openTitle").hide()
            this.openDrawLine = false
            this.openDrawPoint = false
            if (open) {
                this.openTitle = ""
                this.$parent.closeOpenedMap() //开放按钮
                this.drawLayerRoom()
            }
        },
        //取消按钮
        stopDrawOur () {
            this.closeOurBut(true)
        },
        //确认数据
        useMapData () {
            //返回用数据
            // console.log(this.openDrawChiose, this.nowIndex);
            this.$parent.MapDataShow = false
            let val =
                this.openDrawChiose == "openDrawLine"
                    ? "line"
                    : this.openDrawChiose == "openDrawPoint"
                        ? "point"
                        : "notData"
            // console.log(val);
            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;
    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;
        }
    }
    #openDrawLine,
    #openDrawPoiton {
      width: 174px;
      // position: relative;
      // top: 43px;
      // top: 10px;
      // left: calc(50% - 96px);
      // left: 20px;
    #dataConfirm {
        position: absolute;
        top: 43px;
        // left: calc(50% + 82px);
        left: 564px;
        z-index: 3 !important;
    }
    .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>