+注释

liuyg

2022-03-31 e8ed1c487ea1f9bc19694bc60a0328a7fc76134a

+注释

 src/components/basemap/mainInThere.vue

@@ -43,31 +43,6 @@
  Rotate,
} from "ol/control.js";

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

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

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

// import drawFence from "./drawFence";

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

export default {
  name: "MapInThere",
  components: {
@@ -75,82 +50,14 @@
  },
  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(),
      // }),
      toMoveTime: null,
      oldService: "",
      mapService: [
        // {
        //   id: "",
        //   value: "",
        // show:''
        // },
      ],
      mapService: [],
    };
  },
  // computed: {
  //   mapServiceSee() {
  //   },
  // },
  // watch: {
  //   // openDrawChiose() {
  //   //   console.log(this.openDrawChiose, "openDrawChiose");
  //   // },
  //   mapServiceValue: {
  //     handler(val) {
  //       // console.log("深度监听：", val);
  //       // this.checkDom("getMapDataRefs", (dom) => {
  //       //   dom.setServiceData(this.mapServiceValue);
  //       // });
  //     },
  //     deep: true,
  //   },
  // },
  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: "矢量",
@@ -192,17 +99,10 @@
    window.ol2d = ol2d;

    var view = ol2d.getView();

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

    // view.setCenter([115.85883507433789, 28.708432053474827])
    //设置中心点
    view.setCenter([114.03858862, 27.63088262]);

    //
    //缩放范围
    view.setZoom(18);
    this.view = view;
    // const ol3d = new OLCesium({ map: window.ol2d });
@@ -216,6 +116,7 @@
  },
  methods: {
    clearServiceData() {
      //清空
      this.mapService = [];
    },
    setServiceData(data) {
@@ -257,18 +158,6 @@
          }),
          // }),
        });
        // console.log(data[data.length - 1].service);
        // console.log(that.oldService);
        // let str = "";
        // for (let k in that.oldService) {
        //   if (that.oldService[k] != data[data.length - 1].service[k]) {
        //     // console.log(that.oldService[k]);
        //     // console.log(data[data.length - 1].service[k]);
        //     str += that.oldService[k];
        //   }
        // }
        // console.log("str", str);
        // that.view.setCenter(layer);
        let doit = () => {
          this.toMoveTime = setTimeout(() => {
            console.log(window.ol2d);
@@ -311,30 +200,7 @@
          that.mapService.splice(that.$store.state.map.deleteIndex, 1);
        }
      }
      // console.log(this.mapService);
      // for()
    },
    // addMapService(data) {
    //   let layer = new OlLayerTile({
    //     // source: new XYZ({
    //     //   url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
    //     // }),
    //     // 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", // 注记
    //     }),
    //     // }),
    //   });
    //   this.mapService.push({
    //     layer: layer,
    //   });
    //   window.ol2d.addLayer(layer);
    //   setTimeout(() => {
    //     window.ol2d.removeLayer(layer);
    //   }, 2000);
    // },
  },
};
</script>

 src/components/map/Draw.js

@@ -4,7 +4,10 @@
    var extendStatics = function (d, b) {
      extendStatics =
        Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array &&
        ({
            __proto__: []
          }
          instanceof Array &&
          function (d, b) {
            d.__proto__ = b;
          }) ||
@@ -20,13 +23,14 @@
          "Class extends value " + String(b) + " is not a constructor or null"
        );
      extendStatics(d, b);

      function __() {
        this.constructor = d;
      }
      d.prototype =
        b === null
          ? Object.create(b)
          : ((__.prototype = b.prototype), new __());
        b === null ?
        Object.create(b) :
        ((__.prototype = b.prototype), new __());
    };
  })();
