From e4be7a095f31b76d4f3d60c06eefe774ffd264fc Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Wed, 16 Mar 2022 16:20:18 +0800
Subject: [PATCH] +地图添加面 电子围栏
---
src/components/map/main.vue | 724 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 457 insertions(+), 267 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index d2cc2e4..18d2a3b 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -7,31 +7,12 @@
* @LastEditTime: 2021-04-24 11:59:43
-->
<template>
- <div id="map" style="height: 100%">
- <div class="controlMap">
- <el-button-group>
- <el-button
- type="primary"
- icon="el-icon-edit"
- @click="getTypeSelected"
- :disabled="beginDraw"
- >{{ butTitle }}</el-button
- >
- <el-button
- type="primary"
- :disabled="!beginDraw"
- @click="stopDraw"
- icon="el-icon-delete"
- >取消</el-button
- >
- <!-- <el-button type="primary" icon="el-icon-share"></el-button>
- <el-button type="primary" icon="el-icon-delete"></el-button> -->
- </el-button-group>
- </div>
+ <div id="map" style="height: calc(100% - 40px)">
<tip v-show="showTip" :title="tipTitle" :position="position"></tip>
</div>
</template>
<script>
+// import OLCesium from "olcs/OLCesium.js";
import "ol/ol.css";
import OlView from "ol/View.js";
import XYZ from "ol/source/XYZ";
@@ -60,83 +41,152 @@
// 缩放到范围控件
// eslint-disable-next-line no-unused-vars
ZoomToExtent,
- Rotate,
+ Rotate
} from "ol/control.js";
-import "ol/ol.css";
-import { Map, View, Feature } from "ol";
-import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
-import { ImageStatic, Vector as VectorSource } from "ol/source";
-import { getCenter } from "ol/extent";
-import { Projection } from "ol/proj";
-import Draw from "ol/interaction/Draw";
-import { Point } from "ol/geom";
-import { Icon, Style, Text, Fill, Stroke } from "ol/style";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
-import { Vector } from "ol/source";
-// import Draw from "./Draw";
+import { OSM, TileWMS, Vector } from "ol/source";
+// import Draw from "ol/interaction/Draw";
+import Draw from "./Draw";
+
+import Feature from "ol/Feature.js";
+import Point from "ol/geom/Point.js";
import LineString from "ol/geom/LineString.js";
-import img from "@/assets/img/car.png";
+import { Icon, Style, Fill, Stroke } from "ol/style.js";
+
+// import drawFence from "./drawFence";
+
+import OlFeature from "ol/Feature";
+import OlGeomPoint from "ol/geom/Point";
+// import OlLayerVector from "ol/layer/Vector";
+// import OlSourceVector from "ol/source/Vector";
+import OlStyleStyle from "ol/style/Style";
+import OlStyleIcon from "ol/style/Icon";
+// // 用来添加相关文字描述的
+// import Text from "ol/style/Text";
+// // import Fill from "ol/style/Fill";
+// import Cesium from "libs/Cesium/Cesium.js";
export default {
name: "Map",
components: {
- tip,
+ tip
},
data() {
return {
+ gunAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ peopleAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ carAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
peopleLineAddlayer: new VectorLayer({
// 图标图层
zIndex: 22,
- source: new VectorSource(),
+ source: new VectorSource()
}),
- //多边形Layer
- polygonlayer: new VectorLayer({
+ beginsPoint: new VectorLayer({
// 图标图层
zIndex: 22,
- source: new VectorSource(),
+ source: new VectorSource()
}),
- vectorSource: new VectorSource(),
- features: [],
- feature: null,
+
// 存储新增点，线，面，数据的地方
- persons: [],
- polygon: [],
- polygonPersons: [],
// polygonData: [],
// polygonFlag: false,
// editToolbar: null,
// addPolygonEntitys: null,
- typeSelected: "Polygon",
+ typeSelected: "LineString",
drawLayer: null,
draw: null,
- drawSource:null,
coordinates: [],
coordinatesStr: "",
beginDraw: false,
butTitle: "开始绘画",
view: "",
- isDraw: true, // 是否绘制
+ // map: null,
+
showTip: false,
tipTitle: "",
position: {
w: 200,
- h: 10,
+ h: 10
},
+ // openDrawChiose: "", //openDrawPoint openDrawLine
+ openDrawLine: false,
+ openDrawPoint: false,
+
+ butTitlePoint: "选择标点",
+ olLayer: null, //点图层
+
+ nowIndex: "", //返回第几个
+
+ fromView: false //若是查看 不显示更改按钮
};
},
-
+ computed: {
+ openDrawChiose() {
+ if (this.openDrawLine) {
+ return "openDrawLine";
+ } else if (this.openDrawPoint) {
+ return "openDrawPoint";
+ } else {
+ return "";
+ }
+ }
+ },
mounted() {
const ol2d = new OlMap({
layers: [
+ // new OlLayerTile({
+ // zIndex: 4,
+ // title: "影像",
+ // source: new XYZ({
+ // url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
+ // }),
+ // }),
+ // new OlLayerTile({
+ // zIndex: 5,
+ // title: "道路+中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // }),
new OlLayerTile({
zIndex: 4,
- title: "影像",
+ title: "矢量",
source: new XYZ({
- url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
- }),
+ url:
+ "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
+ // url: "/localData/sl/{z}/{x}/{y}.png",
+ tileUrlFunction: function(tileCoord) {
+ var z = tileCoord[0];
+ var x = tileCoord[1];
+ var y = Math.pow(2, z) + tileCoord[2];
+ return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
+ }
+ })
}),
+ new OlLayerTile({
+ zIndex: 5,
+ title: "中文注记",
+ source: new XYZ({
+ url:
+ "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
+ })
+ })
],
// 注意地图控件的写法
@@ -151,111 +201,303 @@
view: new OlView({
center: [0, 0],
zoom: 2,
- projection: "EPSG:4326",
- }),
+ projection: "EPSG:4326"
+ })
});
window.ol2d = ol2d;
var view = ol2d.getView();
- // view.setCenter([115.85883507433789, 28.708432053474827])
- view.setCenter([115.9032747077233, 28.67433116990186]);
-
- //设置放大层级
- view.setZoom(13);
- this.view = view;
-
- // const drawSource = new VectorSource();
-
- // const drawLayer = new VectorLayer({
-
- // source: drawSource
-
+ // let provider = new Cesium.UrlTemplateImageryProvider({
+ // url: "/wp/{z}/{x}/{y}.png",
+ // fileExtension: "png",
// });
+ // view.imageryLayers.addImageryProvider(provider);
- // this.drawSource = drawSource;
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+ view.setCenter([114.03858862, 27.63088262]);
- // ol2d.addLayer(drawLayer);
+ //
+ view.setZoom(18);
+ this.view = view;
+ // const ol3d = new OLCesium({ map: window.ol2d });
+ // window.ol3d = ol3d;
+ ol2d.addLayer(this.gunAddlayer);
+ ol2d.addLayer(this.peopleAddlayer);
+ ol2d.addLayer(this.carAddlayer);
ol2d.addLayer(this.peopleLineAddlayer);
- ol2d.addLayer(this.polygonlayer);
+ ol2d.addLayer(this.beginsPoint);
+ // this.addLines()
+ let that = this;
+ that.addNewLine();
+
+ return;
+ that.beginsPoint.getSource().clear();
+ let iconFeature = new OlFeature({
+ geometry: new OlGeomPoint([114.03928791, 27.62954732]) //绘制图形（点）
+ });
+ iconFeature.setStyle(
+ new OlStyleStyle({
+ image: new OlStyleIcon({
+ scale: 0.5,
+ offset: [0, 5],
+ offsetOrigin: "bottom",
+ //透明度
+ opacity: 1,
+ //图片路径
+ src: "img/dingwei/dingwei4.png"
+ })
+ })
+ );
+ that.beginsPoint.getSource().addFeature(iconFeature);
//监听鼠标位置
- var that = this;
//
- that.addNewLine();
- var obj = {
- fenceId: '12',
- name: '围栏3',
- center: '',
- radius: '',
- type: 'polyline',
- points: '113.960623,22.546082;113.958197,22.544029;113.956526,22.543245;113.953562,22.544563'
- }
- this.showFence(obj);
- },
- watch: {
- persons(val) {
- if (val) {
- this.setFeature();
- }
- },
},
methods: {
+ init(val, num, value, fromView) {
+ if (fromView) {
+ this.fromView = fromView;
+ }
+ //若是查看 不显示更改按钮
+ //初始化
+ // console.log(val, "地图初始化", "第:" + num);
+ this.nowIndex = num;
+ if (val.indexOf("路径") != -1) {
+ // console.log("加载路径");
+ if (!fromView) {
+ this.openDrawLineMethod();
+ }
+ if (value) {
+ //有数据就加载
+ this.addLinesDraw(value);
+ }
+ } else {
+ // console.log("加载标点");
+ if (!fromView) {
+ this.openDrawPointMethod();
+ }
+ if (value) {
+ //有数据就加载
+ let intlat = value;
+ if (typeof value == "string") {
+ intlat = value.split(","); //改为数组
+ intlat = [+intlat[0], +intlat[1]]; //改为数字
+ }
+ this.addIconMarker(intlat);
+ }
+ }
+ },
+ useMapData() {
+ //返回用数据
+ this.$parent.MapDataShow = false;
+ let val;
+ if (this.openDrawPoint) {
+ val = "point";
+ } else if (this.openDrawLine) {
+ val = "line";
+ }
+ this.$parent.backMapData(val, this.nowIndex);
+ },
+ clearUseMapData() {
+ if (this.openDrawPoint) {
+ this.$store.commit("setPointData", ""); //用vuex清空最终数据
+ } else if (this.openDrawLine) {
+ this.$store.commit("setRotesData", ""); //用vuex清空最终数据
+ }
+ this.useMapData();
+ },
+ openDrawLineMethod() {
+ if (this.openDrawPoint) {
+ this.openDrawPoint = false;
+ $("#openDrawPoiton").hide();
+ }
+ //打开画路径
+ $("#openDrawLine").toggle(100);
+ this.openDrawLine = !this.openDrawLine;
+ },
+ openDrawPointMethod() {
+ if (this.openDrawLine) {
+ this.openDrawLine = false;
+ $("#openDrawLine").hide();
+ }
+ //打开画点
+ $("#openDrawPoiton").toggle(100);
+ this.openDrawPoint = !this.openDrawPoint;
+ },
+ getTypeSelectedPoint() {
+ this.tipTitle = "单击左键选择位置";
+ let that = this;
+ let isHaveOne = false;
+ $("#map")
+ .off("mousemove")
+ .mousemove(function(e) {
+ if (!that.showTip) {
+ that.showTip = true;
+ }
+ that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
+ // console.log(e.clientX);
+ // console.log(e.offsetX);
+ // console.log(e.pageX);
+ // console.log(e.screenX);
+ // console.log("================================");
+ });
+
+ if (this.typeSelected !== "None") {
+ this.draw = new Draw({
+ source: this.drawLayer.getSource(),
+ type: this.typeSelected,
+ style: new Style({
+ stroke: new Stroke({
+ color: "red",
+ width: 3
+ })
+ }),
+ isPoint: true,
+ coordinate: function(res) {},
+ coordinateOverPoint: function(res) {
+ if (isHaveOne) {
+ return;
+ }
+ that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
+ // console.log(res.coordinate);//输出点
+ that.addIconMarker(res.coordinate);
+ isHaveOne = true;
+ }
+ });
+ this.map.addInteraction(this.draw);
+ }
+
+ // 选点
+ // this.addIconMarker([115.9111272006128, 28.699307185841562]);
+ },
+ addIconMarker(intlat) {
+ let that = this;
+ that.carAddlayer.getSource().clear();
+ // if (this.olLayer) {
+ // window.ol2d.removeLayer(this.olLayer);
+ // }
+ // let iconFeatures;
+
+ // this.olLayer = new VectorLayer({
+ // // 图标图层
+ // zIndex: 22,
+ // source: new VectorSource(),
+ // });
+ let iconFeature = new OlFeature({
+ geometry: new OlGeomPoint(intlat) //绘制图形（点）
+ });
+ iconFeature.setStyle(
+ new OlStyleStyle({
+ image: new OlStyleIcon({
+ scale: 0.5,
+ //控制标注图片和文字之间的距离
+ // anchor: [0.2, 1],
+ //标注样式的起点位置
+ // anchorOrigin: "top-right",
+ //X方向单位：分数
+ // anchorXUnits: "10px",
+ //Y方向单位：像素
+ // anchorYUnits: "-10px",
+ //偏移起点位置的方向
+ offset: [0, 5],
+ offsetOrigin: "bottom",
+ //透明度
+ opacity: 1,
+ //图片路径
+ // src: require("img/logos.png"),
+ src: "img/dingwei/dingwei5.png"
+ })
+ })
+ );
+
+ // 加载多个点用addFeatures，一个点用addFeature
+ // this.olLayer.getSource().addFeature(iconFeature);
+ that.carAddlayer.getSource().addFeature(iconFeature);
+ // window.ol2d.addLayer(this.olLayer);
+
+ // var startMarker = new OlFeature({
+ // type: "icon",
+ // // geometry: new OlGeomPoint([118.10131072998047, 36.819305419921875]),
+ // geometry: new OlGeomPoint(intlat),
+ // });
+
+ // var vectorLayer = new OlLayerVector({
+ // source: new OlSourceVector({
+ // features: [startMarker],
+ // }),
+ // style: new OlStyleStyle({
+ // image: new OlStyleIcon({
+ // anchor: [0.5, 1],
+ // src: "img/logos.png",
+ // // src: http://192.168.4.61:9527/static/mapMoniter/0.png
+ // // 说明下，因为vue项目打包之后，我这张图片放到了static目录下，直接给相对路径是无法访问到，
+ // // 可以通过js原生的API拿到对应的前台服务器ip和端口，还有项目名称，就可以访问到，下面附了对应帖子链接
+ // }),
+ // // 设置图片下面显示字体的样式和内容
+ // text: new Text({
+ // text: "文字描述", // 添加文字描述
+ // font: "14px font-size", // 设置字体大小
+ // // fill: new Fill({
+ // // // 设置字体颜色
+ // // color: "#1CAF9A",
+ // // }),
+ // offsetY: 10, // 设置文字偏移量
+ // }),
+ // }),
+ // });
+ // window.ol2d.addLayer(vectorLayer);
+
+ this.butTitlePoint = "重新标点";
+ if (!this.fromView) {
+ $("#dataConfirm").show(100);
+ }
+ if (this.draw != null) {
+ this.draw.controlDrawing(true);
+ $("#map").unbind("mousemove");
+ this.tipTitle = "";
+ this.showTip = false;
+ }
+ },
goTudefault(x, y) {
this.view.setCenter([x, y]);
this.view.setZoom(14.5);
},
- // 点
- setFeature() {
- let that = this;
- that.features = [];
- that.vectorSource.clear();
- that.persons.map((item) => {
- that.feature = new Feature({
- geometry: new Point([item.x, item.y]),
- name: item.name,
- });
- // 设置Feature的样式，使用小旗子图标
- that.feature.setStyle(
- new Style({
- image: new Icon({
- anchor: [0, 1],
- src: img,
- }),
- text: new Text({
- // 位置
- textAlign: "center",
- // 基准线
- textBaseline: "middle",
- // 文字样式
- font: "normal 20px 微软雅黑",
- // 文本内容
- text: item.name,
- // 文本填充样式（即文字颜色）
- fill: new Fill({ color: "#aa3300" }),
- stroke: new Stroke({ color: "#ffcc33", width: 2 }),
- }),
- })
- );
- that.features.push(that.feature);
- });
- that.vectorSource.addFeatures(that.features);
+ init3D(val) {
+ // window.ol3d.setEnabled(val);
},
addEntitys(item, icon, scale, name, type) {
const iconFeature = new Feature({
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
name: name,
- attributes: item,
+ attributes: item
});
const iconStyle = new Style({
+ // text: new Text({ // 字体, 未成功, 浪费许多时间
+ // font: 'Normal ' + 12 + 'px ' + 'iconfont',
+ // text: "\e645",
+ // fill: new Fill({ color: "green" }),
+ // }),
+
image: new Icon({
scale: scale,
opacity: 1,
- src: icon,
+ src: icon
// src: require('../../assets/Mark.png')
- }),
+ })
+
+ // new CircleStyle({ // 普通样式
+ // radius: 6,
+ // fill: new Fill({
+ // color: 'rgba(200, 155, 155, 0.8)'
+ // }),
+ // stroke: new Stroke({
+ // color: 'black',
+ // width: 0.3,
+ // })
+ // }),
});
iconFeature.setStyle(iconStyle);
@@ -270,10 +512,10 @@
url: "api/routeIn/routein/selectList",
type: "post",
data: {
- id: ringId,
+ id: ringId
},
dataType: "JSON",
- success: function (data) {
+ success: function(data) {
that.peopleLineAddlayer.getSource().clear();
var entityData = "";
var entityArr = [];
@@ -286,7 +528,7 @@
for (var j = 0; j < entityData.length; j++) {
entityArr.push([
Number(entityData[j].split(" ")[0]),
- Number(entityData[j].split(" ")[1]),
+ Number(entityData[j].split(" ")[1])
]);
}
}
@@ -296,107 +538,60 @@
var view = ol2d.getView();
view.setCenter([
lineCoords[Math.ceil(entityArr.length / 2)][0],
- lineCoords[Math.ceil(entityArr.length / 2)][1],
+ lineCoords[Math.ceil(entityArr.length / 2)][1]
]);
view.setZoom(14.5);
// 要素
// var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
var feature_LineString = new Feature({
- geometry: new LineString(lineCoords),
+ geometry: new LineString(lineCoords)
});
feature_LineString.setStyle(
new Style({
//填充色
fill: new Fill({
- color: "rgba(255, 255, 255, 0.2)",
+ color: "rgba(255, 255, 255, 0.2)"
}),
//边线颜色
stroke: new Stroke({
color: "rgb(252, 94, 32)",
- width: 5,
- }),
+ width: 5
+ })
})
);
that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
that.butTitle = "修改绘画";
},
- error: function (data) {
+ error: function(data) {
// 请求失败函数
console.log(data);
- },
+ }
});
}
},
addNewLine() {
this.map = ol2d;
+ // console.log(ol2d, 1);
+ // console.log(drawFence, 2);
+ // var d = new drawFence(ol2d);
+ // console.log(d);
// 添加一个绘制的线使用的layer
this.drawLayer = new VectorLayer({
//layer所对应的source
- source: new Vector(),
+ source: new Vector()
});
//把layer加入到地图中
this.map.addLayer(this.drawLayer);
},
- //转换坐标点（多）
- transPoints(points) {
- let arr = points.split(';');
- let point = [];
- arr.forEach(item => {
- let newPoint = item.split(',');
- point.push(newPoint)
- })
- let _points = point.map(item => {
- item = [parseFloat(item[0]), parseFloat(item[1])];
- item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
- return item;
- })
- return _points;
- },
- //回显围栏
- showFence(obj) {
- let {
- fenceId,
- name,
- type,
- center,
- radius,
- points
- } = obj;
- if (type == 'polygon') {
- this.showPolygon(fenceId, points, name)
- }
- },
- /**
- *
- * @param {*} fenceId 围栏id
- * @param {*} points 多边形坐标点
- * @param {*} name 围栏名
- */
- showPolygon(fenceId, points, name) {
- let _points = this.transPoints(points)
- _points = [_points]
- //多边形的数据格式是[[[lng,lat],[lng,lat]……]]外围两个中括号
- var polygonFeature = new ol.Feature({ //路线
- geometry: new ol.geom.Polygon(_points)
-
- });
- debugger;
- polygonFeature.setId(fenceId)
- this.source.addFeature(polygonFeature);
- console.log(this.source.getFeatures())
- },
- //开始绘制
getTypeSelected() {
this.beginDraw = true;
this.draw && this.map.removeInteraction(this.draw);
this.peopleLineAddlayer.getSource().clear();
- this.polygonlayer.getSource().clear();
//再根据typeSelect的值绘制新的Interaction
- // this.addInteraction();
- this.drawStart();
+ this.addInteraction();
},
stopDraw() {
this.showTip = false;
@@ -409,22 +604,25 @@
this.position.w = x + n;
this.position.h = y + m;
},
- //绘制开始
addInteraction() {
this.tipTitle = "单击左键或右键开始绘画";
- // $("#map")
- // .off("mousemove")
- // .mousemove(function (e) {
- // if (!that.showTip) {
- // that.showTip = true;
- // }
- // that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
- // });
+ $("#map")
+ .off("mousemove")
+ .mousemove(function(e) {
+ if (!that.showTip) {
+ that.showTip = true;
+ }
+ that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
+ // console.log(e.clientX);
+ // console.log(e.offsetX);
+ // console.log(e.pageX);
+ // console.log(e.screenX);
+ // console.log("================================");
+ });
this.coordinates = [];
let value = this.typeSelected,
that = this;
-
if (value !== "None") {
this.draw = new Draw({
source: this.drawLayer.getSource(),
@@ -432,15 +630,16 @@
style: new Style({
stroke: new Stroke({
color: "red",
- width: 3,
- }),
+ width: 3
+ })
}),
- coordinate: function (res) {
+ coordinate: function(res) {
//画线中的点
- that.coordinates.push(res);
+ that.coordinates.push(res.coordinate_);
that.tipTitle = "可继续，或选择最终位置双击结束";
+ // console.log(res.coordinate_, 123456);
},
- coordinateOver: function (res) {
+ coordinateOver: function(res) {
// 结束绘画 处理数据
// console.log(that.doData(that.coordinates));
let d = that.doData(that.coordinates);
@@ -449,50 +648,9 @@
// console.log(that.$store);
that.$store.commit("setRotesData", d); //用vuex传最终数据
// that.coordinatesStr = that.doData(that.coordinates);
- },
+ }
});
this.map.addInteraction(this.draw);
- }
- },
- // 开始绘制多边形
- drawStart(type) {
- type = 'Polygon';
- let that = this;
- var draw;
- if (this.isDraw) {
- this.isDraw = false;
- draw = new Draw({
- source: this.source,
- type: type,
- });
- this.map.addInteraction(this.draw);
- draw.on("drawend", function (evt) {
- that.drawingEnd(evt);
- });
- } else {
- this.source.clear();
- this.map.removeInteraction(this.draw);
- this.isDraw = true;
- this.polygon = [];
- this.polygonPersons = [];
- }
- },
-
- // 构建多边形结束
- drawingEnd(evt) {
- let that = this;
- const geo = evt.feature.getGeometry();
- const t = geo.getType();
- if (t === "Polygon") {
- // 获取坐标点
- const points = geo.getCoordinates();
- points[0].map((item) => {
- that.polygon.push({ lng: item[0], lat: item[1] });
- });
- for (let i = 0; i < this.persons.length; i++) {
- this.polygonPersons.push(this.persons[i]);
- }
- this.isDraw = false;
}
},
doData(val) {
@@ -515,13 +673,20 @@
}
}
str += ")";
- // console.log(str, 111);
return str;
},
addLinesDraw(val) {
var that = this;
+ // if (ringId != null && ringId != "") {
+ // $.ajax({
+ // url: "api/routeIn/routein/selectList",
+ // type: "post",
+ // data: {
+ // id: ringId,
+ // },
+ // dataType: "JSON",
+ // success: function (data) {
that.peopleLineAddlayer.getSource().clear();
- that.polygonlayer.getSource().clear();
var entityData = "";
var entityArr = [];
entityData = val.match(/\(([^)]*)\)/);
@@ -533,7 +698,7 @@
for (var j = 0; j < entityData.length; j++) {
entityArr.push([
Number(entityData[j].split(" ")[0]),
- Number(entityData[j].split(" ")[1]),
+ Number(entityData[j].split(" ")[1])
]);
}
}
@@ -543,54 +708,79 @@
var view = ol2d.getView();
view.setCenter([
lineCoords[Math.ceil(entityArr.length / 2)][0],
- lineCoords[Math.ceil(entityArr.length / 2)][1],
+ lineCoords[Math.ceil(entityArr.length / 2)][1]
]);
view.setZoom(14.5);
// 要素
// var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
var feature_LineString = new Feature({
- geometry: new LineString(lineCoords),
+ geometry: new LineString(lineCoords)
});
feature_LineString.setStyle(
new Style({
//填充色
fill: new Fill({
- color: "rgba(255, 255, 255, 0.2)",
+ color: "rgba(255, 255, 255, 0.2)"
}),
//边线颜色
stroke: new Stroke({
color: "rgb(252, 94, 32)",
- width: 5,
- }),
+ width: 5
+ })
})
);
that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
- that.polygonlayer.getSource().addFeature(feature_LineString);
+ that.butTitle = "重新绘画";
+ if (!this.fromView) {
+ $("#dataConfirm").show(100);
+ }
if (that.draw != null) {
that.beginDraw = false;
- that.butTitle = "重新绘画";
- that.draw.abortDrawing_();
+ that.draw.controlDrawing(true);
that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
$("#map").unbind("mousemove");
// setTimeout(() => {
this.tipTitle = "";
this.showTip = false;
}
- },
- },
+ }
+ }
};
</script>
<style scoped lang="scss">
#map {
position: relative;
- .controlMap {
- position: absolute;
- top: 10px;
- left: calc(50% - 80px);
- z-index: 2 !important;
- }
+ // .controlMap {
+ // position: absolute;
+ // top: 10px;
+ // left: calc(50% - 97px);
+ // z-index: 2 !important;
+ // #openDrawLine,
+ // #openDrawPoiton {
+ // width: 174px;
+ // position: absolute;
+ // // top: 43px;
+ // top: 10px;
+ // // left: calc(50% - 96px);
+ // left: 50%;
+ // }
+ // .openDrawsb {
+ // background-color: #fff;
+ // color: black;
+ // }
+ // .activeDraw {
+ // background-color: #409eff;
+ // color: #fff;
+ // }
+ // }
+ // #dataConfirm {
+ // position: absolute;
+ // top: 20px;
+ // left: calc(50% + 82px);
+ // z-index: 3 !important;
+ // }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3