xzt
1 year ago
6 changed files with 746 additions and 2 deletions
@ -0,0 +1,720 @@ |
|||||
|
<template> |
||||
|
<div id="content"> |
||||
|
<div id="map" ref="map"></div> |
||||
|
<div class="btn-box"> |
||||
|
<div class="btn" id="drawPointBtn" @click="handlePointDraw">绘制点</div> |
||||
|
<div class="btn" id="drawLineBtn" @click="handleLineDraw">绘制线</div> |
||||
|
<div class="btn" id="drawBtn" @click="handleReturn">撤销</div> |
||||
|
<div class="btn" @click="handleClearDrawLayer">清除全部</div> |
||||
|
<div class="btn" @click="handleSaveCoords">保存绘制</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import "ol/ol.css"; |
||||
|
import { Map, View } from "ol"; |
||||
|
import { defaults as defaultControls } from "ol/control"; |
||||
|
import Tile from "ol/layer/Tile"; |
||||
|
import { fromLonLat } from "ol/proj"; |
||||
|
import OSM from "ol/source/OSM"; |
||||
|
import WMTS from "ol/source/WMTS"; |
||||
|
import WMTSTileGrid from "ol/tilegrid/WMTS.js"; |
||||
|
import VectorSource from "ol/source/Vector.js"; |
||||
|
// import TileSuperMapRest from "ol/source/TileSuperMapRest.js"; |
||||
|
|
||||
|
import VectorLayer from "ol/layer/Vector.js"; |
||||
|
import { Style, Fill, Stroke, Circle, Text } from "ol/style"; |
||||
|
|
||||
|
// import Style from "ol/style/Style.js"; |
||||
|
// import Fill from "ol/style/Fill.js"; |
||||
|
// import Stroke from "ol/style/Stroke.js"; |
||||
|
// import Circle from "ol/style/Circle.js"; |
||||
|
// import Text from "ol/style/Text.js"; |
||||
|
|
||||
|
import Draw from "ol/interaction/Draw.js"; |
||||
|
|
||||
|
import Feature from "ol/Feature.js"; |
||||
|
import LineString from "ol/geom/LineString.js"; |
||||
|
import Point from "ol/geom/Point.js"; |
||||
|
import { WMTSCapabilities, GML2 } from "ol/format"; |
||||
|
import { getWidth, getTopLeft } from "ol/extent"; |
||||
|
|
||||
|
export default { |
||||
|
props: ["potMsg", "lineMsg", "allDrawMsg"], |
||||
|
data() { |
||||
|
return { |
||||
|
map: null, |
||||
|
// projection: "EPSG:4326", |
||||
|
pointDrawFlag: "", |
||||
|
lineDrawFlag: "", |
||||
|
sketch: "", // 存储草图 |
||||
|
geometries: [], // 存储绘制的几何图形 |
||||
|
lastPointFeature: null, |
||||
|
lastLineFeature: null, |
||||
|
all_draw_feature: [], |
||||
|
all_point_coords: [], |
||||
|
all_line_coords: [], |
||||
|
drawVectorSource: null, |
||||
|
drawVectorLayer: null, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
if (this.potMsg.length > 0 || this.lineMsg.length > 0) { |
||||
|
this.all_point_coords = [...this.potMsg]; |
||||
|
this.all_line_coords = [...this.lineMsg]; |
||||
|
this.all_draw_feature = [...this.allDrawMsg]; |
||||
|
console.log("点的数据", this.potMsg); |
||||
|
console.log("线的数据", this.lineMsg); |
||||
|
console.log("总的数据", this.allDrawMsg); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initMap(); |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 初始化一个 openlayers 地图 |
||||
|
*/ |
||||
|
initMap() { |
||||
|
// let target = "map"; //跟页面元素的 id 绑定来进行渲染 |
||||
|
// let tileLayer = [ |
||||
|
// new Tile({ |
||||
|
// source: new OSM(), |
||||
|
// }), |
||||
|
// ]; |
||||
|
// let view = new View({ |
||||
|
// center: fromLonLat([115.36502, 22.7787]), //地图中心坐标 |
||||
|
// zoom: 9, |
||||
|
// projection: this.projection, |
||||
|
// multiWorld: true, |
||||
|
// }); |
||||
|
// this.map = new Map({ |
||||
|
// target: target, //绑定dom元素进行渲染 |
||||
|
// layers: tileLayer, //配置地图数据源 |
||||
|
// view: view, //配置地图显示的options配置（坐标系，中心点，缩放级别等） |
||||
|
// }); |
||||
|
|
||||
|
const projection = "EPSG:4326"; |
||||
|
this.map = new Map({ |
||||
|
target: "map", |
||||
|
view: new View({ |
||||
|
center: [115.36502, 22.7787], |
||||
|
zoom: 7, |
||||
|
// maxZoom: 12, |
||||
|
minZoom: 5, |
||||
|
projection: projection, |
||||
|
multiWorld: true, |
||||
|
}), |
||||
|
}); |
||||
|
var matrixIds = new Array(18); |
||||
|
var resolutions = []; |
||||
|
for (var z = 0; z < 18; ++z) { |
||||
|
var res = 360 / 512; //0.703125 |
||||
|
resolutions[z] = res / Math.pow(2, z - 1); |
||||
|
matrixIds[z] = z; |
||||
|
} |
||||
|
|
||||
|
// 加载第一层地图轮廓图层 |
||||
|
var osm = new Tile({ |
||||
|
source: new WMTS({ |
||||
|
url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=42a5dfa93ea7a9cbf423c4c1bb9ec16d", |
||||
|
service: "wmts", |
||||
|
version: "1.0.0", |
||||
|
matrixSet: "c", |
||||
|
layer: "img", |
||||
|
format: "Tile", |
||||
|
projection: "EPSG:4326", |
||||
|
tileGrid: new WMTSTileGrid({ |
||||
|
extent: [-180, -90, 180, 90], |
||||
|
origin: [-180, 90], |
||||
|
resolutions: resolutions, |
||||
|
matrixIds: matrixIds, |
||||
|
}), |
||||
|
style: "default", |
||||
|
// wrapX: false |
||||
|
}), |
||||
|
}); |
||||
|
this.map.addLayer(osm); |
||||
|
|
||||
|
// let point = new ol.geom.Point([115.36502, 22.7787]); |
||||
|
// this.map.addLayer(point); |
||||
|
|
||||
|
// 加载其他数据图层 |
||||
|
// 所需展示的所有图层列表 |
||||
|
// 不同类型的地图服务主要区分于type |
||||
|
const layerList = [ |
||||
|
// { |
||||
|
// index: 0, |
||||
|
// code: 'YZT1610609202768', |
||||
|
// name: '广东2020年7_17级矢量图', |
||||
|
// url: 'http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke', |
||||
|
// type: 'YZT-WMTS' |
||||
|
// }, |
||||
|
{ |
||||
|
index: 1, |
||||
|
code: "YZT1597746916315", |
||||
|
name: "广东7_17级界线电子地图", |
||||
|
url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke", |
||||
|
type: "YZT-WMTS", |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
code: "YZT1610609681389", |
||||
|
name: "广东2020年7_17级矢量注记", |
||||
|
url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke", |
||||
|
type: "YZT-WMTS", |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
code: "0", |
||||
|
text: "", |
||||
|
url: "http://19.25.37.25:8090/iserver/services/map-XingZhengQuHua/rest/maps/行政区划", |
||||
|
type: "rest-map", |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
code: "0", |
||||
|
text: "", |
||||
|
url: "http://19.25.35.204:31190/iserver/services/map-GuangDongShengDaoLu/rest/maps/广东省道路", |
||||
|
type: "rest-map", |
||||
|
}, |
||||
|
{ |
||||
|
index: 5, |
||||
|
code: "0", |
||||
|
text: "", |
||||
|
url: "http://19.25.35.204:31190/iserver/services/map-ShengJiXingZhengQuHuaMian/rest/maps/省级行政区划面", |
||||
|
type: "rest-map", |
||||
|
}, |
||||
|
// { |
||||
|
// index: 6, |
||||
|
// code: '0', |
||||
|
// text: '', |
||||
|
// url: 'http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiKu/rest/maps/水库', |
||||
|
// type: 'rest-map' |
||||
|
// } |
||||
|
// { |
||||
|
// index: 7, |
||||
|
// code: '0', |
||||
|
// text: '', |
||||
|
// url: 'http://19.25.35.204:31190/iserver/services/map-ShiJiXingZhengQuHuaMian/rest/maps/市级行政区划面', |
||||
|
// type: 'rest-map' |
||||
|
// } |
||||
|
// index: 8, |
||||
|
// code: '0', |
||||
|
// text: '', |
||||
|
// url: 'http://19.25.35.204:31190/iserver/services/map-XianJiXingZhengQuHuaMian/rest/maps/县级行政区划面', |
||||
|
// type: 'rest-map' |
||||
|
// } |
||||
|
// index: 9, |
||||
|
// code: '0', |
||||
|
// text: '', |
||||
|
// url: 'http://19.25.35.204:31190/iserver/services/map-ZhenJiXingZhengQuHuaMian/rest/maps/镇级行政区划面', |
||||
|
// type: 'rest-map' |
||||
|
// } |
||||
|
// index: 10, |
||||
|
// code: '0', |
||||
|
// text: '', |
||||
|
// url: 'http://19.25.35.204:31190/iserver/services/map-CunJiXingZhengQuHuaMian/rest/maps/村级行政区划面', |
||||
|
// type: 'rest-map' |
||||
|
// } |
||||
|
]; |
||||
|
// 绘制图层列表 |
||||
|
for (let i = 0; i < layerList.length; i++) { |
||||
|
loadIndex(layerList[i].type, i); |
||||
|
} |
||||
|
|
||||
|
// 初始化绘制点、线图层 |
||||
|
// 创建一个矢量数据源 |
||||
|
this.drawVectorSource = new VectorSource({ |
||||
|
wrapX: false, |
||||
|
}); |
||||
|
// 创建一个矢量图层并将数据源与之关联 |
||||
|
this.drawVectorLayer = new VectorLayer({ |
||||
|
source: this.drawVectorSource, |
||||
|
style: new Style({ |
||||
|
fill: new Fill({ |
||||
|
color: "rgba(255, 255, 255, 0.2)", // 填充颜色 |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: "#409eff", // 边框颜色 |
||||
|
width: 4, // 边框宽度 |
||||
|
}), |
||||
|
image: new Circle({ |
||||
|
radius: 8, // 圆点半径 |
||||
|
fill: new Fill({ |
||||
|
color: "blue", // 圆点填充颜色 |
||||
|
}), |
||||
|
}), |
||||
|
}), |
||||
|
}); |
||||
|
this.map.addLayer(this.drawVectorLayer); |
||||
|
|
||||
|
// 监听事件 |
||||
|
// 监听点图层的change事件来获取点坐标 |
||||
|
|
||||
|
// this.map.getViewport().addEventListener('click', () => { |
||||
|
// this.drawVectorSource.on('addfeature', (event) => { |
||||
|
// const coordinate = event.feature.getGeometry().getCoordinates(); |
||||
|
// console.log(coordinate); |
||||
|
// }); |
||||
|
// }); |
||||
|
|
||||
|
function loadIndex(type, index) { |
||||
|
var path = ""; |
||||
|
if (type === "YZT-WMTS") { |
||||
|
path = "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities"; |
||||
|
} else if (type === "rest-map") { |
||||
|
} else { |
||||
|
path = "VERSION=1.0.0&REQUEST=GetFeature&SERVICE=WFS"; |
||||
|
} |
||||
|
let xhr = new XMLHttpRequest(); |
||||
|
let sign = ""; |
||||
|
xhr.open( |
||||
|
"GET", |
||||
|
layerList[index].url.replace( |
||||
|
/{{serviceCode}}/, |
||||
|
layerList[index].code |
||||
|
) + |
||||
|
sign + |
||||
|
path |
||||
|
); |
||||
|
xhr.onload = function () { |
||||
|
let data = xhr.response; |
||||
|
if (type === "YZT-WMTS") { |
||||
|
addYztWmtsLayer(data, index); |
||||
|
} else if (type === "YZT-YSFW") { |
||||
|
addYsfwLayer(data, index); |
||||
|
} else { |
||||
|
addRestMapLayer(layerList[index], index); |
||||
|
} |
||||
|
}; |
||||
|
xhr.send(); |
||||
|
} |
||||
|
|
||||
|
// 加载wmts服务 |
||||
|
function addYztWmtsLayer(res, index) { |
||||
|
console.log(layerList[index]); |
||||
|
console.log("加载次数"); |
||||
|
// console.log("输出WMTS服务数据", res); |
||||
|
var format = new WMTSCapabilities(); |
||||
|
if (!res) { |
||||
|
return; |
||||
|
} |
||||
|
var result = format.read(res); |
||||
|
const item = result.Contents.Layer[0]; |
||||
|
const layerParam = { |
||||
|
layerName: item.Abstract || item.Title, |
||||
|
styleName: item.Style[0].Identifier, |
||||
|
tilematrixset: item.TileMatrixSetLink[0].TileMatrixSet, |
||||
|
format: item.Format[0], |
||||
|
}; |
||||
|
var projectionExtent = [-180, -90, 180, 90]; |
||||
|
const size = getWidth(projectionExtent) / 256; |
||||
|
const resolutionsYzt = []; |
||||
|
const matrixIdsTzt = []; |
||||
|
for (var z = 2; z < 19; ++z) { |
||||
|
resolutionsYzt[z] = size / Math.pow(2, z); |
||||
|
matrixIdsTzt.push(z - 2); |
||||
|
} |
||||
|
const source = new WMTS({ |
||||
|
url: |
||||
|
layerList[index].url.replace( |
||||
|
/{{serviceCode}}/, |
||||
|
layerList[index].code |
||||
|
) + |
||||
|
"?layer=" + |
||||
|
layerParam.layerName, |
||||
|
style: layerParam.styleName, |
||||
|
matrixSet: layerParam.tilematrixset, |
||||
|
format: layerParam.format, |
||||
|
wrapX: true, |
||||
|
tileGrid: new WMTSTileGrid({ |
||||
|
origin: getTopLeft(projectionExtent), |
||||
|
resolutions: resolutionsYzt, |
||||
|
matrixIds: matrixIdsTzt, |
||||
|
}), |
||||
|
}); |
||||
|
let lastIndex = index + 10 * (1 + index); |
||||
|
var layer = new Tile({ |
||||
|
id: lastIndex, |
||||
|
source: source, |
||||
|
}); |
||||
|
console.log(source.urls); |
||||
|
layer.setZIndex(lastIndex); |
||||
|
this.map.addLayer(layer); |
||||
|
} |
||||
|
// ------------------------------------------------------------------------------------- |
||||
|
// 接入粤政图要素服务(wfs) |
||||
|
function addYsfwLayer(res, index) { |
||||
|
console.log("输出WFS服务数据", res); |
||||
|
var result = res; |
||||
|
var format = new GML2(); |
||||
|
var features = format.readFeatures(result); |
||||
|
var style = null; |
||||
|
if (features[0].getGeometry() instanceof ol.geom.Polygon) { |
||||
|
style = new Style({ |
||||
|
stroke: new Stroke({ |
||||
|
color: "#868f98", |
||||
|
width: 1, |
||||
|
}), |
||||
|
fill: new Fill({ |
||||
|
color: "#DEECFB", |
||||
|
}), |
||||
|
}); |
||||
|
} else if (features[0].getGeometry() instanceof ol.geom.Point) { |
||||
|
features.forEach((each) => { |
||||
|
var info = each.values_; |
||||
|
var name = ""; |
||||
|
for (let key in info) { |
||||
|
if (key.indexOf("名称") > -1) { |
||||
|
name = info[key]; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
style = new Style({ |
||||
|
image: new Circle({ |
||||
|
fill: new Fill({ |
||||
|
color: "#ff0721", |
||||
|
}), |
||||
|
radius: 5, |
||||
|
}), |
||||
|
text: new Text({ |
||||
|
text: name, |
||||
|
offsetY: 30, |
||||
|
font: "12px Calibri,sans-serif", |
||||
|
fill: new Fill({ |
||||
|
color: "#fff", |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: "#f00", |
||||
|
width: 3, |
||||
|
}), |
||||
|
}), |
||||
|
}); |
||||
|
each.setStyle(style); |
||||
|
}); |
||||
|
} else if (features[0].getGeometry() instanceof ol.geom.LineString) { |
||||
|
style = new Style({ |
||||
|
stroke: new Stroke({ |
||||
|
color: "#2899fb", |
||||
|
width: 4, |
||||
|
}), |
||||
|
}); |
||||
|
} |
||||
|
var source = new VectorSource({ |
||||
|
features: features, |
||||
|
}); |
||||
|
var wfsObj = { source: source, style: style }; |
||||
|
|
||||
|
var vectorLayer = new VectorLayer({ |
||||
|
id: layerList[index].code, |
||||
|
source: wfsObj.source, |
||||
|
style: wfsObj.style, |
||||
|
}); |
||||
|
this.map.addLayer(vectorLayer); |
||||
|
} |
||||
|
|
||||
|
// 接入rest-map服务 |
||||
|
function addRestMapLayer(params, index) { |
||||
|
var restLayer = new Tile({ |
||||
|
source: new TileSuperMapRest({ |
||||
|
url: params.url, |
||||
|
prjCoordSys: { epsgCode: 4326 }, |
||||
|
projection: "EPSG:4326", |
||||
|
}), |
||||
|
}); |
||||
|
let lastIndex = index + 10 * (1 + index); |
||||
|
restLayer.setZIndex(lastIndex); |
||||
|
this.map.addLayer(restLayer); |
||||
|
} |
||||
|
// 回显 |
||||
|
this.handleReturnShow(); |
||||
|
}, |
||||
|
// 绘制点按钮 |
||||
|
handlePointDraw() { |
||||
|
let that = this; |
||||
|
let pointBtnDom = document.getElementById("drawPointBtn"); |
||||
|
let pointBtnText = pointBtnDom.innerHTML; |
||||
|
let lineBtnDom = document.getElementById("drawLineBtn"); |
||||
|
let lineBtnText = lineBtnDom.innerHTML; |
||||
|
if (this.lineDrawFlag) { |
||||
|
this.map.removeInteraction(this.lineDrawFlag); |
||||
|
lineBtnDom.innerHTML = "绘制线"; |
||||
|
} |
||||
|
if (pointBtnText === "绘制点") { |
||||
|
pointBtnDom.innerHTML = "取消绘制点"; |
||||
|
this.pointDrawFlag = new Draw({ |
||||
|
type: "Point", |
||||
|
source: that.drawVectorSource, |
||||
|
freehand: false, |
||||
|
style: new Style({ |
||||
|
fill: new Fill({ |
||||
|
color: "rgba(255, 255, 255, 0.2)", // 填充颜色 |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: "#409eff", // 边框颜色 |
||||
|
width: 4, // 边框宽度 |
||||
|
}), |
||||
|
image: new Circle({ |
||||
|
radius: 8, // 圆点半径 |
||||
|
fill: new Fill({ |
||||
|
color: "blue", // 圆点填充颜色 |
||||
|
}), |
||||
|
}), |
||||
|
}), |
||||
|
}); |
||||
|
this.map.addInteraction(this.pointDrawFlag); |
||||
|
} else { |
||||
|
pointBtnDom.innerHTML = "绘制点"; |
||||
|
this.map.removeInteraction(this.pointDrawFlag); |
||||
|
} |
||||
|
|
||||
|
// 监听 draw 结束事件 |
||||
|
this.pointDrawFlag.on("drawend", function (event) { |
||||
|
// console.log(77777, that.all_draw_feature, event); |
||||
|
that.all_draw_feature.push(["point", event.feature]); |
||||
|
// console.log(888888, that.all_draw_feature); |
||||
|
that.all_point_coords.push(event.target.sketchCoords_); |
||||
|
console.log(event); |
||||
|
console.log("坐标数组", that.all_point_coords); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 绘制线按钮 |
||||
|
handleLineDraw() { |
||||
|
let that = this; |
||||
|
let pointBtnDom = document.getElementById("drawPointBtn"); |
||||
|
let pointBtnText = pointBtnDom.innerHTML; |
||||
|
let lineBtnDom = document.getElementById("drawLineBtn"); |
||||
|
let lineBtnText = lineBtnDom.innerHTML; |
||||
|
if (this.pointDrawFlag) { |
||||
|
this.map.removeInteraction(this.pointDrawFlag); |
||||
|
pointBtnDom.innerHTML = "绘制点"; |
||||
|
} |
||||
|
if (lineBtnText === "绘制线") { |
||||
|
lineBtnDom.innerHTML = "取消绘制线"; |
||||
|
this.lineDrawFlag = new Draw({ |
||||
|
type: "LineString", |
||||
|
source: that.drawVectorSource, |
||||
|
freehand: false, |
||||
|
// style: new Style({ |
||||
|
// fill: new Fill({ |
||||
|
// color: 'rgba(255, 255, 255, 0.2)' // 填充颜色 |
||||
|
// }), |
||||
|
// stroke: new Stroke({ |
||||
|
// color: '#409eff', // 边框颜色 |
||||
|
// width: 4 // 边框宽度 |
||||
|
// }), |
||||
|
// image: new Circle({ |
||||
|
// radius: 8, // 圆点半径 |
||||
|
// fill: new Fill({ |
||||
|
// color: 'blue' // 圆点填充颜色 |
||||
|
// }) |
||||
|
// }) |
||||
|
// }) |
||||
|
}); |
||||
|
this.map.addInteraction(that.lineDrawFlag); |
||||
|
} else { |
||||
|
lineBtnDom.innerHTML = "绘制线"; |
||||
|
this.map.removeInteraction(that.lineDrawFlag); |
||||
|
} |
||||
|
|
||||
|
// 监听 draw 结束事件 |
||||
|
this.lineDrawFlag.on("drawend", function (event) { |
||||
|
console.log(event); |
||||
|
that.all_draw_feature.push(["line", event.feature]); |
||||
|
that.all_line_coords.push(event.target.sketchCoords_); |
||||
|
console.log(that.all_draw_feature); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 撤销 |
||||
|
handleReturn() { |
||||
|
console.log(777, this.all_draw_feature); |
||||
|
var pop = this.all_draw_feature.pop(); |
||||
|
console.log("当前图像内容 " + this.all_draw_feature.length, pop); |
||||
|
if (pop == undefined) { |
||||
|
alert("已全部撤销"); |
||||
|
} else if (pop[0] === "point") { |
||||
|
this.drawVectorLayer.getSource().removeFeature(pop[1]); |
||||
|
this.all_point_coords.pop(); |
||||
|
} else if (pop[0] === "line") { |
||||
|
this.drawVectorLayer.getSource().removeFeature(pop[1]); |
||||
|
this.all_line_coords.pop(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 清空绘制图层 |
||||
|
handleClearDrawLayer() { |
||||
|
this.drawVectorSource.clear(); |
||||
|
this.all_draw_feature = []; |
||||
|
this.all_point_coords = []; |
||||
|
this.all_line_coords = []; |
||||
|
}, |
||||
|
|
||||
|
// 保存绘制 |
||||
|
handleSaveCoords() { |
||||
|
if (this.all_point_coords.length == 0 && this.all_line_coords == 0) { |
||||
|
alert("暂无需要保存数据"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
console.log("保存所有的交互绘制"); |
||||
|
console.log("all_draw_feature", this.all_draw_feature); |
||||
|
console.log("all_point_coords", this.all_point_coords); |
||||
|
console.log("all_line_coords", this.all_line_coords); |
||||
|
|
||||
|
// 发送保存请求 |
||||
|
// let url = ""; |
||||
|
// let xhr = new XMLHttpRequest(); |
||||
|
// let params = { |
||||
|
// pointList: this.all_point_coords, |
||||
|
// lineList: this.all_line_coords |
||||
|
// }; |
||||
|
// xhr.setRequestHeader('Content-Type', 'application/json'); |
||||
|
// xhr.open('POST', url, true); |
||||
|
// xhr.send(JSON.stringify(params)); |
||||
|
// xhr.onreadystatechange = function () { |
||||
|
// if (xhr.readyState === 4 && xhr.status === 200) { |
||||
|
// // 请求成功 |
||||
|
// console.log(xhr.responseText); |
||||
|
// } |
||||
|
// }; |
||||
|
|
||||
|
// 向父组件传数据 |
||||
|
this.$emit( |
||||
|
"getMapData", |
||||
|
this.all_point_coords, |
||||
|
this.all_line_coords, |
||||
|
this.all_draw_feature |
||||
|
); |
||||
|
|
||||
|
// 测试 |
||||
|
// localStorage.setItem("pointList", this.all_point_coords); |
||||
|
// localStorage.setItem("lineList", this.all_line_coords); |
||||
|
|
||||
|
// 清除所有 |
||||
|
this.handleClearDrawLayer(); |
||||
|
// 取消绘制,并修改文字 |
||||
|
let pointBtnDom = document.getElementById("drawPointBtn"); |
||||
|
let pointBtnText = pointBtnDom.innerHTML; |
||||
|
let lineBtnDom = document.getElementById("drawLineBtn"); |
||||
|
let lineBtnText = lineBtnDom.innerHTML; |
||||
|
if (pointBtnText === "取消绘制点") { |
||||
|
pointBtnDom.innerHTML = "绘制点"; |
||||
|
this.map.removeInteraction(this.pointDrawFlag); |
||||
|
} |
||||
|
if (lineBtnText === "取消绘制线") { |
||||
|
lineBtnDom.innerHTML = "绘制线"; |
||||
|
this.map.removeInteraction(this.lineDrawFlag); |
||||
|
} |
||||
|
// alert("保存成功！"); |
||||
|
}, |
||||
|
|
||||
|
// 处理回显 |
||||
|
handleReturnShow() { |
||||
|
// 处理点数据 |
||||
|
let features = []; |
||||
|
// this.all_point_coords.forEach((item) => { |
||||
|
// let obj = new Feature({ |
||||
|
// geometry: new Point(item), |
||||
|
// }); |
||||
|
// // 点样式 |
||||
|
// obj.setStyle( |
||||
|
// new Style({ |
||||
|
// image: new Circle({ |
||||
|
// radius: 8, |
||||
|
// fill: new Fill({ |
||||
|
// color: "blue", |
||||
|
// }), |
||||
|
// }), |
||||
|
// }) |
||||
|
// ); |
||||
|
// features.push(obj); |
||||
|
// // this.all_draw_feature.push(["point", obj]); |
||||
|
// }); |
||||
|
|
||||
|
// // 处理线数据 |
||||
|
// this.all_line_coords.forEach((item) => { |
||||
|
// let obj = new Feature({ |
||||
|
// geometry: new LineString(item), |
||||
|
// }); |
||||
|
// // 线样式 |
||||
|
// obj.setStyle( |
||||
|
// new Style({ |
||||
|
// stroke: new Stroke({ |
||||
|
// color: "#409eff", |
||||
|
// width: 4, |
||||
|
// }), |
||||
|
// }) |
||||
|
// ); |
||||
|
// features.push(obj); |
||||
|
// // this.all_draw_feature.push(["line", obj]); |
||||
|
// }); |
||||
|
|
||||
|
features = this.allDrawMsg.map((item) => item[1]); |
||||
|
|
||||
|
console.log(features); |
||||
|
// 创建一个VectorSource并添加几个点 |
||||
|
this.drawVectorSource = new VectorSource({ |
||||
|
features, |
||||
|
}); |
||||
|
let that = this; |
||||
|
// 创建一个VectorLayer并使用上面定义的VectorSource |
||||
|
this.drawVectorLayer = new VectorLayer({ |
||||
|
source: that.drawVectorSource, |
||||
|
style: new Style({ |
||||
|
fill: new Fill({ |
||||
|
color: "rgba(255, 255, 255, 0.2)", // 填充颜色 |
||||
|
}), |
||||
|
stroke: new Stroke({ |
||||
|
color: "#409eff", // 边框颜色 |
||||
|
width: 4, // 边框宽度 |
||||
|
}), |
||||
|
image: new Circle({ |
||||
|
radius: 8, // 圆点半径 |
||||
|
fill: new Fill({ |
||||
|
color: "blue", // 圆点填充颜色 |
||||
|
}), |
||||
|
}), |
||||
|
}), |
||||
|
// style: new ol.style({ |
||||
|
// image: new ol.style({ |
||||
|
// radius: 5, |
||||
|
// fill: new Fill({ color: 'red' }), |
||||
|
// stroke: new Stroke({ color: 'black', width: 2 }), |
||||
|
// }), |
||||
|
// }), |
||||
|
}); |
||||
|
this.map.addLayer(this.drawVectorLayer); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
#map { |
||||
|
height: 700px; |
||||
|
} |
||||
|
.btn-box { |
||||
|
z-index: 999999; |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.btn-box .btn { |
||||
|
padding: 5px 15px; |
||||
|
background: blue; |
||||
|
border-radius: 4px; |
||||
|
margin: 0 8px; |
||||
|
font-size: 12px; |
||||
|
color: #fff; |
||||
|
user-select: none; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.btn-box .btn:hover { |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue