|
|
|
@ -58,6 +58,7 @@ import VectorSource from "ol/source/Vector.js"; |
|
|
|
import GeoJSON from "ol/format/GeoJSON.js"; |
|
|
|
import { Polygon } from "ol/geom"; |
|
|
|
import Feature from "ol/Feature"; |
|
|
|
import { click, pointerMove } from "ol/events/condition.js"; |
|
|
|
|
|
|
|
let myMap; |
|
|
|
let scene; |
|
|
|
@ -191,39 +192,6 @@ export default { |
|
|
|
return []; |
|
|
|
} |
|
|
|
|
|
|
|
const styles = [ |
|
|
|
new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(255, 100, 60, 0.5)", |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "rgba(220, 150, 120, 0.9)", |
|
|
|
lineDash: [10, 20], |
|
|
|
width: 2, |
|
|
|
}), |
|
|
|
}), |
|
|
|
new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(43, 231, 253, 0.3)", |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "rgba(33, 201, 223, 0.8)", |
|
|
|
lineDash: [10, 20], |
|
|
|
width: 2, |
|
|
|
}), |
|
|
|
}), |
|
|
|
new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(255, 255, 50, 0.3)", |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "rgba(200, 200, 50, 0.9)", |
|
|
|
lineDash: [10, 20], |
|
|
|
width: 2, |
|
|
|
}), |
|
|
|
}), |
|
|
|
]; |
|
|
|
|
|
|
|
const polygons = [ |
|
|
|
...srcGridData.children |
|
|
|
.filter((item) => item.coordinates.length > 0) |
|
|
|
@ -243,10 +211,7 @@ export default { |
|
|
|
2 |
|
|
|
).filter((item) => item.length == 2), |
|
|
|
]), |
|
|
|
style: styles[index % styles.length], |
|
|
|
}); |
|
|
|
console.log(index % styles.length); |
|
|
|
f.setStyle(styles[index % styles.length]); |
|
|
|
return f; |
|
|
|
}), |
|
|
|
]; |
|
|
|
@ -382,7 +347,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
iniMap() { |
|
|
|
async iniMap() { |
|
|
|
const { darkStyle, lightStyle, srcGridData } = this; |
|
|
|
if (!srcGridData) return false; |
|
|
|
|
|
|
|
@ -496,15 +461,17 @@ export default { |
|
|
|
// console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); |
|
|
|
}); |
|
|
|
|
|
|
|
await nextTick(); |
|
|
|
this.iniGridArea(myMap); |
|
|
|
|
|
|
|
myMap.on("loadend", async () => { |
|
|
|
console.log("--------地图加载完毕"); |
|
|
|
console.log("--------地图加载新东西完毕"); |
|
|
|
// if (mapType == "td") { |
|
|
|
// this.iniMapBase(scene); |
|
|
|
// } else if (mapType == "tdzw") { |
|
|
|
// this.iniMapBase2(scene); |
|
|
|
// } |
|
|
|
|
|
|
|
this.iniGridArea(myMap); |
|
|
|
// this.iniMapDot(scene); |
|
|
|
// this.iniMapDot2(scene); |
|
|
|
// await nextTick(0); |
|
|
|
@ -515,18 +482,101 @@ export default { |
|
|
|
iniGridArea(map) { |
|
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData } = this; |
|
|
|
|
|
|
|
console.log("--------------初始化网格"); |
|
|
|
|
|
|
|
const polygonSource = new VectorSource({ |
|
|
|
features: polygonData, |
|
|
|
}); |
|
|
|
|
|
|
|
polygonLayer = new VectorLayer({ |
|
|
|
title: "网格多边形", |
|
|
|
source: new VectorSource({ |
|
|
|
features: polygonData, |
|
|
|
}), |
|
|
|
opacity: 0.8, |
|
|
|
title: "gridArea", |
|
|
|
source: polygonSource, |
|
|
|
opacity: 1, |
|
|
|
className: "", |
|
|
|
zIndex: 1, |
|
|
|
zIndex: 10, |
|
|
|
background: "", |
|
|
|
}); |
|
|
|
|
|
|
|
polygonLayer.getSource().on("featuresloadstart", async (evt) => { |
|
|
|
console.log("===============featuresloadstart", evt); |
|
|
|
|
|
|
|
await nextTick(); |
|
|
|
polygonLayer |
|
|
|
.getSource() |
|
|
|
.getFeatures() |
|
|
|
.forEach((item, index) => { |
|
|
|
const baseStyles = [ |
|
|
|
new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(255, 100, 60, 0.5)", |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "rgba(220, 150, 120, 0.9)", |
|
|
|
width: 2, |
|
|
|
}), |
|
|
|
}), |
|
|
|
new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(43, 231, 253, 0.3)", |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "rgba(33, 201, 223, 0.8)", |
|
|
|
width: 2, |
|
|
|
}), |
|
|
|
}), |
|
|
|
new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(255, 255, 50, 0.3)", |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "rgba(200, 200, 50, 0.9)", |
|
|
|
width: 2, |
|
|
|
}), |
|
|
|
}), |
|
|
|
]; |
|
|
|
|
|
|
|
setInterval(() => { |
|
|
|
let currStyle = item.getStyle(); |
|
|
|
if (!Array.isArray(currStyle)) { |
|
|
|
item.setStyle([ |
|
|
|
baseStyles[index % baseStyles.length], |
|
|
|
new Style({ |
|
|
|
stroke: new Stroke({ |
|
|
|
color: [0, 0, 0, 0.5], |
|
|
|
width: 2, |
|
|
|
lineDash: [6, 12], |
|
|
|
lineDashOffset: 0, |
|
|
|
}), |
|
|
|
}), |
|
|
|
]); |
|
|
|
} else { |
|
|
|
let currStroke = currStyle[1].getStroke(); |
|
|
|
let lineDashOffset = currStroke.getLineDashOffset(); |
|
|
|
currStroke.setLineDashOffset( |
|
|
|
lineDashOffset == 16 ? 0 : lineDashOffset + 2 |
|
|
|
); |
|
|
|
item.setStyle(currStyle); |
|
|
|
} |
|
|
|
}, 100); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
let clickSelect = new Select({ |
|
|
|
condition: click, |
|
|
|
layers: [polygonLayer], |
|
|
|
}); |
|
|
|
clickSelect.on("select", (e) => { |
|
|
|
let fet = e.selected[0]; |
|
|
|
console.log("点击我了", fet.getProperties()); |
|
|
|
// let props = fet.getProperties().properties; |
|
|
|
// this.$emit("clickAgency", props); |
|
|
|
// if (props.level == "grid") { |
|
|
|
// this.handleClickDot({ ...props, placeType: "grid" }, props.center); |
|
|
|
// } |
|
|
|
}); |
|
|
|
|
|
|
|
map.addLayer(polygonLayer); |
|
|
|
map.addInteraction(clickSelect); |
|
|
|
}, |
|
|
|
updateGridArea() {}, |
|
|
|
|
|
|
|
|
dai
3 years ago