/**
@@ -46,11 +50,21 @@
import MultiPolygon from "ol/geom/MultiPolygon.js";
import Point from "ol/geom/Point.js";
import PointerInteraction from "ol/interaction/Pointer.js";
import Polygon, { fromCircle, makeRegular } from "ol/geom/Polygon.js";
import Polygon, {
  fromCircle,
  makeRegular
} from "ol/geom/Polygon.js";
import VectorLayer from "ol/layer/Vector.js";
import VectorSource from "ol/source/Vector.js";
import { FALSE, TRUE } from "ol/functions.js";
import { always, noModifierKeys, shiftKeyOnly } from "ol/events/condition.js";
import {
  FALSE,
  TRUE
} from "ol/functions.js";
import {
  always,
  noModifierKeys,
  shiftKeyOnly
} from "ol/events/condition.js";
import {
  boundingExtent,
  getBottomLeft,
@@ -58,9 +72,16 @@
  getTopLeft,
  getTopRight,
} from "ol/extent.js";
import { createEditingStyle } from "ol/style/Style.js";
import { fromUserCoordinate, getUserProjection } from "ol/proj.js";
import { squaredDistance as squaredCoordinateDistance } from "ol/coordinate.js";
import {
  createEditingStyle
} from "ol/style/Style.js";
import {
  fromUserCoordinate,
  getUserProjection
} from "ol/proj.js";
import {
  squaredDistance as squaredCoordinateDistance
} from "ol/coordinate.js";
/**
 * @typedef {Object} Options
 * @property {import("ol/geom/GeometryType.js").default} type Geometry type of
@@ -195,7 +216,9 @@
  }
  return DrawEvent;
})(Event);
export { DrawEvent };
export {
  DrawEvent
};
/***
 * @template Return
 * @typedef {import("ol/Observable").OnSignature<import("ol/Observable").EventTypes, import("ol/events/Event.js").default, Return> &
@@ -231,23 +254,23 @@
     */
    _this.coordinate = options.coordinate;
    /***
     * 输出坐标
     * 输出坐标-自定义
     */
    _this.coordinateOver = options.coordinateOver;
    /***
     * 结束绘画
     * 结束绘画-自定义
     */
    _this.overDraw = false;
    /***
     * 控制结束绘画
     * 控制结束绘画-自定义
     */
    _this.isPoint = options.isPoint;
    /***
     * 是否是点
     * 是否是点-自定义
     */
    _this.coordinateOverPoint = options.coordinateOverPoint;
    /***
     * 输出点
     * 输出点-自定义
     */
    _this.on;
    /***
@@ -335,11 +358,11 @@
     * @type {number}
     * @private
     */
    _this.minPoints_ = options.minPoints
      ? options.minPoints
      : _this.mode_ === Mode.POLYGON
      ? 3
      : 2;
    _this.minPoints_ = options.minPoints ?
      options.minPoints :
      _this.mode_ === Mode.POLYGON ?
      3 :
      2;
    /**
     * The number of points that can be drawn before a polygon ring or line string
     * is finished. The default is no restriction.
@@ -347,19 +370,19 @@
     * @private
     */
    _this.maxPoints_ =
      _this.mode_ === Mode.CIRCLE
        ? 2
        : options.maxPoints
        ? options.maxPoints
        : Infinity;
      _this.mode_ === Mode.CIRCLE ?
      2 :
      options.maxPoints ?
      options.maxPoints :
      Infinity;
    /**
     * A function to decide if a potential finish coordinate is permissible
     * @private
     * @type {import("ol/events/condition.js").Condition}
     */
    _this.finishCondition_ = options.finishCondition
      ? options.finishCondition
      : TRUE;
    _this.finishCondition_ = options.finishCondition ?
      options.finishCondition :
      TRUE;
    var geometryFunction = options.geometryFunction;
    if (!geometryFunction) {
      var mode_1 = _this.mode_;
@@ -371,9 +394,10 @@
         * @return {import("ol/geom/SimpleGeometry.js").default} A geometry.
         */
        geometryFunction = function (coordinates, geometry, projection) {
          var circle = geometry
            ? /** @type {Circle} */ (geometry)
            : new Circle([NaN, NaN]);
          var circle = geometry ?
            /** @type {Circle} */
            (geometry) :
            new Circle([NaN, NaN]);
          var center = fromUserCoordinate(coordinates[0], projection);
          var squaredLength = squaredCoordinateDistance(
            center,
@@ -477,9 +501,9 @@
     * @type {number}
     * @private
     */
    _this.squaredClickTolerance_ = options.clickTolerance
      ? options.clickTolerance * options.clickTolerance
      : 36;
    _this.squaredClickTolerance_ = options.clickTolerance ?
      options.clickTolerance * options.clickTolerance :
      36;
    /**
     * Draw overlay where our sketch features are drawn.
     * @type {VectorLayer}
@@ -512,9 +536,9 @@
    if (options.freehand) {
      _this.freehandCondition_ = always;
    } else {
      _this.freehandCondition_ = options.freehandCondition
        ? options.freehandCondition
        : shiftKeyOnly;
      _this.freehandCondition_ = options.freehandCondition ?
        options.freehandCondition :
        shiftKeyOnly;
    }
    _this.addChangeListener(InteractionProperty.ACTIVE, _this.updateState_);
    return _this;
@@ -728,9 +752,9 @@
      var dx = downPx[0] - clickPx[0];
      var dy = downPx[1] - clickPx[1];
      var squaredDistance = dx * dx + dy * dy;
      this.shouldHandle_ = this.freehand_
        ? squaredDistance > this.squaredClickTolerance_
        : squaredDistance <= this.squaredClickTolerance_;
      this.shouldHandle_ = this.freehand_ ?
        squaredDistance > this.squaredClickTolerance_ :
        squaredDistance <= this.squaredClickTolerance_;
      if (!this.shouldHandle_) {
        return;
      }
@@ -837,7 +861,9 @@
    if (this.mode_ === Mode.POINT) {
      this.sketchCoords_ = start.slice();
    } else if (this.mode_ === Mode.POLYGON) {
      this.sketchCoords_ = [[start.slice(), start.slice()]];
      this.sketchCoords_ = [
        [start.slice(), start.slice()]
      ];
      this.sketchLineCoords_ = this.sketchCoords_[0];
    } else {
      this.sketchCoords_ = [start.slice(), start.slice()];
@@ -886,7 +912,8 @@
    last[0] = coordinate[0];
    last[1] = coordinate[1];
    this.geometryFunction_(
      /** @type {!LineCoordType} */ (this.sketchCoords_),
      /** @type {!LineCoordType} */
      (this.sketchCoords_),
      geometry,
      projection
    );
@@ -898,7 +925,7 @@
      geometry.getType() === GeometryType.POLYGON &&
      this.mode_ !== Mode.POLYGON
    ) {
      this.createOrUpdateCustomSketchLine_(/** @type {Polygon} */ (geometry));
      this.createOrUpdateCustomSketchLine_( /** @type {Polygon} */ (geometry));
    } else if (this.sketchLineCoords_) {
      var sketchLineGeom = this.sketchLine_.getGeometry();
      sketchLineGeom.setCoordinates(this.sketchLineCoords_);
@@ -973,7 +1000,7 @@
      }
      this.geometryFunction_(coordinates, geometry, projection);
      if (geometry.getType() === GeometryType.POLYGON && this.sketchLine_) {
        this.createOrUpdateCustomSketchLine_(/** @type {Polygon} */ (geometry));
        this.createOrUpdateCustomSketchLine_( /** @type {Polygon} */ (geometry));
      }
    } else if (mode === Mode.POLYGON) {
      coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0];
