+地图添加面 电子围栏

liuyg

2022-03-16 e4be7a095f31b76d4f3d60c06eefe774ffd264fc

 src/components/map/main.vue

@@ -7,31 +7,12 @@
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
  <div id="map" style="height: 100%">
    <div class="controlMap">
      <el-button-group>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelected"
          :disabled="beginDraw"
          >{{ butTitle }}</el-button
        >
        <el-button
          type="primary"
          :disabled="!beginDraw"
          @click="stopDraw"
          icon="el-icon-delete"
          >取消</el-button
        >
        <!-- <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button> -->
      </el-button-group>
    </div>
  <div id="map" style="height: calc(100% - 40px)">
    <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";
@@ -60,83 +41,152 @@
  // 缩放到范围控件
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate,
  Rotate
} from "ol/control.js";
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
import { ImageStatic, Vector as VectorSource } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";
import Draw from "ol/interaction/Draw";
import { Point } from "ol/geom";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";

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

import { Vector } from "ol/source";
// import Draw from "./Draw";
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 img from "@/assets/img/car.png";
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 Text from "ol/style/Text";
// // import Fill from "ol/style/Fill";
// import Cesium from "libs/Cesium/Cesium.js";

export default {
  name: "Map",
  components: {
    tip,
    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(),
        source: new VectorSource()
      }),
      //多边形Layer
      polygonlayer: new VectorLayer({
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
        source: new VectorSource()
      }),
      vectorSource: new VectorSource(),
      features: [],
      feature: null,

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

      typeSelected: "Polygon",
      typeSelected: "LineString",
      drawLayer: null,
      draw: null,
      drawSource:null,
      coordinates: [],
      coordinatesStr: "",
      beginDraw: false,
      butTitle: "开始绘画",
      view: "",
      isDraw: true, // 是否绘制
      // map: null,

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

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

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

      fromView: false //若是查看  不显示更改按钮
    };
  },
  
  computed: {
    openDrawChiose() {
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
        return "openDrawPoint";
      } else {
        return "";
      }
    }
  },
  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: "影像",
          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", // 行政区划
          }),
            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" // 注记
          })
        })
      ],

      // 注意地图控件的写法
