From 0c94a693ab94ec4e0e44e4e0bee636bc8bb3ff1e Mon Sep 17 00:00:00 2001
From: 钟日健 <5689795+arsn@user.noreply.gitee.com>
Date: Wed, 16 Mar 2022 14:09:33 +0800
Subject: [PATCH] deploy 修改
---
src/components/map/main.vue | 672 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 465 insertions(+), 207 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index f85eb1c..d2cc2e4 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -7,15 +7,37 @@
* @LastEditTime: 2021-04-24 11:59:43
-->
<template>
- <div id="track_map" style="height: 100%"></div>
+ <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>
+ <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
+ </div>
</template>
<script>
import "ol/ol.css";
import OlView from "ol/View.js";
-// import XYZ from 'ol/source/XYZ'
+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,
@@ -40,60 +62,73 @@
ZoomToExtent,
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 WMTS from "ol/source/WMTS";
-import WMTSTileGrid from "ol/tilegrid/WMTS";
-
-import Feature from "ol/Feature.js";
-import Point from "ol/geom/Point.js";
+import { Vector } from "ol/source";
+// import Draw from "./Draw";
import LineString from "ol/geom/LineString.js";
-import { Icon, Style, Fill, Stroke } from "ol/style.js";
-
-import { getWidth, getTopLeft } from "ol/extent";
-
-import { get as getProjection } from "ol/proj";
-import XYZ from "ol/source/XYZ";
-
-import start from "@/assets/img/start.png";
+import img from "@/assets/img/car.png";
export default {
name: "Map",
+ 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(),
}),
- startPoint: new VectorLayer({
+ //多边形Layer
+ polygonlayer: new VectorLayer({
// 图标图层
zIndex: 22,
source: new VectorSource(),
}),
- ol2d: null,
+ vectorSource: new VectorSource(),
+ features: [],
+ feature: null,
+ // 存储新增点，线，面，数据的地方
+ persons: [],
+ polygon: [],
+ polygonPersons: [],
+ // polygonData: [],
+ // polygonFlag: false,
+ // editToolbar: null,
+ // addPolygonEntitys: null,
+
+ typeSelected: "Polygon",
+ drawLayer: null,
+ draw: null,
+ drawSource:null,
+ coordinates: [],
+ coordinatesStr: "",
+ beginDraw: false,
+ butTitle: "开始绘画",
+ view: "",
+ isDraw: true, // 是否绘制
+ showTip: false,
+ tipTitle: "",
+ position: {
+ w: 200,
+ h: 10,
+ },
};
},
+
mounted() {
- // 本地开发使用;
- this.ol2d = new OlMap({
+ const ol2d = new OlMap({
layers: [
new OlLayerTile({
zIndex: 4,
@@ -102,103 +137,112 @@
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=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
- // })
- // })
],
// 注意地图控件的写法
controls: defaults().extend([
- new FullScreen(),
- new ScaleLine(),
- new MousePosition(),
- new Rotate(),
- new Attribution(),
+ // new FullScreen(),
+ // new ScaleLine(),
+ // new MousePosition(),
+ // new Rotate(),
+ // new Attribution()
]),
- target: "track_map",
+ target: "map",
view: new OlView({
center: [0, 0],
zoom: 2,
projection: "EPSG:4326",
}),
});
+ window.ol2d = ol2d;
- var projection = getProjection("EPSG:4326");
- var projectionExtent = projection.getExtent();
- var size = getWidth(projectionExtent) / 256;
- var resolutions = [];
- for (var z = 2; z < 19; ++z) {
- //计算比例尺
- resolutions[z] = size / Math.pow(2, z);
- }
+ var view = ol2d.getView();
- // 正式服务器上使用
- // this.ol2d = new OlMap({
- // layers: [
- // new OlLayerTile({//矢量地图
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+ view.setCenter([115.9032747077233, 28.67433116990186]);
- // source: new WMTS({
- // url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
- // layer: "JX14YGJCIMGL7_L14",
- // style: "default",
- // matrixSet: "JX14YGJCIMGL7_L14",
- // format: "image/png",
- // wrapX: true,
- // tileGrid: new WMTSTileGrid({
- // origin: getTopLeft(projectionExtent),
- // //resolutions: res.slice(0, 15),
- // resolutions: resolutions,
- // matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
- // })
- // }),
-
- // })
- // ],
-
- // // 注意地图控件的写法
- // controls: defaults().extend([
- // new FullScreen(),
- // new ScaleLine(),
- // // new MousePosition(),
- // new Rotate(),
- // new Attribution()
- // ]),
- // target: 'track_map',
- // view: new OlView({
- // center: [115.85883507433789, 28.708432053474827],
- // projection: projection,
- // zoom: 11,
- // maxZoom: 15,
- // minZoom: 1
-
- // })
- // })
-
- this.parentParameter();
-
- window.ol2d = this.ol2d;
-
- var view = this.ol2d.getView();
-
- view.setCenter([115.85883507433789, 28.708432053474827]);
-
+ //设置放大层级
view.setZoom(13);
+ this.view = view;
- this.ol2d.addLayer(this.gunAddlayer);
- this.ol2d.addLayer(this.peopleAddlayer);
- this.ol2d.addLayer(this.carAddlayer);
- this.ol2d.addLayer(this.peopleLineAddlayer);
- this.ol2d.addLayer(this.startPoint);
+ // const drawSource = new VectorSource();
+
+ // const drawLayer = new VectorLayer({
+
+ // source: drawSource
+
+ // });
+
+ // this.drawSource = drawSource;
+
+ // ol2d.addLayer(drawLayer);
+
+ ol2d.addLayer(this.peopleLineAddlayer);
+ ol2d.addLayer(this.polygonlayer);
+
+ //监听鼠标位置
+ 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: {
+ 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);
+ },
addEntitys(item, icon, scale, name, type) {
- this[type].getSource().clear();
-
const iconFeature = new Feature({
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
name: name,
@@ -206,43 +250,302 @@
});
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: 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);
this[type].getSource().addFeature(iconFeature);
-
- this.flyTo(Number(item.LGTD), Number(item.LTTD), 13);
},
- addLines(arr) {
- this.addEntity(arr[0][0], arr[0][1]);
+ addLines(ringId) {
+ 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();
+ var entityData = "";
+ var entityArr = [];
+ entityData = data.data[0].routeInfo.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 lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
+ 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(252, 94, 32)",
+ width: 5,
+ }),
+ })
+ );
+ that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
+ that.butTitle = "修改绘画";
+ },
+ error: function (data) {
+ // 请求失败函数
+ console.log(data);
+ },
+ });
+ }
+ },
+ addNewLine() {
+ this.map = ol2d;
+
+ // 添加一个绘制的线使用的layer
+ this.drawLayer = new VectorLayer({
+ //layer所对应的source
+ 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();
- // 点坐标
- var lineCoords = arr; // 线里点的集合
+ this.polygonlayer.getSource().clear();
+ //再根据typeSelect的值绘制新的Interaction
+ // this.addInteraction();
+ this.drawStart();
+ },
+ stopDraw() {
+ this.showTip = false;
+ this.draw && this.map.removeInteraction(this.draw);
+ this.beginDraw = false;
+ this.tipTitle = "";
+ this.$store.commit("setRotesData", ""); //用vuex传最终数据
+ },
+ setTipPosition(x, y, n, m) {
+ 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);
+ // });
+
+ this.coordinates = [];
+ let value = this.typeSelected,
+ that = this;
+
+ 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);
+ that.tipTitle = "可继续，或选择最终位置双击结束";
+ },
+ coordinateOver: function (res) {
+ // 结束绘画 处理数据
+ // console.log(that.doData(that.coordinates));
+ let d = that.doData(that.coordinates);
+ that.addLinesDraw(d);
+ // console.log(d);
+ // 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) {
+ // ` routeInfo: "
+ // LINESTRING(
+ // 115.875489096939 28.7179278611352
+ // ,115.8794051221 28.7176267680684
+ // ,115.879340749084 28.7143052776491
+ // ,115.878879409134 28.7140324026424
+ // ,115.875220876038 28.7150580325974
+ // ,115.875489096939 28.7179466794231
+ // ,115.875489096939 28.7179466794231
+ // )"
+ // `
+ 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 += ")";
+ // console.log(str, 111);
+ return str;
+ },
+ addLinesDraw(val) {
+ var that = this;
+ that.peopleLineAddlayer.getSource().clear();
+ that.polygonlayer.getSource().clear();
+ 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 lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
@@ -263,76 +566,31 @@
}),
})
);
-
- this.peopleLineAddlayer.getSource().addFeature(feature_LineString);
-
- this.flyTo(
- arr[Math.ceil(arr.length / 2)][0],
- arr[Math.ceil(arr.length / 2)][1],
- 13
- );
- },
-
- addEntity(LGTD, LTTD) {
- this.startPoint.getSource().clear();
-
- const iconFeature = new Feature({
- geometry: new Point([LGTD, LTTD]),
- name: "起始点",
- });
-
- const iconStyle = new Style({
- // text: new Text({ // 字体, 未成功, 浪费许多时间
- // font: 'Normal ' + 12 + 'px ' + 'iconfont',
- // text: "\e645",
- // fill: new Fill({ color: "green" }),
- // }),
-
- image: new Icon({
- anchor: [0.5, 170], //锚点
- anchorOrigin: "top-left", //锚点源
- anchorXUnits: "fraction", //锚点X值单位
- anchorYUnits: "pixels", //锚点Y值单位
- offsetOrigin: "top-left",
- scale: 0.2,
- opacity: 1,
- src: start,
- // 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);
-
- this.startPoint.getSource().addFeature(iconFeature);
- },
-
- clearLine() {
- this.peopleLineAddlayer.getSource().clear();
- this.startPoint.getSource().clear();
- },
-
- flyTo(lgtd, lttd, size) {
- var view = this.ol2d.getView();
-
- view.setCenter([lgtd, lttd]);
-
- view.setZoom(size);
- },
-
- parentParameter() {
- this.$emit("childParameter", this.ol2d);
+ that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
+ that.polygonlayer.getSource().addFeature(feature_LineString);
+ if (that.draw != null) {
+ that.beginDraw = false;
+ that.butTitle = "重新绘画";
+ that.draw.abortDrawing_();
+ 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;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3