ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
100 lines
2.4 KiB
JavaScript
100 lines
2.4 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import GeoJSON from '../src/ol/format/GeoJSON.js';
|
|
import MultiPoint from '../src/ol/geom/MultiPoint.js';
|
|
import VectorLayer from '../src/ol/layer/Vector.js';
|
|
import VectorSource from '../src/ol/source/Vector.js';
|
|
import CircleStyle from '../src/ol/style/Circle.js';
|
|
import Fill from '../src/ol/style/Fill.js';
|
|
import Stroke from '../src/ol/style/Stroke.js';
|
|
import Style from '../src/ol/style/Style.js';
|
|
|
|
const styles = [
|
|
/* We are using two different styles for the polygons:
|
|
* - The first style is for the polygons themselves.
|
|
* - The second style is to draw the vertices of the polygons.
|
|
* In a custom `geometry` function the vertices of a polygon are
|
|
* returned as `MultiPoint` geometry, which will be used to render
|
|
* the style.
|
|
*/
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: 'blue',
|
|
width: 3
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(0, 0, 255, 0.1)'
|
|
})
|
|
}),
|
|
new Style({
|
|
image: new CircleStyle({
|
|
radius: 5,
|
|
fill: new Fill({
|
|
color: 'orange'
|
|
})
|
|
}),
|
|
geometry: function(feature) {
|
|
// return the coordinates of the first ring of the polygon
|
|
const coordinates = feature.getGeometry().getCoordinates()[0];
|
|
return new MultiPoint(coordinates);
|
|
}
|
|
})
|
|
];
|
|
|
|
const geojsonObject = {
|
|
'type': 'FeatureCollection',
|
|
'crs': {
|
|
'type': 'name',
|
|
'properties': {
|
|
'name': 'EPSG:3857'
|
|
}
|
|
},
|
|
'features': [{
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
|
|
[-3e6, 6e6], [-5e6, 6e6]]]
|
|
}
|
|
}, {
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
|
|
[0, 6e6], [-2e6, 6e6]]]
|
|
}
|
|
}, {
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
|
|
[3e6, 6e6], [1e6, 6e6]]]
|
|
}
|
|
}, {
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
|
|
[0, -1e6], [-2e6, -1e6]]]
|
|
}
|
|
}]
|
|
};
|
|
|
|
const source = new VectorSource({
|
|
features: (new GeoJSON()).readFeatures(geojsonObject)
|
|
});
|
|
|
|
const layer = new VectorLayer({
|
|
source: source,
|
|
style: styles
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [layer],
|
|
target: 'map',
|
|
view: new View({
|
|
center: [0, 3000000],
|
|
zoom: 2
|
|
})
|
|
});
|