forked from zhba/zhba_enterprises
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>
