mirror of
https://github.com/Findus23/RainbowRoad.git
synced 2024-09-18 14:53:51 +02:00
add aerial view
This commit is contained in:
parent
926a741656
commit
0b0ff5eb69
GPG key ID:
54DE4D798D244853
4 changed files with 81 additions and 42 deletions
54
package-lock.json
generated
54
package-lock.json
generated
|
|
@ -482,9 +482,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.11.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
||||
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
|
||||
"version": "18.14.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.2.tgz",
|
||||
"integrity": "sha512-1uEQxww3DaghA0RxqHx0O0ppVlo43pJhepY51OxuQIKHpjbnYLA7vcdwioNPzIqmC2u3I/dmylcqjlh0e7AyUA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.8.2",
|
||||
|
|
@ -577,9 +577,9 @@
|
|||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.0.tgz",
|
||||
"integrity": "sha512-oCye5nHhTypzkdLIvF9SaHfr8UAquqCn1KY3j8vsrjeol8yohAdGxIpRPbF1bOLsx33HOAatdfMX1yzsj2cHwg==",
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
|
|
@ -960,9 +960,9 @@
|
|||
]
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz",
|
||||
"integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==",
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
|
||||
"integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/inflight": {
|
||||
|
|
@ -1128,9 +1128,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/minimist": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
|
||||
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
|
||||
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
|
|
@ -1213,9 +1213,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/ol-mapbox-style": {
|
||||
"version": "9.5.0",
|
||||
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.5.0.tgz",
|
||||
"integrity": "sha512-ArYzeuZ4dOYZ6UnhXK30kNBdouZay/r6LzLsFGnvJ86lxY6ShJu2FtcKCFGCOZoJZYyoLCStHYOHcRrVLDaJ0Q==",
|
||||
"version": "9.7.0",
|
||||
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.7.0.tgz",
|
||||
"integrity": "sha512-YX3u8FBJHsRHaoGxmd724Mp5WPTuV7wLQW6zZhcihMuInsSdCX1EiZfU+8IAL7jG0pbgl5YgC0aWE/MXJcUXxg==",
|
||||
"dependencies": {
|
||||
"@mapbox/mapbox-gl-style-spec": "^13.23.1",
|
||||
"mapbox-to-css-font": "^2.4.1"
|
||||
|
|
@ -1395,9 +1395,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
|
||||
"integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==",
|
||||
"version": "3.17.3",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.17.3.tgz",
|
||||
"integrity": "sha512-p5LaCXiiOL/wrOkj8djsIDFmyU9ysUxcyW+EKRLHb6TKldJzXpImjcRSR+vgo09DBdofGcOoLOsRyxxG2n5/qQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
|
|
@ -1416,9 +1416,9 @@
|
|||
"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.58.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz",
|
||||
"integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==",
|
||||
"version": "1.58.3",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
|
||||
"integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
|
|
@ -1566,15 +1566,15 @@
|
|||
"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz",
|
||||
"integrity": "sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==",
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz",
|
||||
"integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.16.3",
|
||||
"postcss": "^8.4.20",
|
||||
"esbuild": "^0.16.14",
|
||||
"postcss": "^8.4.21",
|
||||
"resolve": "^1.22.1",
|
||||
"rollup": "^3.7.0"
|
||||
"rollup": "^3.10.0"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
|
|
|
|||
25
src/map.ts
25
src/map.ts
|
|
@ -19,17 +19,24 @@ import {router} from "./router";
|
|||
import {transformExtent} from "ol/proj";
|
||||
import {defaults as defaultControls} from 'ol/control';
|
||||
import {InfoButton} from "./info";
|
||||
import {MapButton} from "./toggle";
|
||||
|
||||
const map = new Map({
|
||||
// controls: defaultControls().extend([new AreaControl({router: router})]),
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new OSM({url: "https://maps.lw1.at/tiles/1.0.0/osm/GLOBAL_MERCATOR/{z}/{x}/{y}.png"})
|
||||
source: new OSM({url: "https://maps.lw1.at/tiles/1.0.0/osm/GLOBAL_MERCATOR/{z}/{x}/{y}.png"}),
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new OSM({
|
||||
url: "https://maps.lw1.at/tiles/1.0.0/basemap_orthofoto/GLOBAL_MERCATOR/{z}/{x}/{y}.jpeg",
|
||||
}),
|
||||
visible: false
|
||||
}),
|
||||
],
|
||||
view: viewFromArea(Wien),
|
||||
controls: defaultControls().extend([new InfoButton({})])
|
||||
controls: defaultControls().extend([new InfoButton({}), new MapButton({})])
|
||||
});
|
||||
|
||||
const vectorSource = new VectorSource({
|
||||
|
|
@ -40,11 +47,6 @@ const vectorSource = new VectorSource({
|
|||
|
||||
loadAllData(vectorSource)
|
||||
|
||||
const greenLine = new Style({
|
||||
fill: new Fill({color: '#00FF00'}),
|
||||
stroke: new Stroke({color: '#00FF00', width: 2})
|
||||
})
|
||||
|
||||
function renderer(coordinates: Coordinate | Coordinate[] | Coordinate[][], state: State): void {
|
||||
const start = Vector2d.fromCoordList(coordinates[0] as Coordinate)
|
||||
const end = Vector2d.fromCoordList(coordinates[1] as Coordinate)
|
||||
|
|
@ -87,13 +89,7 @@ const transFlagStyle = new Style({
|
|||
scale: 0.05
|
||||
})
|
||||
})
|
||||
const circleStyle = new Style({
|
||||
image: new Circle({
|
||||
fill: new Fill({color: "red"}),
|
||||
stroke: new Stroke({color: "green"}),
|
||||
radius: 10,
|
||||
}),
|
||||
})
|
||||
|
||||
const vectorLineLayer = new VectorLayer({
|
||||
source: vectorSource,
|
||||
style: function (feature, resolution) {
|
||||
|
|
@ -136,7 +132,6 @@ Object.entries(areas).forEach(([name, area]) => {
|
|||
})
|
||||
})
|
||||
|
||||
|
||||
// window.bla = function () {
|
||||
// const view = map.getView()
|
||||
// map.setView(
|
||||
|
|
|
|||
|
|
@ -123,9 +123,15 @@ p {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ol-touch .ol-control.info-button a {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ol-control.map-button {
|
||||
bottom: .5rem;
|
||||
left: 2.375rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#overlay {
|
||||
|
|
|
|||
38
src/toggle.ts
Normal file
38
src/toggle.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import {Control} from "ol/control";
|
||||
import {Options} from "ol/control/Control";
|
||||
import {createElement} from "./domutils";
|
||||
import {router} from "./router";
|
||||
|
||||
export class MapButton extends Control {
|
||||
showingOrtho = false
|
||||
|
||||
constructor(opt_options: Options) {
|
||||
const options = opt_options || {};
|
||||
|
||||
const button = createElement('button');
|
||||
button.innerHTML = 'm';
|
||||
|
||||
const element = createElement('div');
|
||||
element.className = 'map-button ol-unselectable ol-control';
|
||||
element.appendChild(button);
|
||||
router.updatePageLinks()
|
||||
|
||||
super({
|
||||
element: element,
|
||||
target: options.target,
|
||||
});
|
||||
|
||||
button.addEventListener('click', this.handleToggle.bind(this), false);
|
||||
}
|
||||
|
||||
handleToggle() {
|
||||
const firstLayer = this.getMap()!.getLayers().getArray()[0]
|
||||
const secondLayer = this.getMap()!.getLayers().getArray()[1]
|
||||
const thirdLayer = this.getMap()!.getLayers().getArray()[2]
|
||||
|
||||
this.showingOrtho = !this.showingOrtho
|
||||
firstLayer.setVisible(!this.showingOrtho)
|
||||
secondLayer.setVisible(this.showingOrtho)
|
||||
thirdLayer.setOpacity(this.showingOrtho ? 0.5 : 1)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue