Hello world
This commit is contained in:
Râu Cao
commit
1374c1bc9d
GPG Key ID:
15E65F399D084BA9
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
BIN
data/icon.png
Normal file
BIN
data/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
18
geo/poi.json
Normal file
18
geo/poi.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"name": "Start in Genoa"
|
||||
},
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
8.918618,
|
||||
44.407408
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
156273
geo/route.json
Normal file
156273
geo/route.json
Normal file
File diff suppressed because it is too large
Load Diff
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" /> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Road2Bitcoin Live Map</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
87
main.js
Normal file
87
main.js
Normal file
@ -0,0 +1,87 @@
|
||||
import './style.css';
|
||||
import Feature from 'ol/Feature';
|
||||
import GeoJSON from 'ol/format/GeoJSON';
|
||||
import {Map, View} from 'ol';
|
||||
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
|
||||
import {Icon, Stroke, Style} from 'ol/style';
|
||||
import {OSM, Vector as VectorSource} from 'ol/source';
|
||||
import {useGeographic} from 'ol/proj';
|
||||
import geojsonRoute from './geo/route.json'
|
||||
import geojsonPOI from './geo/poi.json'
|
||||
|
||||
useGeographic();
|
||||
|
||||
const styles = {
|
||||
lineOrange: new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#FF9900',
|
||||
// lineDash: [8],
|
||||
width: 5,
|
||||
}),
|
||||
}),
|
||||
lineGrey: new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#555555',
|
||||
// lineDash: [8],
|
||||
width: 5,
|
||||
}),
|
||||
}),
|
||||
iconStop: new Style({
|
||||
image: new Icon({
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels',
|
||||
src: 'data/icon.png',
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
const lastStageFinished = 4;
|
||||
const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
|
||||
const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
|
||||
const vectorSourceStagesCompleted = new VectorSource();
|
||||
const vectorSourceStagesAhead = new VectorSource();
|
||||
|
||||
for (const stage of stagesCompleted) {
|
||||
vectorSourceStagesCompleted.addFeature(new GeoJSON().readFeature(stage));
|
||||
}
|
||||
for (const stage of stagesAhead) {
|
||||
vectorSourceStagesAhead.addFeature(new GeoJSON().readFeature(stage));
|
||||
}
|
||||
|
||||
const stagesCompletedLayer = new VectorLayer({
|
||||
source: vectorSourceStagesCompleted,
|
||||
style: styles.lineOrange
|
||||
});
|
||||
|
||||
const stagesAheadLayer = new VectorLayer({
|
||||
source: vectorSourceStagesAhead,
|
||||
style: styles.lineGrey
|
||||
});
|
||||
|
||||
const vectorSourcePOI = new VectorSource({
|
||||
features: new GeoJSON().readFeatures(geojsonPOI),
|
||||
});
|
||||
|
||||
const poiLayer = new VectorLayer({
|
||||
source: vectorSourcePOI,
|
||||
style: styles.iconStop,
|
||||
});
|
||||
|
||||
const view = new View({
|
||||
center: [10.6, 46.5],
|
||||
zoom: 6
|
||||
})
|
||||
|
||||
const map = new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new OSM()
|
||||
}),
|
||||
stagesCompletedLayer,
|
||||
stagesAheadLayer,
|
||||
poiLayer
|
||||
],
|
||||
view: view
|
||||
});
|
||||
1262
package-lock.json
generated
Normal file
1262
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
package.json
Normal file
15
package.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "map",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^3.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"ol": "latest"
|
||||
}
|
||||
}
|
||||
18
readme.md
Normal file
18
readme.md
Normal file
@ -0,0 +1,18 @@
|
||||
# OpenLayers + Vite
|
||||
|
||||
This example demonstrates how the `ol` package can be used with [Vite](https://vitejs.dev/).
|
||||
|
||||
To get started, run the following (requires Node 14+):
|
||||
|
||||
npx create-ol-app my-app --template vite
|
||||
|
||||
Then change into your new `my-app` directory and start a development server (available at http://localhost:5173):
|
||||
|
||||
cd my-app
|
||||
npm start
|
||||
|
||||
To generate a build ready for production:
|
||||
|
||||
npm run build
|
||||
|
||||
Then deploy the contents of the `dist` directory to your server. You can also run `npm run serve` to serve the results of the `dist` directory for preview.
|
||||
12
style.css
Normal file
12
style.css
Normal file
@ -0,0 +1,12 @@
|
||||
@import "node_modules/ol/ol.css";
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
5
vite.config.js
Normal file
5
vite.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
build: {
|
||||
sourcemap: true,
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user