From 03df59a72de4354fcc731675c53dd2805c2ec8b1 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 21 Jul 2022 17:26:02 +0800
Subject: [PATCH] 数据新增调整
---
src/components/map/mainInThere.vue | 1471 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 732 insertions(+), 739 deletions(-)
diff --git a/src/components/map/mainInThere.vue b/src/components/map/mainInThere.vue
index ef202d9..2beefde 100644
--- a/src/components/map/mainInThere.vue
+++ b/src/components/map/mainInThere.vue
@@ -7,788 +7,781 @@
* @LastEditTime: 2021-04-24 11:59:43
-->
<template>
- <div id="map">
- <div class="controlMap">
- <el-button-group v-if="false">
- <el-button
- type="primary"
- icon="el-icon-finished"
- @click="openDrawLineMethod"
- :class="[
+ <div id="map">
+ <div class="controlMap">
+ <el-button-group v-if="false">
+ <el-button
+ type="primary"
+ icon="el-icon-finished"
+ @click="openDrawLineMethod"
+ :class="[
'openDrawsb',
openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
]"
- >规划路线</el-button
- >
- <el-button
- type="primary"
- @click="openDrawPointMethod"
- icon="el-icon-coordinate"
- :class="[
+ >规划路线</el-button>
+ <el-button
+ type="primary"
+ @click="openDrawPointMethod"
+ icon="el-icon-coordinate"
+ :class="[
'openDrawsb',
openDrawChiose == 'openDrawPoint' ? 'activeDraw' : '',
]"
- >规划标点</el-button
- >
- </el-button-group>
- <div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
- <el-button-group id="openDrawLine" style="display: none">
- <el-button
- type="primary"
- icon="el-icon-edit"
- @click="getTypeSelected"
- :disabled="beginDraw"
- >{{ butTitle }}</el-button
- >
- <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
- >取消</el-button
- >
- </el-button-group>
- <el-button-group id="openDrawPoint" style="display: none">
- <el-button
- type="primary"
- icon="el-icon-edit"
- @click="getTypeSelectedPoint"
- :disabled="beginDraw"
- >{{ butTitlePoint }}</el-button
- >
- <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
- >取消</el-button
- >
- </el-button-group>
+ >规划标点</el-button>
+ </el-button-group>
+ <div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
+ <el-button-group id="openDrawLine" style="display: none">
+ <el-button
+ type="primary"
+ icon="el-icon-edit"
+ @click="getTypeSelected"
+ :disabled="beginDraw"
+ >{{ butTitle }}</el-button>
+ <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete">取消</el-button>
+ </el-button-group>
+ <el-button-group id="openDrawPoint" style="display: none">
+ <el-button
+ type="primary"
+ icon="el-icon-edit"
+ @click="getTypeSelectedPoint"
+ :disabled="beginDraw"
+ >{{ butTitlePoint }}</el-button>
+ <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete">取消</el-button>
+ </el-button-group>
+ </div>
+ <el-button-group id="dataConfirm" style="display: none">
+ <el-button type="success" icon="el-icon-check" @click="useMapData">确定选择</el-button>
+ <!-- v-show="notNow" -->
+ <el-button type="danger" @click="clearUseMapData" icon="el-icon-refresh-right">清空</el-button>
+ </el-button-group>
+ <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
</div>
- <el-button-group id="dataConfirm" style="display: none">
- <el-button type="success" icon="el-icon-check" @click="useMapData"
- >确定选择</el-button
- >
- <!-- v-show="notNow" -->
- <el-button
- type="danger"
- @click="clearUseMapData"
- icon="el-icon-refresh-right"
- >清空</el-button
- >
- </el-button-group>
- <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
- </div>
</template>
<script>
-import OLCesium from "olcs/OLCesium.js";
-import "ol/ol.css";
-import OlView from "ol/View.js";
-import XYZ from "ol/source/XYZ";
-import OlLayerTile from "ol/layer/Tile.js";
-import OlMap from "ol/Map.js";
-import tip from "./tip.vue";
+import OLCesium from "olcs/OLCesium.js"
+import "ol/ol.css"
+import OlView from "ol/View.js"
+import XYZ from "ol/source/XYZ"
+import OlLayerTile from "ol/layer/Tile.js"
+import OlMap from "ol/Map.js"
+import tip from "./tip.vue"
import {
- // eslint-disable-next-line no-unused-vars
- defaults as OlControlDefaults,
- defaults,
- // 全屏控件
- FullScreen,
- // 比例尺控件
- ScaleLine,
- // 缩放滚动条控件
- // eslint-disable-next-line no-unused-vars
- ZoomSlider,
- // 鼠标位置控件
- // eslint-disable-next-line no-unused-vars
- MousePosition,
- // -地图属性控件
- Attribution,
- // 鹰眼控件
- // eslint-disable-next-line no-unused-vars
- OverviewMap,
- // 缩放到范围控件
- // eslint-disable-next-line no-unused-vars
- ZoomToExtent,
- Rotate,
-} from "ol/control.js";
+ // eslint-disable-next-line no-unused-vars
+ defaults as OlControlDefaults,
+ defaults,
+ // 全屏控件
+ FullScreen,
+ // 比例尺控件
+ ScaleLine,
+ // 缩放滚动条控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomSlider,
+ // 鼠标位置控件
+ // eslint-disable-next-line no-unused-vars
+ MousePosition,
+ // -地图属性控件
+ Attribution,
+ // 鹰眼控件
+ // eslint-disable-next-line no-unused-vars
+ OverviewMap,
+ // 缩放到范围控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomToExtent,
+ Rotate,
+} from "ol/control.js"
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector"
+import VectorSource from "ol/source/Vector"
-import { OSM, TileWMS, Vector } from "ol/source";
+import { OSM, TileWMS, Vector } from "ol/source"
// import Draw from "ol/interaction/Draw";
-import Draw from "./Draw";
+import Draw from "./Draw"
-import Feature from "ol/Feature.js";
-import Point from "ol/geom/Point.js";
-import LineString from "ol/geom/LineString.js";
-import { Icon, Style, Fill, Stroke } from "ol/style.js";
+import Feature from "ol/Feature.js"
+import Point from "ol/geom/Point.js"
+import LineString from "ol/geom/LineString.js"
+import { Icon, Style, Fill, Stroke } from "ol/style.js"
// import drawFence from "./drawFence";
-import OlFeature from "ol/Feature";
-import OlGeomPoint from "ol/geom/Point";
+import OlFeature from "ol/Feature"
+import OlGeomPoint from "ol/geom/Point"
// import OlLayerVector from "ol/layer/Vector";
// import OlSourceVector from "ol/source/Vector";
-import OlStyleStyle from "ol/style/Style";
-import OlStyleIcon from "ol/style/Icon";
+import OlStyleStyle from "ol/style/Style"
+import OlStyleIcon from "ol/style/Icon"
// // 用来添加相关文字描述的
-import OlStyleText from "ol/style/Text";
-import OlStyleFill from "ol/style/Fill";
+import OlStyleText from "ol/style/Text"
+import OlStyleFill from "ol/style/Fill"
// import Cesium from "libs/Cesium/Cesium.js";
export default {
- name: "MapInThere",
- components: {
- tip,
- },
- data() {
- return {
- gunAddlayer: new VectorLayer({
- // 图标图层
- zIndex: 22,
- source: new VectorSource(),
- }),
- peopleAddlayer: new VectorLayer({
- // 图标图层
- zIndex: 22,
- source: new VectorSource(),
- }),
- carAddlayer: new VectorLayer({
- // 图标图层
- zIndex: 22,
- source: new VectorSource(),
- }),
- // peopleLineAddlayer: new VectorLayer({
- // // 图标图层
- // zIndex: 22,
- // source: new VectorSource(),
- // }),
- beginsPoint: new VectorLayer({
- // 图标图层
- zIndex: 22,
- source: new VectorSource(),
- }),
- DrawLayer: new VectorLayer({
- // 图标图层
- // zIndex: 1000,
- source: new VectorSource(),
- }),
- peopleLineAddlayer: null,
-
- // 存储新增点，线，面，数据的地方
- // polygonData: [],
- // polygonFlag: false,
- // editToolbar: null,
- // addPolygonEntitys: null,
-
- typeSelected: "LineString",
- // drawLayer: null,
- draw: null,
- coordinates: [],
- coordinatesStr: "",
- beginDraw: false,
- butTitle: "开始绘画",
- view: "",
- // map: null,
-
- showTip: false,
- tipTitle: "",
- position: {
- w: 200,
- h: 10,
- },
- // openDrawChiose: "", //openDrawPoint openDrawLine
- openDrawLine: false,
- openDrawPoint: false,
-
- butTitlePoint: "选择标点",
- olLayer: null, //点图层
-
- nowIndex: "", //返回第几个
-
- fromView: false, //若是查看 不显示更改按钮
-
- openTitle: "", //当前选择
-
- ourDatas: [], //所有数据
- ourLayer: {}, //图层合集
-
- notNow: true, //如果修改，不显示确认按钮
- };
- },
- computed: {
- openDrawChiose() {
- // console.log(
- // "this.openDrawLine:",
- // this.openDrawLine,
- // "this.openDrawPoint:",
- // this.openDrawPoint
- // );
- if (this.openDrawLine) {
- return "openDrawLine";
- } else if (this.openDrawPoint) {
- return "openDrawPoint";
- } else {
- return "notBut---";
- }
+ name: "MapInThere",
+ components: {
+ tip,
},
- },
- // watch: {
- // openDrawChiose() {
- // console.log(this.openDrawChiose, "openDrawChiose");
- // },
- // },
- mounted() {
- const ol2d = new OlMap({
- layers: [
- // new OlLayerTile({
- // zIndex: 4,
- // title: "影像",
- // source: new XYZ({
- // url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
- // }),
- // }),
- // new OlLayerTile({
- // zIndex: 5,
- // title: "道路+中文注记",
- // source: new XYZ({
- // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
- // }),
- // }),
- new OlLayerTile({
- zIndex: 4,
- title: "矢量",
- source: new XYZ({
- url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
- // url: "/localData/sl/{z}/{x}/{y}.png",
- tileUrlFunction: function (tileCoord) {
- var z = tileCoord[0];
- var x = tileCoord[1];
- var y = Math.pow(2, z) + tileCoord[2];
- return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
+ data () {
+ return {
+ gunAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ peopleAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ carAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ // peopleLineAddlayer: new VectorLayer({
+ // // 图标图层
+ // zIndex: 22,
+ // source: new VectorSource(),
+ // }),
+ beginsPoint: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ DrawLayer: new VectorLayer({
+ // 图标图层
+ // zIndex: 1000,
+ source: new VectorSource(),
+ }),
+ peopleLineAddlayer: null,
+
+ // 存储新增点，线，面，数据的地方
+ // polygonData: [],
+ // polygonFlag: false,
+ // editToolbar: null,
+ // addPolygonEntitys: null,
+
+ typeSelected: "LineString",
+ // drawLayer: null,
+ draw: null,
+ coordinates: [],
+ coordinatesStr: "",
+ beginDraw: false,
+ butTitle: "开始绘画",
+ view: "",
+ // map: null,
+
+ showTip: false,
+ tipTitle: "",
+ position: {
+ w: 200,
+ h: 10,
},
- }),
- }),
- new OlLayerTile({
- zIndex: 5,
- title: "中文注记",
- source: new XYZ({
- url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
- }),
- }),
- ],
+ // openDrawChiose: "", //openDrawPoint openDrawLine
+ openDrawLine: false,
+ openDrawPoint: false,
- // 注意地图控件的写法
- controls: defaults().extend([
- // new FullScreen(),
- // new ScaleLine(),
- // new MousePosition(),
- // new Rotate(),
- // new Attribution()
- ]),
- target: "map",
- view: new OlView({
- center: [0, 0],
- zoom: 2,
- projection: "EPSG:4326",
- }),
- });
- window.ol2d = ol2d;
+ butTitlePoint: "选择标点",
+ olLayer: null, //点图层
- var view = ol2d.getView();
+ nowIndex: "", //返回第几个
- // let provider = new Cesium.UrlTemplateImageryProvider({
- // url: "/wp/{z}/{x}/{y}.png",
- // fileExtension: "png",
- // });
- // view.imageryLayers.addImageryProvider(provider);
+ fromView: false, //若是查看 不显示更改按钮
- // view.setCenter([115.85883507433789, 28.708432053474827])
- view.setCenter([114.03858862, 27.63088262]);
+ openTitle: "", //当前选择
- //
- view.setZoom(18);
- this.view = view;
- const ol3d = new OLCesium({ map: window.ol2d });
- window.ol3d = ol3d;
+ ourDatas: [], //所有数据
+ ourLayer: {}, //图层合集
- // ol2d.addLayer(this.gunAddlayer);
- // ol2d.addLayer(this.peopleAddlayer);
- // ol2d.addLayer(this.carAddlayer);
- // ol2d.addLayer(this.peopleLineAddlayer);
- // ol2d.addLayer(this.beginsPoint);
- },
- methods: {
- clearUseMapData() {
- if (this.openDrawPoint) {
- this.$store.commit("setPointData", ""); //用vuex清空最终数据
- } else if (this.openDrawLine) {
- this.$store.commit("setRotesData", ""); //用vuex清空最终数据
- }
- this.useMapData();
- },
- onceOnlodad(ourDatas) {
- this.ourDatas = ourDatas;
- this.Renders(ourDatas);
- },
- //加载底层路线和图标
- Renders(ourDatas) {
- // for (let i in ourDatas) {
- // console.log(ourDatas[i].value, "------", i);
- // }
- this.deleteElement();
- for (let k in ourDatas) {
- if (ourDatas[k].isLine) {
- if (!ourDatas[k].value) {
- // this.deleteElement("line", ourDatas[k].id);
- } else {
- this.addLines(ourDatas[k], "line");
- }
- } else {
- if (!ourDatas[k].value) {
- // this.deleteElement("point", ourDatas[k].id);
- } else {
- this.addPoint(ourDatas[k], "point");
- }
+ notNow: true, //如果修改，不显示确认按钮
}
- }
- this.drawLayerRoom(); //重置绘画层
},
- // 若没有value数据，删除地图上的元素
- deleteElement(name, id) {
- // console.log(name, id);
- // this.ourLayer[name + id].getSource().clear();
- for (let k in this.ourLayer) {
- this.ourLayer[k].getSource().clear();
- }
- },
- //加载点
- addPoint(data, name) {
- //创建图层
- let layer = new VectorLayer({
- zIndex: 22,
- source: new VectorSource(),
- }),
- iconFeature = new OlFeature({
- geometry: new OlGeomPoint(data.value), //绘制图形（点）
- }),
- iconFeatureTitle = new OlFeature({
- geometry: new OlGeomPoint(data.value), //绘制图形（点）
- }),
- that = this;
- iconFeature.setStyle(
- new OlStyleStyle({
- image: new OlStyleIcon({
- scale: 0.5,
- offset: [0, 5],
- offsetOrigin: "bottom",
- src: "img/dingwei/dingwei5.png",
- }),
- })
- );
- iconFeatureTitle.setStyle(
- new OlStyleStyle({
- text: new OlStyleText({
- text: data.name,
- font: "14px sans-serif", // CSS 字体设置
- scale: 1, //比例
- offsetY: -40,
- fill: new OlStyleFill({
- color: "#1296DB",
- }),
- }),
- })
- );
- layer.getSource().addFeature(iconFeature);
- layer.getSource().addFeature(iconFeatureTitle);
- //保存图层
- this.ourLayer[name + data.id] = layer;
- ol2d.addLayer(that.ourLayer[name + data.id]);
- // console.log(this.ourLayer, 77777);
- },
- addLines(data, name) {
- //创建图层
- let layer = new VectorLayer({
- zIndex: 22,
- source: new VectorSource(),
- }),
- that = this;
- //绘画线路
- var entityData = "";
- var entityArr = [];
- entityData = data.value.match(/\(([^)]*)\)/);
- if (entityData && entityData != "") {
- entityData = entityData[1].split(",");
- for (var j = 0; j < entityData.length; j++) {
- entityArr.push([
- Number(entityData[j].split(" ")[0]),
- Number(entityData[j].split(" ")[1]),
- ]);
- }
- }
- var lineCoords = entityArr; // 线里点的集合
- // console.log(lineCoords);
- var feature_LineString = new Feature({
- //线面板
- geometry: new LineString(lineCoords),
- });
- feature_LineString.setStyle(
- //线样式
- new Style({
- //填充色
- fill: new Fill({
- color: "rgba(255, 255, 255, 0.2)",
- }),
- //边线颜色
- stroke: new Stroke({
- color: "rgb(18,150,219)",
- width: 5,
- }),
- })
- );
- //线名称
- let lineFeatureTitle = new OlFeature({
- geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
- });
- lineFeatureTitle.setStyle(
- new OlStyleStyle({
- text: new OlStyleText({
- text: data.name,
- font: "14px sans-serif", // CSS 字体设置
- scale: 1, //比例
- offsetY: -10,
- fill: new OlStyleFill({
- color: "#1296DB",
- }),
- }),
- })
- );
- layer.getSource().addFeature(lineFeatureTitle);
- layer.getSource().addFeature(feature_LineString);
- //保存图层
- this.ourLayer[name + data.id] = layer;
- ol2d.addLayer(that.ourLayer[name + data.id]);
- // console.log(this.ourLayer, 88888);
- },
-
- //上面是初始化·················
-
- //下面是选择点或线路开始按钮
- init(val, num, value) {
- this.openTitle = val;
- if (value) {
- this.notNow = false;
- } else {
- this.notNow = true;
- }
- //notNow来确定是修改值还是增加值 是否显示$("#dataConfirm").show(100);
- this.nowIndex = num;
- if (val.indexOf("路径") != -1) {
- // console.log("加载路径按钮");
- this.controlBut("openDrawLine", this.notNow);
- } else {
- // console.log("加载标点按钮");
- this.controlBut("openDrawPoint", this.notNow);
- }
- },
- controlBut(openName, notNow) {
- //判断哪个dom打开
- this.closeOurBut();
- this[openName] = true;
- $("#" + openName).show();
- $("#openTitle").show();
- if (!notNow) {
- $("#dataConfirm").show(100);
- }
- },
- closeOurBut(open) {
- //整体关闭dom
- $("#dataConfirm").hide();
- $("#openDrawPoint").hide();
- $("#openDrawLine").hide();
- $("#openTitle").hide();
- this.openDrawLine = false;
- this.openDrawPoint = false;
- if (open) {
- this.openTitle = "";
- this.$parent.closeOpenedMap(); //开放按钮
- this.drawLayerRoom();
- }
- },
- //取消按钮
- stopDrawOur() {
- this.closeOurBut(true);
- },
- //确认数据
- useMapData() {
- //返回用数据
- // console.log(this.openDrawChiose, this.nowIndex);
- this.$parent.MapDataShow = false;
- let val =
- this.openDrawChiose == "openDrawLine"
- ? "line"
- : this.openDrawChiose == "openDrawPoint"
- ? "point"
- : "notData";
- // console.log(val);
- this.$parent.backMapDataOurData(val, this.nowIndex);
- // 返回后关闭操作按钮
- this.closeOurBut();
- //清除绘画图层
- this.drawLayerRoom();
- },
- //提示位置
- setTipPosition(x, y, n, m) {
- this.position.w = x + n;
- this.position.h = y + m;
- },
- //实时添加最上图层，为了编辑或新建路径能在最上
- drawLayerRoom() {
- let that = this;
- //添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
- if (that.peopleLineAddlayer) {
- that.peopleLineAddlayer.getSource().clear();
- that.peopleLineAddlayer = null;
- that.peopleLineAddlayer = new VectorLayer({
- zIndex: 22,
- source: new VectorSource(),
- });
- } else {
- that.peopleLineAddlayer = new VectorLayer({
- zIndex: 22,
- source: new VectorSource(),
- });
- }
- ol2d.addLayer(this.peopleLineAddlayer);
- },
-
- //选择绘画路线------↓
- getTypeSelected() {
- let that = this;
- this.beginDraw = true;
- this.draw && ol2d.removeInteraction(this.draw);
- //再根据typeSelect的值绘制新的Interaction
- this.drawLayerRoom(); //重置绘画层
- this.addInteraction();
- },
- addInteraction() {
- let value = this.typeSelected,
- that = this;
- this.tipTitle = "单击左键或右键开始绘画";
- $("#map") //提示器
- .off("mousemove")
- .mousemove(function (e) {
- if (!that.showTip) {
- that.showTip = true;
- }
- that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
- });
- this.coordinates = [];
- if (value !== "None") {
- this.draw = new Draw({
- source: this.DrawLayer.getSource(),
- type: this.typeSelected,
- style: new Style({
- stroke: new Stroke({
- color: "red",
- width: 3,
- }),
- }),
- coordinate: function (res) {
- //画线中的点
- that.coordinates.push(res.coordinate_);
- that.tipTitle = "可继续，或选择最终位置双击结束";
- },
- coordinateOver: function (res) {
- // 结束绘画 处理数据
- let d = that.doData(that.coordinates);
- that.addLinesDraw(d);
- that.$store.commit("setRotesData", d); //用vuex传最终数据
- },
- });
- ol2d.addInteraction(this.draw);
- }
- },
- //处理数据
- doData(val) {
- let str = "LINESTRING(";
- for (let k = 0; k < val.length; k++) {
- str += `${val[k][0]} ${val[k][1]}`;
- if (k != val.length - 1) {
- str += ",";
- }
- }
- str += ")";
- return str;
- },
- addLinesDraw(val) {
- var that = this;
- var entityData = "";
- var entityArr = [];
- entityData = val.match(/\(([^)]*)\)/);
-
- // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
- if (entityData && entityData != "") {
- entityData = entityData[1].split(",");
-
- for (var j = 0; j < entityData.length; j++) {
- entityArr.push([
- Number(entityData[j].split(" ")[0]),
- Number(entityData[j].split(" ")[1]),
- ]);
- }
- }
-
- var lineCoords = entityArr; // 线里点的集合
- //移动位置---暂不需要
- // var view = ol2d.getView();
- // view.setCenter([
- // lineCoords[Math.ceil(entityArr.length / 2)][0],
- // lineCoords[Math.ceil(entityArr.length / 2)][1],
- // ]);
- // view.setZoom(14.5);
-
- // 要素
- var feature_LineString = new Feature({
- geometry: new LineString(lineCoords),
- });
-
- feature_LineString.setStyle(
- new Style({
- //填充色
- fill: new Fill({
- color: "rgba(255, 255, 255, 0.2)",
- }),
- //边线颜色
- stroke: new Stroke({
- color: "red",
- width: 5,
- }),
- })
- );
- that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
- that.butTitle = "重新绘画";
- // if (!this.fromView) {
- $("#dataConfirm").show(100);
- // }
- if (that.draw != null) {
- that.beginDraw = false;
- that.draw.controlDrawing(true);
- that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
- $("#map").unbind("mousemove");
- // setTimeout(() => {
- this.tipTitle = "";
- this.showTip = false;
- }
- },
- //绘画路线------↑
- //绘画点-------↓
- getTypeSelectedPoint() {
- this.tipTitle = "单击左键选择位置";
- let that = this;
- let isHaveOne = false;
- this.drawLayerRoom(); //重置绘画层
- $("#map")
- .off("mousemove")
- .mousemove(function (e) {
- if (!that.showTip) {
- that.showTip = true;
- }
- that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
- });
-
- if (this.typeSelected !== "None") {
- this.draw = new Draw({
- source: this.DrawLayer.getSource(),
- type: this.typeSelected,
- style: new Style({
- stroke: new Stroke({
- color: "red",
- width: 3,
- }),
- }),
- isPoint: true,
- coordinate: function (res) {},
- coordinateOverPoint: function (res) {
- if (isHaveOne) {
- return;
+ computed: {
+ openDrawChiose () {
+ // console.log(
+ // "this.openDrawLine:",
+ // this.openDrawLine,
+ // "this.openDrawPoint:",
+ // this.openDrawPoint
+ // );
+ if (this.openDrawLine) {
+ return "openDrawLine"
+ } else if (this.openDrawPoint) {
+ return "openDrawPoint"
+ } else {
+ return "notBut---"
}
- that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
- that.addIconMarker(res.coordinate);
- isHaveOne = true;
- },
- });
- ol2d.addInteraction(this.draw);
- }
+ },
},
- addIconMarker(intlat) {
- let that = this;
- let iconFeature = new OlFeature({
- geometry: new OlGeomPoint(intlat), //绘制图形（点）
- });
- iconFeature.setStyle(
- new OlStyleStyle({
- image: new OlStyleIcon({
- scale: 0.5,
- offset: [0, 5],
- offsetOrigin: "bottom",
- //透明度
- opacity: 1,
- //图片路径
- src: "img/dingwei/dingwei6.png",
- }),
+ // watch: {
+ // openDrawChiose() {
+ // console.log(this.openDrawChiose, "openDrawChiose");
+ // },
+ // },
+ mounted () {
+ const ol2d = new OlMap({
+ layers: [
+ // new OlLayerTile({
+ // zIndex: 4,
+ // title: "影像",
+ // source: new XYZ({
+ // url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
+ // }),
+ // }),
+ // new OlLayerTile({
+ // zIndex: 5,
+ // title: "道路+中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // }),
+
+ // new OlLayerTile({
+ // zIndex: 4,
+ // title: "矢量",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
+ // // url: "/localData/sl/{z}/{x}/{y}.png",
+ // tileUrlFunction: function (tileCoord) {
+ // var z = tileCoord[0]
+ // var x = tileCoord[1]
+ // var y = Math.pow(2, z) + tileCoord[2]
+ // return "../assets/sl/" + z + "/" + x + "/" + y + ".png"
+ // },
+ // }),
+ // }),
+
+ // new OlLayerTile({
+ // zIndex: 5,
+ // title: "中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // }),
+
+ new OlLayerTile({
+ zIndex: 5,
+ title: "cesium切图",
+ source: new XYZ({
+ url: "/wp/{z}/{x}/{y}.png", // 注记
+ }),
+ }),
+ ],
+
+ // 注意地图控件的写法
+ controls: defaults().extend([
+ // new FullScreen(),
+ // new ScaleLine(),
+ // new MousePosition(),
+ // new Rotate(),
+ // new Attribution()
+ ]),
+ target: "map",
+ view: new OlView({
+ center: [116.026801, 28.683427],
+ zoom: 16,
+ projection: "EPSG:4326",
+ }),
})
- );
- that.peopleLineAddlayer.getSource().addFeature(iconFeature);
- this.butTitlePoint = "重新标点";
- if (!this.fromView) {
- $("#dataConfirm").show(100);
- }
- if (this.draw != null) {
- this.draw.controlDrawing(true);
- $("#map").unbind("mousemove");
- this.tipTitle = "";
- this.showTip = false;
- }
+ window.ol2d = ol2d
+
+ var view = ol2d.getView()
+
+ // let provider = new Cesium.UrlTemplateImageryProvider({
+ // url: "/wp/{z}/{x}/{y}.png",
+ // fileExtension: "png",
+ // });
+ // view.imageryLayers.addImageryProvider(provider);
+
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+
+ //
+ this.view = view
+ const ol3d = new OLCesium({ map: window.ol2d })
+ window.ol3d = ol3d
+
+ // ol2d.addLayer(this.gunAddlayer);
+ // ol2d.addLayer(this.peopleAddlayer);
+ // ol2d.addLayer(this.carAddlayer);
+ // ol2d.addLayer(this.peopleLineAddlayer);
+ // ol2d.addLayer(this.beginsPoint);
},
- //绘制点------↑
- },
+ methods: {
+ clearUseMapData () {
+ if (this.openDrawPoint) {
+ this.$store.commit("setPointData", "") //用vuex清空最终数据
+ } else if (this.openDrawLine) {
+ this.$store.commit("setRotesData", "") //用vuex清空最终数据
+ }
+ this.useMapData()
+ },
+ onceOnlodad (ourDatas) {
+ this.ourDatas = ourDatas
+ this.Renders(ourDatas)
+ },
+ //加载底层路线和图标
+ Renders (ourDatas) {
+ // for (let i in ourDatas) {
+ // console.log(ourDatas[i].value, "------", i);
+ // }
+ this.deleteElement()
+ for (let k in ourDatas) {
+ if (ourDatas[k].isLine) {
+ if (!ourDatas[k].value) {
+ // this.deleteElement("line", ourDatas[k].id);
+ } else {
+ this.addLines(ourDatas[k], "line")
+ }
+ } else {
+ if (!ourDatas[k].value) {
+ // this.deleteElement("point", ourDatas[k].id);
+ } else {
+ this.addPoint(ourDatas[k], "point")
+ }
+ }
+ }
+ this.drawLayerRoom() //重置绘画层
+ },
+ // 若没有value数据，删除地图上的元素
+ deleteElement (name, id) {
+ // console.log(name, id);
+ // this.ourLayer[name + id].getSource().clear();
+ for (let k in this.ourLayer) {
+ this.ourLayer[k].getSource().clear()
+ }
+ },
+ //加载点
+ addPoint (data, name) {
+ //创建图层
+ let layer = new VectorLayer({
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ iconFeature = new OlFeature({
+ geometry: new OlGeomPoint(data.value), //绘制图形（点）
+ }),
+ iconFeatureTitle = new OlFeature({
+ geometry: new OlGeomPoint(data.value), //绘制图形（点）
+ }),
+ that = this
+ iconFeature.setStyle(
+ new OlStyleStyle({
+ image: new OlStyleIcon({
+ scale: 0.5,
+ offset: [0, 5],
+ offsetOrigin: "bottom",
+ src: "img/dingwei/dingwei5.png",
+ }),
+ })
+ )
+ iconFeatureTitle.setStyle(
+ new OlStyleStyle({
+ text: new OlStyleText({
+ text: data.name,
+ font: "14px sans-serif", // CSS 字体设置
+ scale: 1, //比例
+ offsetY: -40,
+ fill: new OlStyleFill({
+ color: "#1296DB",
+ }),
+ }),
+ })
+ )
+ layer.getSource().addFeature(iconFeature)
+ layer.getSource().addFeature(iconFeatureTitle)
+ //保存图层
+ this.ourLayer[name + data.id] = layer
+ ol2d.addLayer(that.ourLayer[name + data.id])
+ // console.log(this.ourLayer, 77777);
+ },
+ addLines (data, name) {
+ //创建图层
+ let layer = new VectorLayer({
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ that = this
+ //绘画线路
+ var entityData = ""
+ var entityArr = []
+ entityData = data.value.match(/\(([^)]*)\)/)
+ if (entityData && entityData != "") {
+ entityData = entityData[1].split(",")
+ for (var j = 0; j < entityData.length; j++) {
+ entityArr.push([
+ Number(entityData[j].split(" ")[0]),
+ Number(entityData[j].split(" ")[1]),
+ ])
+ }
+ }
+ var lineCoords = entityArr // 线里点的集合
+ // console.log(lineCoords);
+ var feature_LineString = new Feature({
+ //线面板
+ geometry: new LineString(lineCoords),
+ })
+ feature_LineString.setStyle(
+ //线样式
+ new Style({
+ //填充色
+ fill: new Fill({
+ color: "rgba(255, 255, 255, 0.2)",
+ }),
+ //边线颜色
+ stroke: new Stroke({
+ color: "rgb(18,150,219)",
+ width: 5,
+ }),
+ })
+ )
+ //线名称
+ let lineFeatureTitle = new OlFeature({
+ geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
+ })
+ lineFeatureTitle.setStyle(
+ new OlStyleStyle({
+ text: new OlStyleText({
+ text: data.name,
+ font: "14px sans-serif", // CSS 字体设置
+ scale: 1, //比例
+ offsetY: -10,
+ fill: new OlStyleFill({
+ color: "#1296DB",
+ }),
+ }),
+ })
+ )
+ layer.getSource().addFeature(lineFeatureTitle)
+ layer.getSource().addFeature(feature_LineString)
+ //保存图层
+ this.ourLayer[name + data.id] = layer
+ ol2d.addLayer(that.ourLayer[name + data.id])
+ // console.log(this.ourLayer, 88888);
+ },
+
+ //上面是初始化·················
+
+ //下面是选择点或线路开始按钮
+ init (val, num, value) {
+ this.openTitle = val
+ if (value) {
+ this.notNow = false
+ } else {
+ this.notNow = true
+ }
+ //notNow来确定是修改值还是增加值 是否显示$("#dataConfirm").show(100);
+ this.nowIndex = num
+ if (val.indexOf("路径") != -1) {
+ // console.log("加载路径按钮");
+ this.controlBut("openDrawLine", this.notNow)
+ } else {
+ // console.log("加载标点按钮");
+ this.controlBut("openDrawPoint", this.notNow)
+ }
+ },
+ controlBut (openName, notNow) {
+ //判断哪个dom打开
+ this.closeOurBut()
+ this[openName] = true
+ $("#" + openName).show()
+ $("#openTitle").show()
+ if (!notNow) {
+ $("#dataConfirm").show(100)
+ }
+ },
+ closeOurBut (open) {
+ //整体关闭dom
+ $("#dataConfirm").hide()
+ $("#openDrawPoint").hide()
+ $("#openDrawLine").hide()
+ $("#openTitle").hide()
+ this.openDrawLine = false
+ this.openDrawPoint = false
+ if (open) {
+ this.openTitle = ""
+ this.$parent.closeOpenedMap() //开放按钮
+ this.drawLayerRoom()
+ }
+ },
+ //取消按钮
+ stopDrawOur () {
+ this.closeOurBut(true)
+ },
+ //确认数据
+ useMapData () {
+ //返回用数据
+ // console.log(this.openDrawChiose, this.nowIndex);
+ this.$parent.MapDataShow = false
+ let val =
+ this.openDrawChiose == "openDrawLine"
+ ? "line"
+ : this.openDrawChiose == "openDrawPoint"
+ ? "point"
+ : "notData"
+ // console.log(val);
+ this.$parent.backMapDataOurData(val, this.nowIndex)
+ // 返回后关闭操作按钮
+ this.closeOurBut()
+ //清除绘画图层
+ this.drawLayerRoom()
+ },
+ //提示位置
+ setTipPosition (x, y, n, m) {
+ this.position.w = x + n
+ this.position.h = y + m
+ },
+ //实时添加最上图层，为了编辑或新建路径能在最上
+ drawLayerRoom () {
+ let that = this
+ //添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
+ if (that.peopleLineAddlayer) {
+ that.peopleLineAddlayer.getSource().clear()
+ that.peopleLineAddlayer = null
+ that.peopleLineAddlayer = new VectorLayer({
+ zIndex: 22,
+ source: new VectorSource(),
+ })
+ } else {
+ that.peopleLineAddlayer = new VectorLayer({
+ zIndex: 22,
+ source: new VectorSource(),
+ })
+ }
+ ol2d.addLayer(this.peopleLineAddlayer)
+ },
+
+ //选择绘画路线------↓
+ getTypeSelected () {
+ let that = this
+ this.beginDraw = true
+ this.draw && ol2d.removeInteraction(this.draw)
+ //再根据typeSelect的值绘制新的Interaction
+ this.drawLayerRoom() //重置绘画层
+ this.addInteraction()
+ },
+ addInteraction () {
+ let value = this.typeSelected,
+ that = this
+ this.tipTitle = "单击左键或右键开始绘画"
+ $("#map") //提示器
+ .off("mousemove")
+ .mousemove(function (e) {
+ if (!that.showTip) {
+ that.showTip = true
+ }
+ that.setTipPosition(e.offsetX, e.offsetY, 10, 10)
+ })
+ this.coordinates = []
+ if (value !== "None") {
+ this.draw = new Draw({
+ source: this.DrawLayer.getSource(),
+ type: this.typeSelected,
+ style: new Style({
+ stroke: new Stroke({
+ color: "red",
+ width: 3,
+ }),
+ }),
+ coordinate: function (res) {
+ //画线中的点
+ that.coordinates.push(res.coordinate_)
+ that.tipTitle = "可继续，或选择最终位置双击结束"
+ },
+ coordinateOver: function (res) {
+ // 结束绘画 处理数据
+ let d = that.doData(that.coordinates)
+ that.addLinesDraw(d)
+ that.$store.commit("setRotesData", d) //用vuex传最终数据
+ },
+ })
+ ol2d.addInteraction(this.draw)
+ }
+ },
+ //处理数据
+ doData (val) {
+ let str = "LINESTRING("
+ for (let k = 0; k < val.length; k++) {
+ str += `${val[k][0]} ${val[k][1]}`
+ if (k != val.length - 1) {
+ str += ","
+ }
+ }
+ str += ")"
+ return str
+ },
+ addLinesDraw (val) {
+ var that = this
+ var entityData = ""
+ var entityArr = []
+ entityData = val.match(/\(([^)]*)\)/)
+
+ // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
+ if (entityData && entityData != "") {
+ entityData = entityData[1].split(",")
+
+ for (var j = 0; j < entityData.length; j++) {
+ entityArr.push([
+ Number(entityData[j].split(" ")[0]),
+ Number(entityData[j].split(" ")[1]),
+ ])
+ }
+ }
+
+ var lineCoords = entityArr // 线里点的集合
+ //移动位置---暂不需要
+ // var view = ol2d.getView();
+ // view.setCenter([
+ // lineCoords[Math.ceil(entityArr.length / 2)][0],
+ // lineCoords[Math.ceil(entityArr.length / 2)][1],
+ // ]);
+ // view.setZoom(14.5);
+
+ // 要素
+ var feature_LineString = new Feature({
+ geometry: new LineString(lineCoords),
+ })
+
+ feature_LineString.setStyle(
+ new Style({
+ //填充色
+ fill: new Fill({
+ color: "rgba(255, 255, 255, 0.2)",
+ }),
+ //边线颜色
+ stroke: new Stroke({
+ color: "red",
+ width: 5,
+ }),
+ })
+ )
+ that.peopleLineAddlayer.getSource().addFeature(feature_LineString)
+ that.butTitle = "重新绘画"
+ // if (!this.fromView) {
+ $("#dataConfirm").show(100)
+ // }
+ if (that.draw != null) {
+ that.beginDraw = false
+ that.draw.controlDrawing(true)
+ that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画"
+ $("#map").unbind("mousemove")
+ // setTimeout(() => {
+ this.tipTitle = ""
+ this.showTip = false
+ }
+ },
+ //绘画路线------↑
+ //绘画点-------↓
+ getTypeSelectedPoint () {
+ this.tipTitle = "单击左键选择位置"
+ let that = this
+ let isHaveOne = false
+ this.drawLayerRoom() //重置绘画层
+ $("#map")
+ .off("mousemove")
+ .mousemove(function (e) {
+ if (!that.showTip) {
+ that.showTip = true
+ }
+ that.setTipPosition(e.offsetX, e.offsetY, 10, 10)
+ })
+
+ if (this.typeSelected !== "None") {
+ this.draw = new Draw({
+ source: this.DrawLayer.getSource(),
+ type: this.typeSelected,
+ style: new Style({
+ stroke: new Stroke({
+ color: "red",
+ width: 3,
+ }),
+ }),
+ isPoint: true,
+ coordinate: function (res) { },
+ coordinateOverPoint: function (res) {
+ if (isHaveOne) {
+ return
+ }
+ that.$store.commit("setPointData", res.coordinate) //用vuex传最终数据
+ that.addIconMarker(res.coordinate)
+ isHaveOne = true
+ },
+ })
+ ol2d.addInteraction(this.draw)
+ }
+ },
+ addIconMarker (intlat) {
+ let that = this
+ let iconFeature = new OlFeature({
+ geometry: new OlGeomPoint(intlat), //绘制图形（点）
+ })
+ iconFeature.setStyle(
+ new OlStyleStyle({
+ image: new OlStyleIcon({
+ scale: 0.5,
+ offset: [0, 5],
+ offsetOrigin: "bottom",
+ //透明度
+ opacity: 1,
+ //图片路径
+ src: "img/dingwei/dingwei6.png",
+ }),
+ })
+ )
+ that.peopleLineAddlayer.getSource().addFeature(iconFeature)
+ this.butTitlePoint = "重新标点"
+ if (!this.fromView) {
+ $("#dataConfirm").show(100)
+ }
+ if (this.draw != null) {
+ this.draw.controlDrawing(true)
+ $("#map").unbind("mousemove")
+ this.tipTitle = ""
+ this.showTip = false
+ }
+ },
+ //绘制点------↑
+ },
};
</script>
<style scoped lang="scss">
#map {
- position: relative;
- width: 100%;
- height: 100%;
- .controlMap {
- position: absolute;
- top: 10px;
- // left: calc(50% - 97px);
- left: 390px;
- z-index: 2 !important;
- #openTitle {
- background-color: #fff;
- border-radius: 5px;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ .controlMap {
+ position: absolute;
+ top: 10px;
+ // left: calc(50% - 97px);
+ left: 390px;
+ z-index: 2 !important;
+ #openTitle {
+ background-color: #fff;
+ border-radius: 5px;
+ }
+ #openDrawLine,
+ #openDrawPoiton {
+ width: 174px;
+ // position: relative;
+ // top: 43px;
+ // top: 10px;
+ // left: calc(50% - 96px);
+ // left: 20px;
+ }
+ .openDrawsb {
+ background-color: #fff;
+ color: black;
+ }
+ .activeDraw {
+ background-color: #409eff;
+ color: #fff;
+ }
}
- #openDrawLine,
- #openDrawPoiton {
- width: 174px;
- // position: relative;
- // top: 43px;
- // top: 10px;
- // left: calc(50% - 96px);
- // left: 20px;
+ #dataConfirm {
+ position: absolute;
+ top: 43px;
+ // left: calc(50% + 82px);
+ left: 564px;
+ z-index: 3 !important;
}
- .openDrawsb {
- background-color: #fff;
- color: black;
- }
- .activeDraw {
- background-color: #409eff;
- color: #fff;
- }
- }
- #dataConfirm {
- position: absolute;
- top: 43px;
- // left: calc(50% + 82px);
- left: 564px;
- z-index: 3 !important;
- }
}
</style>
--
Gitblit v1.9.3