@@ -1013,22 +1040,23 @@
      this.geometryFunction_(coordinates, geometry, projection);
    } else if (this.mode_ === Mode.POLYGON) {
      // remove the redundant last point in ring
      /** @type {PolyCoordType} */ (coordinates)[0].pop();
      /** @type {PolyCoordType} */
      (coordinates)[0].pop();
      this.geometryFunction_(coordinates, geometry, projection);
      coordinates = geometry.getCoordinates();
    }
    // cast multi-part geometries
    if (this.type_ === GeometryType.MULTI_POINT) {
      sketchFeature.setGeometry(
        new MultiPoint([/** @type {PointCoordType} */ (coordinates)])
        new MultiPoint([ /** @type {PointCoordType} */ (coordinates)])
      );
    } else if (this.type_ === GeometryType.MULTI_LINE_STRING) {
      sketchFeature.setGeometry(
        new MultiLineString([/** @type {LineCoordType} */ (coordinates)])
        new MultiLineString([ /** @type {LineCoordType} */ (coordinates)])
      );
    } else if (this.type_ === GeometryType.MULTI_POLYGON) {
      sketchFeature.setGeometry(
        new MultiPolygon([/** @type {PolyCoordType} */ (coordinates)])
        new MultiPolygon([ /** @type {PolyCoordType} */ (coordinates)])
      );
    }
    // First dispatch event to allow full set up of feature