@@ -151,111 +201,303 @@
      view: new OlView({
        center: [0, 0],
        zoom: 2,
        projection: "EPSG:4326",
      }),
        projection: "EPSG:4326"
      })
    });
    window.ol2d = ol2d;

    var view = ol2d.getView();

    // view.setCenter([115.85883507433789, 28.708432053474827])
    view.setCenter([115.9032747077233, 28.67433116990186]);

    //设置放大层级
    view.setZoom(13);
    this.view = view;

    // const drawSource = new VectorSource();

    // const drawLayer = new VectorLayer({

    //     source: drawSource

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

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

    // ol2d.addLayer(drawLayer);
    //
    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.polygonlayer);
    ol2d.addLayer(this.beginsPoint);
    // this.addLines()
    let that = this;
    that.addNewLine();

    return;
    that.beginsPoint.getSource().clear();
    let iconFeature = new OlFeature({
      geometry: new OlGeomPoint([114.03928791, 27.62954732]) //绘制图形（点）
    });
    iconFeature.setStyle(
      new OlStyleStyle({
        image: new OlStyleIcon({
          scale: 0.5,
          offset: [0, 5],
          offsetOrigin: "bottom",
          //透明度
          opacity: 1,
          //图片路径
          src: "img/dingwei/dingwei4.png"
        })
      })
    );
    that.beginsPoint.getSource().addFeature(iconFeature);

    //监听鼠标位置
    var that = this;
    //
    that.addNewLine();
    var obj = {
        fenceId: '12',
        name: '围栏3',
        center: '',
        radius: '',
        type: 'polyline',
        points: '113.960623,22.546082;113.958197,22.544029;113.956526,22.543245;113.953562,22.544563'
    }
    this.showFence(obj);
  },
  watch: {
    persons(val) {
      if (val) {
        this.setFeature();
      }
    },
  },
  methods: {
    init(val, num, value, fromView) {
      if (fromView) {
        this.fromView = fromView;
      }
      //若是查看  不显示更改按钮
      //初始化
      // console.log(val, "地图初始化", "第:" + num);
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径");
        if (!fromView) {
          this.openDrawLineMethod();
        }
        if (value) {
          //有数据就加载
          this.addLinesDraw(value);
        }
      } else {
        // console.log("加载标点");
        if (!fromView) {
          this.openDrawPointMethod();
        }
        if (value) {
          //有数据就加载
          let intlat = value;
          if (typeof value == "string") {
            intlat = value.split(","); //改为数组
            intlat = [+intlat[0], +intlat[1]]; //改为数字
          }
          this.addIconMarker(intlat);
        }
      }
    },
    useMapData() {
      //返回用数据
      this.$parent.MapDataShow = false;
      let val;
      if (this.openDrawPoint) {
        val = "point";
      } else if (this.openDrawLine) {
        val = "line";
      }
      this.$parent.backMapData(val, this.nowIndex);
    },
    clearUseMapData() {
      if (this.openDrawPoint) {
        this.$store.commit("setPointData", ""); //用vuex清空最终数据
      } else if (this.openDrawLine) {
        this.$store.commit("setRotesData", ""); //用vuex清空最终数据
      }
      this.useMapData();
    },
    openDrawLineMethod() {
      if (this.openDrawPoint) {
        this.openDrawPoint = false;
        $("#openDrawPoiton").hide();
      }
      //打开画路径
      $("#openDrawLine").toggle(100);
      this.openDrawLine = !this.openDrawLine;
    },
    openDrawPointMethod() {
      if (this.openDrawLine) {
        this.openDrawLine = false;
        $("#openDrawLine").hide();
      }
      //打开画点
      $("#openDrawPoiton").toggle(100);
      this.openDrawPoint = !this.openDrawPoint;
    },
    getTypeSelectedPoint() {
      this.tipTitle = "单击左键选择位置";
      let that = this;
      let isHaveOne = false;
      $("#map")
        .off("mousemove")
        .mousemove(function(e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
          // console.log(e.clientX);
          // console.log(e.offsetX);
          // console.log(e.pageX);
          // console.log(e.screenX);
          // console.log("================================");
        });

      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传最终数据
            // console.log(res.coordinate);//输出点
            that.addIconMarker(res.coordinate);
            isHaveOne = true;
          }
        });
        this.map.addInteraction(this.draw);
      }

      // 选点
      // this.addIconMarker([115.9111272006128, 28.699307185841562]);
    },
    addIconMarker(intlat) {
      let that = this;
      that.carAddlayer.getSource().clear();
      // if (this.olLayer) {
      //   window.ol2d.removeLayer(this.olLayer);
      // }
      // let iconFeatures;

      // this.olLayer = new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // });
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat) //绘制图形（点）
      });
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            //控制标注图片和文字之间的距离
            // anchor: [0.2, 1],
            //标注样式的起点位置
            // anchorOrigin: "top-right",
            //X方向单位：分数
            // anchorXUnits: "10px",
            //Y方向单位：像素
            // anchorYUnits: "-10px",
            //偏移起点位置的方向
            offset: [0, 5],
            offsetOrigin: "bottom",
            //透明度
            opacity: 1,
            //图片路径
            // src: require("img/logos.png"),
            src: "img/dingwei/dingwei5.png"
          })
        })
      );

      // 加载多个点用addFeatures，一个点用addFeature
      // this.olLayer.getSource().addFeature(iconFeature);
      that.carAddlayer.getSource().addFeature(iconFeature);
      // window.ol2d.addLayer(this.olLayer);

      // var startMarker = new OlFeature({
      //   type: "icon",
      //   // geometry: new OlGeomPoint([118.10131072998047, 36.819305419921875]),
      //   geometry: new OlGeomPoint(intlat),
      // });

      // var vectorLayer = new OlLayerVector({
      //   source: new OlSourceVector({
      //     features: [startMarker],
      //   }),
      //   style: new OlStyleStyle({
      //     image: new OlStyleIcon({
      //       anchor: [0.5, 1],
      //       src: "img/logos.png",
      //       // src: http://192.168.4.61:9527/static/mapMoniter/0.png
      //       // 说明下，因为vue项目打包之后，我这张图片放到了static目录下，直接给相对路径是无法访问到，
      //       // 可以通过js原生的API拿到对应的前台服务器ip和端口，还有项目名称，就可以访问到，下面附了对应帖子链接
      //     }),
      //     // 设置图片下面显示字体的样式和内容
      //     text: new Text({
      //       text: "文字描述", // 添加文字描述
      //       font: "14px font-size", // 设置字体大小
      //       // fill: new Fill({
      //       //   // 设置字体颜色
      //       //   color: "#1CAF9A",
      //       // }),
      //       offsetY: 10, // 设置文字偏移量
      //     }),
      //   }),
      // });
      // window.ol2d.addLayer(vectorLayer);

      this.butTitlePoint = "重新标点";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (this.draw != null) {
        this.draw.controlDrawing(true);
        $("#map").unbind("mousemove");
        this.tipTitle = "";
        this.showTip = false;
      }
    },
    goTudefault(x, y) {
      this.view.setCenter([x, y]);
      this.view.setZoom(14.5);
    },
    // 点
    setFeature() {
      let that = this;
      that.features = [];
      that.vectorSource.clear();
      that.persons.map((item) => {
        that.feature = new Feature({
          geometry: new Point([item.x, item.y]),
          name: item.name,
        });
        // 设置Feature的样式，使用小旗子图标
        that.feature.setStyle(
          new Style({
            image: new Icon({
              anchor: [0, 1],
              src: img,
            }),
            text: new Text({
              // 位置
              textAlign: "center",
              // 基准线
              textBaseline: "middle",
              // 文字样式
              font: "normal 20px 微软雅黑",
              // 文本内容
              text: item.name,
              // 文本填充样式（即文字颜色）
              fill: new Fill({ color: "#aa3300" }),
              stroke: new Stroke({ color: "#ffcc33", width: 2 }),
            }),
          })
        );
        that.features.push(that.feature);
      });
      that.vectorSource.addFeatures(that.features);
    init3D(val) {
      // window.ol3d.setEnabled(val);
    },
    addEntitys(item, icon, scale, name, type) {
      const iconFeature = new Feature({
        geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
        name: name,
        attributes: item,
        attributes: item
      });

      const iconStyle = new Style({
        // text: new Text({ // 字体, 未成功, 浪费许多时间
        //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
        //   text: "\e645",
        //   fill: new Fill({ color: "green" }),
        // }),

        image: new Icon({
          scale: scale,
          opacity: 1,
          src: icon,
          src: icon
          // src: require('../../assets/Mark.png')
        }),
        })

        // new CircleStyle({ // 普通样式
        //   radius: 6,
        //   fill: new Fill({
        //     color: 'rgba(200, 155, 155, 0.8)'
        //   }),
        //   stroke: new Stroke({
        //     color: 'black',
        //     width: 0.3,
        //   })
        // }),
      });

      iconFeature.setStyle(iconStyle);
