Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 KeXuCong
|
a25c58c930 | 8 months ago |
5 changed files with 63456 additions and 4 deletions
File diff suppressed because it is too large
@ -0,0 +1,945 @@ |
|||
<template> |
|||
<div id="content"> |
|||
<div id="map" ref="map"></div> |
|||
<div id="popup" class="ol-popup" style="background-color: #fff"> |
|||
<div id="popup-closer" class="popup-closer"> |
|||
<i class="el-icon-error"></i> |
|||
</div> |
|||
<div id="popup-content" class="popup-content"></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 Cluster from "ol/source/Cluster.js"; |
|||
import { TileSuperMapRest } from "@supermap/iclient-ol/mapping/TileSuperMapRest"; |
|||
|
|||
import VectorLayer from "ol/layer/Vector.js"; |
|||
import { Style, Fill, Stroke, Circle, Text } from "ol/style"; |
|||
|
|||
import { Draw, Select } from "ol/interaction"; |
|||
import { SingleClick } from "ol/events/condition"; |
|||
|
|||
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"; |
|||
import GeoJSON from "ol/format/GeoJSON.js"; |
|||
import Overlay from "ol/Overlay"; |
|||
|
|||
import guangdongJson from "./guangdong.json"; |
|||
|
|||
export default { |
|||
props: { |
|||
potMsg: { type: Array }, |
|||
lineMsg: { type: Array }, |
|||
allDrawMsg: { type: Array }, |
|||
}, |
|||
data() { |
|||
return { |
|||
map: null, |
|||
// projection: "EPSG:4326", |
|||
pointDrawFlag: "", |
|||
lineDrawFlag: "", |
|||
sketch: "", // 存储草图 |
|||
geometries: [], // 存储绘制的几何图形 |
|||
lastPointFeature: null, |
|||
lastLineFeature: null, |
|||
all_draw_feature: [], |
|||
all_point_coords: [], |
|||
all_line_coords: [], |
|||
pointVectorSource: null, |
|||
lineVectorSource: null, |
|||
ClusterSource: null, |
|||
pointVectorLayer: null, |
|||
lineVectorLayer: null, |
|||
zoom: 10, |
|||
interaction: null, |
|||
lonALat: { |
|||
lon: null, |
|||
lat: null, |
|||
}, |
|||
viewCenter: [113.36502, 22.9787], |
|||
}; |
|||
}, |
|||
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]; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initMap(); |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化一个 openlayers 地图 |
|||
*/ |
|||
initMap() { |
|||
let that = this; |
|||
const projection = "EPSG:4326"; |
|||
this.map = new Map({ |
|||
target: "map", |
|||
view: new View({ |
|||
center: that.viewCenter, |
|||
zoom: 10, |
|||
// 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 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' |
|||
// } |
|||
{ |
|||
index: 11, |
|||
code: "0", |
|||
text: "", |
|||
url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiZha/rest/maps/水闸", |
|||
type: "rest-map", |
|||
}, |
|||
{ |
|||
index: 12, |
|||
code: "0", |
|||
text: "", |
|||
url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuDiFang/rest/maps/堤防", |
|||
type: "rest-map", |
|||
}, |
|||
]; |
|||
// 绘制图层列表 |
|||
for (let i = 0; i < layerList.length; i++) { |
|||
loadIndex(layerList[i].type, i); |
|||
} |
|||
|
|||
// 初始化绘制点、线图层 |
|||
// 创建一个矢量数据源 |
|||
this.pointVectorSource = new VectorSource({ |
|||
wrapX: false, |
|||
}); |
|||
// 创建一个矢量图层并将数据源与之关联 |
|||
this.pointVectorLayer = new VectorLayer({ |
|||
source: this.pointVectorSource, |
|||
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.lineVectorLayer = new VectorLayer({ |
|||
source: this.lineVectorSource, |
|||
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.pointVectorLayer); |
|||
this.map.addLayer(this.lineVectorLayer); |
|||
|
|||
// 监听事件 |
|||
// 监听点图层的change事件来获取点坐标 |
|||
|
|||
// this.map.getViewport().addEventListener('click', () => { |
|||
// this.pointVectorSource.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); |
|||
that.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, |
|||
}); |
|||
that.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); |
|||
that.map.addLayer(restLayer); |
|||
} |
|||
|
|||
// 缩放 |
|||
this.map.on("moveend", function () { |
|||
that.zoom = that.map.getView().getZoom(); |
|||
console.log("zomm", that.zoom); |
|||
}); |
|||
// 鼠标移入元素样式 |
|||
this.map.on("pointermove", (e) => { |
|||
let pixel = this.map.getEventPixel(e.originalEvent); |
|||
let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => { |
|||
return feature; |
|||
}); |
|||
|
|||
if (feature != undefined) { |
|||
this.map.getTargetElement().style.cursor = "pointer"; |
|||
} else { |
|||
this.map.getTargetElement().style.cursor = "auto"; |
|||
} |
|||
}); |
|||
|
|||
// this.addGuangdongJson(); |
|||
this.ProjectCoordinatePoint(); |
|||
this.addPopup(); |
|||
}, |
|||
|
|||
// 加载guangdong.json图层 |
|||
addGuangdongJson() { |
|||
let that = this; |
|||
let features = new GeoJSON().readFeatures(guangdongJson); |
|||
let vectorSource = new VectorSource({ |
|||
features: features, |
|||
}); |
|||
let vectorLayer = new VectorLayer({ |
|||
source: vectorSource, |
|||
style: new Style({ |
|||
fill: new Fill({ |
|||
color: "rgba(255, 255, 255, 0.6)", |
|||
}), |
|||
stroke: new Stroke({ |
|||
color: "#319FD3", |
|||
width: 1, |
|||
}), |
|||
}), |
|||
}); |
|||
that.map.addLayer(vectorLayer); |
|||
}, |
|||
|
|||
// 回显坐标点 |
|||
ProjectCoordinatePoint(data = []) { |
|||
data = [ |
|||
{ |
|||
id: "706cf8d0b46345a5b8663389a07914d5", |
|||
projectName: "test新增专题项目", |
|||
pointLatitudeLongitudeList: |
|||
"[[113.2857,22.9062],[113.2905,22.9038],[113.2929,22.9082],[113.2892,22.9109]]", |
|||
}, |
|||
{ |
|||
id: "b9bdec758a3a4394bde8fc3ceb93ba0e", |
|||
projectName: "清林径水库巡逻哨所工程", |
|||
pointLatitudeLongitudeList: |
|||
"[[114.23961891846892,22.766099930804188]]", |
|||
}, |
|||
{ |
|||
id: "937c6726536e4f87abc1e60b3ff2b409", |
|||
projectName: "深圳市西丽水库除险加固工程", |
|||
pointLatitudeLongitudeList: |
|||
"[[113.95333747585406,22.594931238307186]]", |
|||
}, |
|||
{ |
|||
id: "8c52ba26999d4204970d7b15a02f9648", |
|||
projectName: |
|||
"铁岗、石岩、西丽、长岭皮水库2018年版一级水源保护区调整新增围网工程", |
|||
pointLatitudeLongitudeList: |
|||
"[[113.8929221476539,22.62227051357431],[113.95036032139922,22.600084872053458],[113.90267358885954,22.693537929579115],[114.00273672489836,22.61127967377137]]", |
|||
}, |
|||
{ |
|||
id: "607bc8bc38ed487d83ea906def4f5659", |
|||
projectName: "沙湾河深圳水库截排工程项目施工总承包Ⅲ标段", |
|||
pointLatitudeLongitudeList: "[[111,22],[114.16831,22.61232]]", |
|||
}, |
|||
]; |
|||
|
|||
let TestPointVectorSource = new VectorSource({}); |
|||
|
|||
// 处理点数据 |
|||
data.forEach((pointItem) => { |
|||
pointItem.pointLatitudeLongitudeList = JSON.parse( |
|||
pointItem.pointLatitudeLongitudeList |
|||
); |
|||
pointItem.pointLatitudeLongitudeList.forEach((item) => { |
|||
let obj = new Feature({ |
|||
geometry: new Point(item), |
|||
pointData: pointItem, |
|||
name: "test", |
|||
}); |
|||
TestPointVectorSource.addFeature(obj); |
|||
}); |
|||
}); |
|||
|
|||
let TestClusterSource = new Cluster({ |
|||
distance: 25, |
|||
source: TestPointVectorSource, |
|||
}); |
|||
// 创建一个VectorLayer并使用上面定义的VectorSource |
|||
let TestPointVectorLayer = new VectorLayer({ |
|||
// 非聚合点数据源 |
|||
// source: that.pointVectorSource, |
|||
// 聚合点数据源 |
|||
source: TestClusterSource, |
|||
// 聚合点样式 |
|||
style: function (feature, a, b) { |
|||
let ZB = |
|||
feature.values_.features[0].values_.geometry.flatCoordinates[0].toFixed( |
|||
4 |
|||
) + |
|||
"，" + |
|||
feature.values_.features[0].values_.geometry.flatCoordinates[1].toFixed( |
|||
4 |
|||
); |
|||
let NO = feature.values_.features.length.toString(); |
|||
let resText = NO == "1" ? ZB : NO; |
|||
let offsetY = NO == "1" ? 20 : 0; |
|||
return 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", // 圆点填充颜色 |
|||
}), |
|||
}), |
|||
text: new Text({ |
|||
text: resText, |
|||
offsetY: offsetY, |
|||
fill: new Fill({ |
|||
color: "yellow", |
|||
}), |
|||
}), |
|||
}); |
|||
}, |
|||
zIndex: 1, |
|||
}); |
|||
|
|||
this.map.addLayer(TestPointVectorLayer); |
|||
}, |
|||
|
|||
addPopup(evt, evtFeature) { |
|||
// 使用变量存储弹窗所需的 DOM 对象 |
|||
var container = document.getElementById("popup"); |
|||
var closer = document.getElementById("popup-closer"); |
|||
var content = document.getElementById("popup-content"); |
|||
|
|||
// 创建一个 Overlay 对象，并设置其位置和 DOM 对象 |
|||
let overlay = new Overlay({ |
|||
element: container, |
|||
autoPan: true, |
|||
positioning: "bottom-left", |
|||
stopEvent: true, |
|||
autoPanAnimation: { |
|||
duration: 250, |
|||
}, |
|||
}); |
|||
|
|||
// 将 Overlay 添加到地图中 |
|||
this.map.addOverlay(overlay); |
|||
|
|||
let _that = this; |
|||
/** |
|||
* 为弹窗添加一个响应关闭的函数 |
|||
*/ |
|||
closer.onclick = function () { |
|||
content.style.display = "none"; |
|||
overlay.setPosition(undefined); |
|||
closer.blur(); |
|||
return false; |
|||
}; |
|||
|
|||
this.map.on("singleclick", async (evt) => { |
|||
//判断鼠标是否在要素上 |
|||
let feature = evtFeature |
|||
? evtFeature |
|||
: this.map.forEachFeatureAtPixel( |
|||
evt.pixel, |
|||
function (feature, layer) { |
|||
return feature; |
|||
} |
|||
); |
|||
|
|||
if ( |
|||
feature != undefined && |
|||
feature.getProperties().features.length > 0 |
|||
) { |
|||
console.log(feature.getGeometry().getType()); |
|||
|
|||
console.log(feature.get("name")); |
|||
if (feature.getProperties().features.length === 1) { |
|||
let data = feature.getProperties().features[0].values_.pointData; |
|||
|
|||
const contentHtml = ` |
|||
|
|||
<div><span>项目名：</span>${data.projectName}</div> |
|||
|
|||
`; |
|||
content.innerHTML = contentHtml; |
|||
content.style.display = "block"; |
|||
overlay.setPosition(evt.coordinate); |
|||
} else { |
|||
this.$message.warning("请放大精度查看"); |
|||
return; |
|||
} |
|||
} else { |
|||
//鼠标没有悬停在要素上 |
|||
this.map.getTargetElement().style.cursor = "auto"; |
|||
// content.style.display = "none"; |
|||
// overlay.setPosition(undefined); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 撤销 |
|||
handleReturn() { |
|||
console.log("this.all_draw_feature", this.all_draw_feature); |
|||
|
|||
var pop = this.all_draw_feature.pop(); |
|||
console.log("当前图像内容 " + this.all_draw_feature.length, pop); |
|||
if (pop == undefined) { |
|||
// alert("已全部撤销"); |
|||
this.$message.warning("已全部撤销"); |
|||
} else if (pop[0] === "point") { |
|||
// console.log( |
|||
// "this.pointVectorLayer", |
|||
// this.pointVectorLayer.getSource().getSource() |
|||
// ); |
|||
// this.pointVectorLayer.getSource().getSource().removeFeature(pop[1]); |
|||
this.pointVectorSource.removeFeature(pop[1]); |
|||
this.all_point_coords.pop(); |
|||
} else if (pop[0] === "line") { |
|||
// console.log("this.lineVectorLayer", this.lineVectorLayer.getSource()); |
|||
// this.lineVectorLayer.getSource().removeFeature(pop[1]); |
|||
this.lineVectorSource.removeFeature(pop[1]); |
|||
this.all_line_coords.pop(); |
|||
} |
|||
}, |
|||
|
|||
// 删除 |
|||
handleDelect() { |
|||
let that = this; |
|||
let { delBtnDom } = this.resetBtn("del"); |
|||
if (delBtnDom.innerHTML === "选择删除") { |
|||
delBtnDom.innerHTML = "取消删除"; |
|||
// 创建点选工具 |
|||
this.interaction = new Select({ |
|||
condition: SingleClick, |
|||
style: new Style({ |
|||
image: new Circle({ |
|||
radius: 10, |
|||
stroke: new Stroke({ |
|||
width: 4, |
|||
color: "red", |
|||
}), |
|||
fill: new Fill({ |
|||
color: "green", |
|||
}), |
|||
}), |
|||
stroke: new Stroke({ |
|||
width: 4, |
|||
color: "red", |
|||
}), |
|||
fill: new Fill({ |
|||
color: "green", |
|||
}), |
|||
}), |
|||
layers: [that.pointVectorLayer, that.lineVectorLayer], |
|||
}); |
|||
// 添加单选工具 |
|||
this.map.addInteraction(this.interaction); |
|||
} else { |
|||
delBtnDom.innerHTML = "选择删除"; |
|||
this.map.removeInteraction(this.interaction); |
|||
} |
|||
// 监听select事件 |
|||
this.interaction.on("select", function (e) { |
|||
if (e.selected.length > 0) { |
|||
var feature = e.selected[0]; |
|||
var name = feature.get("name"); |
|||
console.log("选中的几点", e, feature); |
|||
console.log("this.pointVectorLayer", that.pointVectorSource); |
|||
let no = feature.values_.features |
|||
? feature.values_.features.length |
|||
: 1; |
|||
|
|||
console.log("选中个数", no); |
|||
that |
|||
.$confirm("是否删除选中" + no + "个的元素？", "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(function () { |
|||
that.lineVectorSource.removeFeature(feature); |
|||
that.pointVectorSource.getFeatures().forEach(function (feature1) { |
|||
if ( |
|||
feature1.values_.geometry.flatCoordinates[0] === |
|||
feature.values_.geometry.flatCoordinates[0] && |
|||
feature1.values_.geometry.flatCoordinates[1] === |
|||
feature.values_.geometry.flatCoordinates[1] |
|||
) { |
|||
that.pointVectorSource.removeFeature(feature1); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 清空绘制图层 |
|||
handleClearDrawLayer() { |
|||
this.pointVectorSource.clear(); |
|||
this.lineVectorSource.clear(); |
|||
this.all_draw_feature = []; |
|||
this.all_point_coords = []; |
|||
this.all_line_coords = []; |
|||
}, |
|||
|
|||
// 保存绘制 |
|||
handleSaveCoords() { |
|||
this.all_point_coords = this.pointVectorSource |
|||
.getFeatures() |
|||
.map((item) => item.geometryChangeKey_.target.flatCoordinates); |
|||
if (this.all_point_coords.length == 0 && this.all_line_coords == 0) { |
|||
this.$message.warning("暂无需要保存数据"); |
|||
return; |
|||
} |
|||
|
|||
let lineArr = []; |
|||
|
|||
let dataArr = this.lineVectorSource.getFeatures(); |
|||
dataArr.forEach((item) => { |
|||
let lineItem = []; |
|||
for ( |
|||
let i = 0; |
|||
i < item.geometryChangeKey_.target.flatCoordinates.length; |
|||
i += 2 |
|||
) { |
|||
// console.log(88888, this.lineVectorSource.getFeatures()); |
|||
lineItem.push( |
|||
item.geometryChangeKey_.target.flatCoordinates.slice(i, i + 2) |
|||
); |
|||
} |
|||
lineArr.push(lineItem); |
|||
}); |
|||
|
|||
this.all_line_coords = lineArr; |
|||
this.all_draw_feature = this.pointVectorSource |
|||
.getFeatures() |
|||
.map((item) => ["point", item]) |
|||
.concat( |
|||
this.lineVectorSource.getFeatures().map((item) => ["line", item]) |
|||
); |
|||
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); |
|||
|
|||
// 向父组件传数据 |
|||
this.$emit( |
|||
"getMapData", |
|||
this.all_point_coords, |
|||
this.all_line_coords, |
|||
this.all_draw_feature |
|||
); |
|||
|
|||
// 清除所有 |
|||
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("保存成功！"); |
|||
}, |
|||
|
|||
// 搜索 |
|||
handleSearch(item) { |
|||
let lonRules = |
|||
/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{1,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{1,15}|180)$/; |
|||
let latRules = |
|||
/^(\-|\+)?([0-8]?\d{1}\.\d{1,15}|90\.0{1,15}|[0-8]?\d{1}|90)$/; |
|||
if (!lonRules.test(item.lon)) { |
|||
this.$message.warning( |
|||
"请输入正确的经度，例如：-113.27或113.27，小数位数不限" |
|||
); |
|||
return false; |
|||
} |
|||
if (!latRules.test(item.lat)) { |
|||
this.$message.warning( |
|||
"请输入正确的纬度，例如：-23.13或23.13，小数位数不限" |
|||
); |
|||
return false; |
|||
} |
|||
console.log(999, item); |
|||
|
|||
this.map.getView().setCenter([Number(item.lon), Number(item.lat)]); |
|||
this.map.getView().setZoom(13); |
|||
let features = []; |
|||
let obj = new Feature({ |
|||
geometry: new Point([Number(item.lon), Number(item.lat)]), |
|||
}); |
|||
// // 点样式 |
|||
obj.setStyle( |
|||
new Style({ |
|||
text: new Text({ |
|||
// text: item[0].toFixed(4) + "，" + item[1].toFixed(4), |
|||
offsetY: 20, |
|||
// font: "12px Calibri,sans-serif", |
|||
fill: new Fill({ |
|||
color: "#fff", |
|||
}), |
|||
// stroke: new Stroke({ |
|||
// color: "#f00", |
|||
// width: 3, |
|||
// }), |
|||
}), |
|||
image: new Circle({ |
|||
radius: 8, |
|||
fill: new Fill({ |
|||
color: "blue", |
|||
}), |
|||
}), |
|||
}) |
|||
); |
|||
features.push(obj); |
|||
// let that = this; |
|||
// let pointVectorSource = new VectorSource({ |
|||
// features, |
|||
// }); |
|||
// // console.log(444, this.pointVectorSource); |
|||
// let ClusterSource = new Cluster({ |
|||
// distance: 25, |
|||
// source: pointVectorSource, |
|||
// }); |
|||
// this.pointVectorLayer.getSource().clear(); |
|||
// console.log(1111, this.pointVectorLayer.getSource()); |
|||
this.pointVectorSource.addFeatures(features); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
#map { |
|||
height: 700px; |
|||
} |
|||
|
|||
.ol-popup { |
|||
position: relative; |
|||
padding: 20px; |
|||
width: 400px; |
|||
height: auto; |
|||
background-color: rgb(255, 255, 255); |
|||
border-radius: 5px; |
|||
|
|||
.popup-closer { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 5px; |
|||
right: 5px; |
|||
|
|||
&:hover { |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,27 @@ |
|||
[ |
|||
{ |
|||
"id": "706cf8d0b46345a5b8663389a07914d5", |
|||
"projectName": "test新增专题项目", |
|||
"pointLatitudeLongitudeList": "[]" |
|||
}, |
|||
{ |
|||
"id": "b9bdec758a3a4394bde8fc3ceb93ba0e", |
|||
"projectName": "清林径水库巡逻哨所工程", |
|||
"pointLatitudeLongitudeList": "[[114.23961891846892,22.766099930804188]]" |
|||
}, |
|||
{ |
|||
"id": "937c6726536e4f87abc1e60b3ff2b409", |
|||
"projectName": "深圳市西丽水库除险加固工程", |
|||
"pointLatitudeLongitudeList": "[[113.95333747585406,22.594931238307186]]" |
|||
}, |
|||
{ |
|||
"id": "8c52ba26999d4204970d7b15a02f9648", |
|||
"projectName": "铁岗、石岩、西丽、长岭皮水库2018年版一级水源保护区调整新增围网工程", |
|||
"pointLatitudeLongitudeList": "[[113.8929221476539,22.62227051357431],[113.95036032139922,22.600084872053458],[113.90267358885954,22.693537929579115],[114.00273672489836,22.61127967377137]]" |
|||
}, |
|||
{ |
|||
"id": "607bc8bc38ed487d83ea906def4f5659", |
|||
"projectName": "沙湾河深圳水库截排工程项目施工总承包Ⅲ标段", |
|||
"pointLatitudeLongitudeList": "[[111,22],[114.16831,22.61232]]" |
|||
} |
|||
] |
|||
Loading…
Reference in new issue