From e8ed1c487ea1f9bc19694bc60a0328a7fc76134a Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 31 Mar 2022 11:40:00 +0800
Subject: [PATCH] +注释
---
src/components/map/mainInThere.vue | 3
src/components/basemap/mainInThere.vue | 142 -----------------------
src/views/hd/baseMap.vue | 6
src/components/map/Draw.js | 148 +++++++++++++++---------
src/views/hd/getMapDataInThere.vue | 10 +
5 files changed, 108 insertions(+), 201 deletions(-)
diff --git a/src/components/basemap/mainInThere.vue b/src/components/basemap/mainInThere.vue
index b91a577..d0715ff 100644
--- a/src/components/basemap/mainInThere.vue
+++ b/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>
diff --git a/src/components/map/Draw.js b/src/components/map/Draw.js
index ea28ce3..81a73b6 100644
--- a/src/components/map/Draw.js
+++ b/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) {
diff --git a/src/components/map/mainInThere.vue b/src/components/map/mainInThere.vue
index 2405f20..ef202d9 100644
--- a/src/components/map/mainInThere.vue
+++ b/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();
diff --git a/src/views/hd/baseMap.vue b/src/views/hd/baseMap.vue
index 8b51377..c8ac185 100644
--- a/src/views/hd/baseMap.vue
+++ b/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;
diff --git a/src/views/hd/getMapDataInThere.vue b/src/views/hd/getMapDataInThere.vue
index ab3f294..b3aac79 100644
--- a/src/views/hd/getMapDataInThere.vue
+++ b/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);
--
Gitblit v1.9.3