@@ -1086,9 +1114,9 @@
      sketchCoords = /** @type {LineCoordType} */ (this.sketchCoords_);
    } else if (mode === Mode.POLYGON) {
      sketchCoords =
        this.sketchCoords_ && this.sketchCoords_.length
          ? /** @type {PolyCoordType} */ (this.sketchCoords_)[0]
          : [];
        this.sketchCoords_ && this.sketchCoords_.length ?
        /** @type {PolyCoordType} */
        (this.sketchCoords_)[0] : [];
    } else {
      return;
    }
@@ -1189,17 +1217,20 @@
export function createRegularPolygon(opt_sides, opt_angle) {
  return function (coordinates, opt_geometry, projection) {
    var center = fromUserCoordinate(
      /** @type {LineCoordType} */ (coordinates)[0],
      /** @type {LineCoordType} */
      (coordinates)[0],
      projection
    );
    var end = fromUserCoordinate(
      /** @type {LineCoordType} */ (coordinates)[coordinates.length - 1],
      /** @type {LineCoordType} */
      (coordinates)[coordinates.length - 1],
      projection
    );
    var radius = Math.sqrt(squaredCoordinateDistance(center, end));
    var geometry = opt_geometry
      ? /** @type {Polygon} */ (opt_geometry)
      : fromCircle(new Circle(center), opt_sides);
    var geometry = opt_geometry ?
      /** @type {Polygon} */
      (opt_geometry) :
      fromCircle(new Circle(center), opt_sides);
    var angle = opt_angle;
    if (!opt_angle && opt_angle !== 0) {
      var x = end[0] - center[0];
@@ -1224,7 +1255,8 @@
export function createBox() {
  return function (coordinates, opt_geometry, projection) {
    var extent = boundingExtent(
      /** @type {LineCoordType} */ ([
      /** @type {LineCoordType} */
      ([
        coordinates[0],
        coordinates[coordinates.length - 1],
      ]).map(function (coordinate) {

 src/components/map/mainInThere.vue

@@ -475,6 +475,7 @@
      } else {
        this.notNow = true;
      }
      //notNow来确定是修改值还是增加值 是否显示$("#dataConfirm").show(100);
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径按钮");
@@ -485,6 +486,7 @@
      }
    },
    controlBut(openName, notNow) {
      //判断哪个dom打开
      this.closeOurBut();
      this[openName] = true;
      $("#" + openName).show();
@@ -494,6 +496,7 @@
      }
    },
    closeOurBut(open) {
      //整体关闭dom
      $("#dataConfirm").hide();
      $("#openDrawPoint").hide();
      $("#openDrawLine").hide();

 src/views/hd/baseMap.vue

@@ -63,7 +63,6 @@
        <baseMapMap
          ref="baseMapMap"
          id="baseMapMap"
          @setMapData="setMapData"
          @changeMapSI="changeMapSI"
        ></baseMapMap>
      </template>
@@ -323,10 +322,6 @@
      this.mapServiceValueOnce = "";
      this.chouseBaseMapNameOnce = "";
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
    rowSave(row, done, loading) {
      if (row.haveBaseMap == "") {
        this.$message({
@@ -339,6 +334,7 @@
      let names = "",
        urls = "",
        leng = this.mapServiceValue.length - 1;
      //处理结果
      for (let k in this.mapServiceValue) {
        names += this.mapServiceValue[k].name;
        urls += this.mapServiceValue[k].service;

 src/views/hd/getMapDataInThere.vue

@@ -166,24 +166,31 @@
        that.ourDatas[k].id = +k + 1;
      }
    }
    //判断dom是否存在
    this.checkDom("getMapDataRefs", (dom) => {
      //提供数据
      dom.onceOnlodad(that.ourDatas);
    });
    this.nowId = +this.ourDatas.length + 1;
  },
  methods: {
    openDrawLineMethod() {
      //添加线路的对象
      let id = this.nowId++;
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
        name: "",
        notPath: false,
        //notpath判断是否验证通过的提示 2 为不通过
        isLine: true,
        //isLine来判断是否是线
        id: +id,
        //id确定不重复
      });
    },
    openDrawPointMethod() {
      //添加点的对象
      let id = this.nowId++;
      this.ourDatas.push({
        label: "标点" + +id,
@@ -195,9 +202,11 @@
      });
    },
    deleteRowOurs(index) {
      //删除
      this.ourDatas.splice(index, 1);
    },
    backMapDataOurData(val, index) {
      //在地图内useMapData方法中触发
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
      } else if (val == "point") {
@@ -211,6 +220,7 @@
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      //开始对地图做操作
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);