From 6fe1921d3958191e6dd6f36c7a609586d5255d1d Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 17 Jan 2022 11:21:46 +0800
Subject: [PATCH] +活动地图更改
---
src/views/hd/hd.vue | 37
vue.config.js | 3
src/components/map/mainInThere.vue | 794 ++++++++++++++++++++++++++++++++++++
public/img/dingwei/dingwei6.png | 0
src/views/hd/getMapDataInThere.vue | 476 +++++++++++++++++++++
src/views/hd/getMapData.vue | 2
6 files changed, 1,293 insertions(+), 19 deletions(-)
diff --git a/public/img/dingwei/dingwei6.png b/public/img/dingwei/dingwei6.png
new file mode 100644
index 0000000..dfcb8d4
--- /dev/null
+++ b/public/img/dingwei/dingwei6.png
Binary files differ
diff --git a/src/components/map/mainInThere.vue b/src/components/map/mainInThere.vue
new file mode 100644
index 0000000..ab41e1c
--- /dev/null
+++ b/src/components/map/mainInThere.vue
@@ -0,0 +1,794 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: song
+ * @Date: 2021-04-08 15:14:57
+ * @LastEditors: song
+ * @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="[
+ 'openDrawsb',
+ openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
+ ]"
+ >规划路线</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>
+ </div>
+ <el-button-group id="dataConfirm" style="display: none">
+ <el-button
+ type="success"
+ icon="el-icon-check"
+ @click="useMapData"
+ v-show="notNow"
+ >确定选择</el-button
+ >
+ <el-button
+ type="danger"
+ @click="clearUseMapData"
+ icon="el-icon-refresh-right"
+ >清空</el-button
+ >
+ </el-button-group>
+ <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
+ </div>
+</template>
+<script>
+import OLCesium from "olcs/OLCesium.js";
+import "ol/ol.css";
+import OlView from "ol/View.js";
+import XYZ from "ol/source/XYZ";
+import OlLayerTile from "ol/layer/Tile.js";
+import OlMap from "ol/Map.js";
+import tip from "./tip.vue";
+import {
+ // 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 { 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: {
+ 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---";
+ }
+ },
+ },
+ // 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", // 注记
+ }),
+ }),
+ ],
+
+ // 注意地图控件的写法
+ 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;
+
+ 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 });
+ 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;
+ }
+ 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) {
+ this.closeOurBut();
+ this[openName] = true;
+ $("#" + openName).show();
+ $("#openTitle").show();
+ if (!notNow) {
+ $("#dataConfirm").show(100);
+ }
+ },
+ closeOurBut(open) {
+ $("#dataConfirm").hide();
+ $("#openDrawPoint").hide();
+ $("#openDrawLine").hide();
+ $("#openTitle").hide();
+ this.openDrawLine = false;
+ this.openDrawPoint = false;
+ if (open) {
+ this.openTitle = "";
+ this.$parent.closeOpenedMap(); //开放按钮
+ }
+ },
+ //取消按钮
+ stopDrawOur() {
+ this.closeOurBut(true);
+ },
+ //确认数据
+ useMapData() {
+ //返回用数据
+ // console.log(this.openDrawChiose, this.nowIndex);
+ this.$parent.MapDataShow = false;
+ let val;
+ if (this.openDrawChiose == "openDrawLine") {
+ val = "line";
+ } else if (this.openDrawChiose == "openDrawPoint") {
+ val = "point";
+ } else {
+ val = "notData";
+ }
+ 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;
+ }
+ #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;
+ }
+ }
+ #dataConfirm {
+ position: absolute;
+ top: 43px;
+ // left: calc(50% + 82px);
+ left: 564px;
+ z-index: 3 !important;
+ }
+}
+</style>
diff --git a/src/views/hd/getMapData.vue b/src/views/hd/getMapData.vue
index 1c25376..59a2430 100644
--- a/src/views/hd/getMapData.vue
+++ b/src/views/hd/getMapData.vue
@@ -394,7 +394,7 @@
};
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.flexCenter {
display: flex;
align-items: center;
diff --git a/src/views/hd/getMapDataInThere.vue b/src/views/hd/getMapDataInThere.vue
new file mode 100644
index 0000000..b7e0357
--- /dev/null
+++ b/src/views/hd/getMapDataInThere.vue
@@ -0,0 +1,476 @@
+<template>
+ <div class="getMapData" :key="Refresh">
+ <MapInThere ref="getMapDataRefs" />
+ <div class="controlMapWindow">
+ <div class="controlMapWindowTitle">
+ <el-button-group>
+ <el-button
+ type="primary"
+ icon="el-icon-finished"
+ @click="openDrawLineMethod"
+ :disabled="fromView"
+ >新增路线</el-button
+ >
+ <el-button
+ type="primary"
+ @click="openDrawPointMethod"
+ icon="el-icon-coordinate"
+ :disabled="fromView"
+ >新增标点</el-button
+ >
+ </el-button-group>
+ </div>
+ <div class="controlMapWindowmain">
+ <transition-group
+ :name="animateName"
+ :enter-active-class="animateEnter"
+ :leave-active-class="animateLeave"
+ >
+ <div
+ class="getMapData__once"
+ v-for="(item, index) in ourDatas"
+ :key="index"
+ >
+ <div class="getMapData_once_label">
+ <el-tag> {{ item.label }}</el-tag>
+ </div>
+ <el-input
+ :class="[
+ 'getMapData_once_name',
+ item.notPath == 2 ? 'notPath' : '',
+ ]"
+ @blur="myRules(index)"
+ v-model="item.name"
+ placeholder="请输入路径名称"
+ :disabled="fromView"
+ ></el-input>
+ <transition
+ :name="animateNames"
+ :enter-active-class="animateEnters"
+ :leave-active-class="animateLeaves"
+ >
+ <div class="notPathTitile" v-show="item.notPath == 2">
+ 请输入名称或选择路径
+ </div>
+ </transition>
+ <el-button
+ class="getMapData_once_get"
+ :type="item.value ? 'success' : 'primary'"
+ :title="item.value ? '重新选择' : '点击选择'"
+ :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
+ @click="openMap(item.label, index, item.value)"
+ :disabled="MapDataShow || fromView"
+ ></el-button>
+ <el-button
+ class="getMapData_once_endBut"
+ icon="el-icon-delete"
+ circle
+ @click="deleteRowOurs(index)"
+ :disabled="MapDataShow || fromView"
+ ></el-button>
+ </div>
+ </transition-group>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import MapInThere from "@/components/map/mainInThere.vue";
+export default {
+ name: "getMapData",
+ components: {
+ MapInThere,
+ },
+ computed: {
+ ...mapGetters(["rotesData", "pointData"]),
+ },
+ watch: {
+ ourDatas: {
+ handler(val) {
+ // console.log("深度监听：", val);
+ this.checkDom("getMapDataRefs", (dom) => {
+ dom.onceOnlodad(val);
+ });
+ },
+ deep: true,
+ },
+ },
+ data() {
+ return {
+ Refresh: false,
+ // routers: [
+ // {
+ // label: "路径1",
+ // value: "",
+ // routerName: "",
+ // notPath: true,
+ // },
+ // ],
+ // potions: [
+ // {
+ // label: "标点1",
+ // value: "",
+ // potionName: "",
+ // notPath: true,
+ // },
+ // ],
+ //动画效果
+ animateName: "custom-classes-transition",
+ animateEnter: "animated fadeIn",
+ animateLeave: "animated fadeOut",
+ //未输入动画效果
+ animateName: "custom-classes-transition",
+ animateEnter: "animated fadeInDown",
+ animateLeave: "animated fadeOut",
+ openTitle: "路径1",
+ MapDataShow: false,
+ fromView: false,
+ ourDatas: [
+ // {
+ // label: "路径2",
+ // value:
+ // "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
+ // name: "xxx2",
+ // notPath: false,
+ // isLine: true,
+ // id: 2,
+ // },
+ // {
+ // label: "路径3",
+ // value:
+ // "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
+ // name: "xxx3",
+ // notPath: false,
+ // isLine: true,
+ // id: 3,
+ // },
+ // {
+ // label: "标点4",
+ // value: [114.03887343706977, 27.63000553765213],
+ // name: "喜迎校庆选点1",
+ // notPath: false,
+ // isLine: false,
+ // id: 4,
+ // },
+ ],
+ nowId: 0,
+ };
+ },
+ mounted() {
+ // this.$emit("setMapData", [this.routers, this.potions]);
+ let that = this;
+ if (that.ourDatas.length != 0) {
+ for (let k in that.ourDatas) {
+ that.ourDatas[k].id = +k + 1;
+ }
+ }
+ 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,
+ isLine: true,
+ id: +id,
+ });
+ },
+ openDrawPointMethod() {
+ let id = this.nowId++;
+ this.ourDatas.push({
+ label: "标点" + +id,
+ value: "",
+ name: "",
+ notPath: false,
+ isLine: false,
+ id: +id,
+ });
+ },
+ deleteRowOurs(index) {
+ this.ourDatas.splice(index, 1);
+ },
+ backMapDataOurData(val, index) {
+ if (val == "line") {
+ this.ourDatas[index].value = this.rotesData;
+ } else if (val == "point") {
+ this.ourDatas[index].value = this.pointData;
+ } else if (val == "notData") {
+ this.ourDatas[index].value = "";
+ }
+ //单个验证
+ this.myRules(index);
+ },
+ //以上是添加数据集方法
+ //选择map数据
+ openMap(val, num, value) {
+ this.MapDataShow = true;
+ this.openTitle = val;
+ this.$refs.getMapDataRefs.init(val, num, value);
+ },
+ closeOpenedMap() {
+ this.MapDataShow = false;
+ // this.openTitle = "";
+ },
+ //下面是旧代码
+ editInit(val) {
+ //查看情况逆转String成为当页可使用数据,并做动作
+ this.reverseMapData(val);
+ },
+ viewInit(val) {
+ //查看情况逆转String成为当页可使用数据,并做动作
+ this.reverseMapData(val);
+ this.fromView = true; //查看数据不可改
+ },
+ reverseMapData(val, label) {
+ //解释数据
+ let rname = val[0][0].split(";"),
+ r = val[0][1].split(";"),
+ pname = val[1][0].split(";"),
+ p = val[1][1].split(";");
+ this.ourDatas = [];
+ for (let k in r) {
+ this.ourDatas.push({
+ label: "路径" + (+k + 1),
+ value: r[k],
+ name: rname[k],
+ notPath: false,
+ isLine: true,
+ id: this.ourDatas.length,
+ });
+ }
+ for (let k in p) {
+ let potion = p[k].split(",");
+ this.ourDatas.push({
+ label: "标点" + (+k + 1),
+ value: [+potion[0], +potion[1]],
+ name: pname[k],
+ notPath: false,
+ isLine: false,
+ id: this.ourDatas.length,
+ });
+ }
+ },
+ myRules(index) {
+ //单个验证
+ if (this.ourDatas[index].name && this.ourDatas[index].value) {
+ this.ourDatas[index].notPath = false;
+ } else {
+ this.ourDatas[index].notPath = 2;
+ }
+ },
+ //自定义验证
+ myRulesUse() {
+ //把一个数组拆开两个来对应之前的数据
+ let ourData = this.ourDatas;
+ let lineBefor = [];
+ let pointBefor = [];
+ for (let o in ourData) {
+ if (ourData[o].isLine) {
+ lineBefor.push(ourData[o]);
+ } else {
+ pointBefor.push(ourData[o]);
+ }
+ }
+ let line = this.changeMapData(lineBefor, "name");
+ let point = this.changeMapData(pointBefor, "name");
+ if (line[0] == "namenot" || point[0] == "namenot") {
+ //需要显示验证失败合集
+ let errorId = [];
+ if (line[0] == "namenot") {
+ errorId.push(...line[1]);
+ }
+ if (point[0] == "namenot") {
+ errorId.push(...point[1]);
+ }
+
+ for (let x in this.ourDatas) {
+ let flog = true;
+ for (let k in errorId) {
+ if (errorId[k] == this.ourDatas[x].id) {
+ flog = false;
+ }
+ }
+ if (flog) {
+ this.ourDatas[x].notPath = false;
+ } else {
+ this.ourDatas[x].notPath = 2;
+ }
+ }
+ return false;
+ } else {
+ // console.log("通过");
+ for (let i in this.ourDatas) {
+ this.ourDatas[i].notPath = false;
+ }
+ return [line, point];
+ }
+ },
+ //规则
+ changeMapData(item, names) {
+ let name = "",
+ value = "",
+ notData = [];
+ let itemLength = item.length - 1;
+ // console.log(item, names, 7777);
+ for (let k in item) {
+ let inItem = item[k];
+ for (let kin in inItem) {
+ if (inItem[kin] == "" && kin != "notPath" && kin != "isLine") {
+ notData.push(inItem.id);
+ break;
+ }
+ if (kin == names) {
+ name += inItem[kin];
+ if (k != itemLength) {
+ name += ";";
+ }
+ }
+ if (kin == "value") {
+ value += inItem[kin];
+ if (k != itemLength) {
+ value += ";";
+ }
+ }
+ }
+ }
+ return notData.length > 0 ? [names + "not", notData] : [name, value];
+ },
+ checkDom(name, fn) {
+ // 声明定时器
+ let that = this;
+ var timer = null;
+ // 检查dom是否执行完成
+ function checkDom() {
+ let dom = that.$refs[name];
+ if (dom) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer);
+ }
+ if (fn) {
+ //回调函数
+ fn(dom);
+ return;
+ } else {
+ return dom;
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 100);
+ }
+ }
+ // 首次执行
+ checkDom();
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+.flexCenter {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.getMapData {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .controlMapWindow {
+ width: 320px;
+ height: calc(100% - 20px);
+ // border: 1px solid red;
+ // box-shadow: 2px 0 15px 2px #acacac;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ background-color: #fff;
+ border-radius: 0 15px 15px 0;
+ padding: 10px 10px;
+ overflow: hidden;
+ .controlMapWindowTitle {
+ height: 40px;
+ width: 100%;
+ margin-bottom: 5px;
+ @extend .flexCenter;
+ }
+ .controlMapWindowmain {
+ width: 100%;
+ height: calc(100% - 45px);
+ overflow-x: hidden;
+ overflow-y: scroll;
+ .getMapData_left {
+ width: 50%;
+ height: 40px;
+ box-sizing: border-box;
+ }
+ .getMapData_right {
+ width: 50%;
+ height: 40px;
+ box-sizing: border-box;
+ }
+ .getMapData__once {
+ width: 100%;
+ height: 40px;
+ margin-bottom: 10px;
+ position: relative;
+ @extend .flexCenter;
+ flex-direction: row;
+ .getMapData_once_label {
+ padding-left: 15px;
+ width: 90px;
+ height: 100%;
+ @extend .flexCenter;
+ justify-content: space-around;
+ }
+ .getMapData_once_name {
+ width: calc(100% - 130px);
+ }
+ .getMapData_once_get {
+ padding: 6px 16px;
+ font-size: 20px;
+ }
+ .notPathTitile {
+ position: absolute;
+ left: 90px;
+ bottom: -20px;
+ color: red;
+ font-size: 1px;
+ }
+ }
+ }
+ }
+ // 验证
+ .notPath {
+ // border-bottom: 0.5px solid red;
+ }
+}
+
+//过度动画
+.list-enter {
+ opacity: 0;
+ transform: translateY(10px);
+}
+.list-leave-to {
+ opacity: 0;
+ transform: translateY(-10px);
+}
+
+.list-enter-to,
+.list-leave {
+ opacity: 1;
+}
+ .list-enter-active,
+.list-leave-active {
+ transition: all 0.3s;
+}
+</style>
diff --git a/src/views/hd/hd.vue b/src/views/hd/hd.vue
index 089d4ac..907acfc 100644
--- a/src/views/hd/hd.vue
+++ b/src/views/hd/hd.vue
@@ -32,14 +32,11 @@
</el-button>
</template> -->
<template slot-scope="{ type, disabled }" slot="lineForm">
- <!-- <div class="mapClassMain" style="width: 100%; height: 400px">
- <Map ref="modalForm" />
- </div> -->
- <getMapData
+ <getMapDataInThere
ref="getMapData"
id="getMapData"
@setMapData="setMapData"
- ></getMapData>
+ ></getMapDataInThere>
</template>
</avue-crud>
</basic-container>
@@ -50,11 +47,13 @@
import { mapGetters } from "vuex";
// import Map from "@/components/map/main.vue";
import getMapData from "./getMapData.vue";
+import getMapDataInThere from "./getMapDataInThere.vue";
export default {
components: {
// Map,
getMapData,
+ getMapDataInThere,
},
data() {
return {
@@ -129,17 +128,6 @@
action: "/api/blade-resource/oss/endpoint/put-file",
},
{
- label: "选择路径和标点",
- labelWidth: "0",
- prop: "line",
- className: "mapClass",
- hide: true,
- display: true,
- span: 24,
- formslot: true,
- addDisplay: true,
- },
- {
label: "介绍",
prop: "context",
component: "AvueUeditor",
@@ -152,6 +140,17 @@
},
minRows: 5,
span: 24,
+ },
+ {
+ label: "选择路径和标点",
+ labelWidth: "0",
+ prop: "line",
+ className: "mapClass",
+ hide: true,
+ display: true,
+ span: 24,
+ formslot: true,
+ addDisplay: true,
},
// {
// label: "路线",活动
@@ -205,6 +204,7 @@
}
row.tpurl = d.join(",");
let outMapData = this.$refs.getMapData.myRulesUse();
+ // console.log(outMapData);
if (!outMapData) {
loading();
return;
@@ -213,6 +213,9 @@
row["lx"] = outMapData[0][1];
row["addressname"] = outMapData[1][0];
row["address"] = outMapData[1][1];
+ // console.log(row);
+ // loading();
+ // return;
add(row).then(
() => {
this.onLoad(this.page);
@@ -398,6 +401,6 @@
width: calc(100% + 90px);
position: relative;
left: -90px;
- height: auto;
+ height: 400px;
}
</style>
diff --git a/vue.config.js b/vue.config.js
index 59b956a..ea57294 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,7 +26,8 @@
proxy: {
"/api": {
//本地服务接口地址
- target: "http://192.168.0.107:80",
+ // target: "http://192.168.0.107:80",
+ target: "http://171.34.197.243:790",
// target: 'http://localhost:80',
//远程演示服务地址,可用于直接启动项目
//target: 'https://saber.bladex.vip/api',
--
Gitblit v1.9.3