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