@@ -270,10 +512,10 @@
          url: "api/routeIn/routein/selectList",
          type: "post",
          data: {
            id: ringId,
            id: ringId
          },
          dataType: "JSON",
          success: function (data) {
          success: function(data) {
            that.peopleLineAddlayer.getSource().clear();
            var entityData = "";
            var entityArr = [];
@@ -286,7 +528,7 @@
              for (var j = 0; j < entityData.length; j++) {
                entityArr.push([
                  Number(entityData[j].split(" ")[0]),
                  Number(entityData[j].split(" ")[1]),
                  Number(entityData[j].split(" ")[1])
                ]);
              }
            }
@@ -296,107 +538,60 @@
            var view = ol2d.getView();
            view.setCenter([
              lineCoords[Math.ceil(entityArr.length / 2)][0],
              lineCoords[Math.ceil(entityArr.length / 2)][1],
              lineCoords[Math.ceil(entityArr.length / 2)][1]
            ]);
            view.setZoom(14.5);

            // 要素
            // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
            var feature_LineString = new Feature({
              geometry: new LineString(lineCoords),
              geometry: new LineString(lineCoords)
            });

            feature_LineString.setStyle(
              new Style({
                //填充色
                fill: new Fill({
                  color: "rgba(255, 255, 255, 0.2)",
                  color: "rgba(255, 255, 255, 0.2)"
                }),
                //边线颜色
                stroke: new Stroke({
                  color: "rgb(252, 94, 32)",
                  width: 5,
                }),
                  width: 5
                })
              })
            );
            that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
            that.butTitle = "修改绘画";
          },
          error: function (data) {
          error: function(data) {
            // 请求失败函数
            console.log(data);
          },
          }
        });
      }
    },
    addNewLine() {
      this.map = ol2d;
      // console.log(ol2d, 1);
      // console.log(drawFence, 2);
      // var d = new drawFence(ol2d);
      // console.log(d);

      // 添加一个绘制的线使用的layer
      this.drawLayer = new VectorLayer({
        //layer所对应的source
        source: new Vector(),
        source: new Vector()
      });
      //把layer加入到地图中
      this.map.addLayer(this.drawLayer);
    },
    //转换坐标点（多）
    transPoints(points) {
        let arr = points.split(';');
        let point = [];
        arr.forEach(item => {
            let newPoint = item.split(',');
            point.push(newPoint)
        })
        let _points = point.map(item => {
            item = [parseFloat(item[0]), parseFloat(item[1])];
            item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
            return item;
        })
        return _points;
    },
     //回显围栏
    showFence(obj) {
        let {
            fenceId,
            name,
            type,
            center,
            radius,
            points
        } = obj;
        if (type == 'polygon') {
            this.showPolygon(fenceId, points, name)
        }
    },
     /**
     *
     * @param {*} fenceId 围栏id
     * @param {*} points 多边形坐标点
     * @param {*} name 围栏名
     */
    showPolygon(fenceId, points, name) {
        let _points = this.transPoints(points)
        _points = [_points]
        //多边形的数据格式是[[[lng,lat],[lng,lat]……]]外围两个中括号
        var polygonFeature = new ol.Feature({ //路线
            geometry: new ol.geom.Polygon(_points)

        });
        debugger;
        polygonFeature.setId(fenceId)
        this.source.addFeature(polygonFeature);
        console.log(this.source.getFeatures())
    },
    //开始绘制
    getTypeSelected() {
      this.beginDraw = true;
      this.draw && this.map.removeInteraction(this.draw);
      this.peopleLineAddlayer.getSource().clear();
      this.polygonlayer.getSource().clear();
      //再根据typeSelect的值绘制新的Interaction
      // this.addInteraction();
      this.drawStart();
      this.addInteraction();
    },
    stopDraw() {
      this.showTip = false;
@@ -409,22 +604,25 @@
      this.position.w = x + n;
      this.position.h = y + m;
    },
    //绘制开始
    addInteraction() {
      this.tipTitle = "单击左键或右键开始绘画";
      // $("#map")
      //   .off("mousemove")
      //   .mousemove(function (e) {
      //     if (!that.showTip) {
      //       that.showTip = true;
      //     }
      //     that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
      //   });
      $("#map")
        .off("mousemove")
        .mousemove(function(e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
          // console.log(e.clientX);
          // console.log(e.offsetX);
          // console.log(e.pageX);
          // console.log(e.screenX);
          // console.log("================================");
        });

      this.coordinates = [];
      let value = this.typeSelected,
        that = this;

      if (value !== "None") {
        this.draw = new Draw({
          source: this.drawLayer.getSource(),
@@ -432,15 +630,16 @@
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
              width: 3
            })
          }),
          coordinate: function (res) {
          coordinate: function(res) {
            //画线中的点
            that.coordinates.push(res);
            that.coordinates.push(res.coordinate_);
            that.tipTitle = "可继续，或选择最终位置双击结束";
            // console.log(res.coordinate_, 123456);
          },
          coordinateOver: function (res) {
          coordinateOver: function(res) {
            // 结束绘画 处理数据
            // console.log(that.doData(that.coordinates));
            let d = that.doData(that.coordinates);
@@ -449,50 +648,9 @@
            // console.log(that.$store);
            that.$store.commit("setRotesData", d); //用vuex传最终数据
            // that.coordinatesStr = that.doData(that.coordinates);
          },
          }
        });
        this.map.addInteraction(this.draw);
      }
    },
     // 开始绘制多边形
    drawStart(type) {
      type = 'Polygon';
      let that = this;
      var draw;
      if (this.isDraw) {
        this.isDraw = false;
        draw = new Draw({
          source: this.source,
          type: type,
        });
        this.map.addInteraction(this.draw);
        draw.on("drawend", function (evt) {
          that.drawingEnd(evt);
        });
      } else {
        this.source.clear();
        this.map.removeInteraction(this.draw);
        this.isDraw = true;
        this.polygon = [];
        this.polygonPersons = [];
      }
    },
 
    // 构建多边形结束
    drawingEnd(evt) {
      let that = this;
      const geo = evt.feature.getGeometry();
      const t = geo.getType();
      if (t === "Polygon") {
        // 获取坐标点
        const points = geo.getCoordinates();
        points[0].map((item) => {
          that.polygon.push({ lng: item[0], lat: item[1] });
        });
        for (let i = 0; i < this.persons.length; i++) {
          this.polygonPersons.push(this.persons[i]);
        }
        this.isDraw = false;
      }
    },
    doData(val) {
@@ -515,13 +673,20 @@
        }
      }
      str += ")";
      // console.log(str, 111);
      return str;
    },
    addLinesDraw(val) {
      var that = this;
      // if (ringId != null && ringId != "") {
      //   $.ajax({
      //     url: "api/routeIn/routein/selectList",
      //     type: "post",
      //     data: {
      //       id: ringId,
      //     },
      //     dataType: "JSON",
      //     success: function (data) {
      that.peopleLineAddlayer.getSource().clear();
      that.polygonlayer.getSource().clear();
      var entityData = "";
      var entityArr = [];
      entityData = val.match(/\(([^)]*)\)/);
@@ -533,7 +698,7 @@
        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([
            Number(entityData[j].split(" ")[0]),
            Number(entityData[j].split(" ")[1]),
            Number(entityData[j].split(" ")[1])
          ]);
        }
      }
@@ -543,54 +708,79 @@
      var view = ol2d.getView();
      view.setCenter([
        lineCoords[Math.ceil(entityArr.length / 2)][0],
        lineCoords[Math.ceil(entityArr.length / 2)][1],
        lineCoords[Math.ceil(entityArr.length / 2)][1]
      ]);
      view.setZoom(14.5);

      // 要素
      // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
      var feature_LineString = new Feature({
        geometry: new LineString(lineCoords),
        geometry: new LineString(lineCoords)
      });

      feature_LineString.setStyle(
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
            color: "rgba(255, 255, 255, 0.2)"
          }),
          //边线颜色
          stroke: new Stroke({
            color: "rgb(252, 94, 32)",
            width: 5,
          }),
            width: 5
          })
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
      that.polygonlayer.getSource().addFeature(feature_LineString);
      that.butTitle = "重新绘画";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (that.draw != null) {
        that.beginDraw = false;
        that.butTitle = "重新绘画";
        that.draw.abortDrawing_();
        that.draw.controlDrawing(true);
        that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
        $("#map").unbind("mousemove");
        // setTimeout(() => {
        this.tipTitle = "";
        this.showTip = false;
      }
    },
  },
    }
  }
};
</script>

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