|
1 | | -import {Map, View} from 'ol'; |
2 | | -import {MapboxVectorLayer} from 'ol-mapbox-style'; |
3 | | -import {fromLonLat} from 'ol/proj'; |
4 | | -//! [import-layer] |
5 | | -import VectorLayer from 'ol/layer/Vector'; |
6 | | -import VectorSource from 'ol/source/Vector'; |
7 | | -//! [import-layer] |
8 | | -//! [import-interaction] |
9 | | -import Feature from 'ol/Feature'; |
10 | | -import Point from 'ol/geom/Point'; |
11 | | -//! [import-interaction] |
12 | | - |
13 | | -const map = new Map({ |
14 | | - target: 'map-container', |
15 | | - view: new View({ |
16 | | - center: fromLonLat([0, 0]), |
17 | | - zoom: 2, |
18 | | - }), |
19 | | -}); |
20 | | - |
21 | | -const layer = new MapboxVectorLayer({ |
22 | | - styleUrl: 'https://tiles.openfreemap.org/styles/bright', |
23 | | - // or, instead of the above, try |
24 | | - // styleUrl: 'mapbox://styles/mapbox/bright-v9', |
25 | | - // accessToken: 'Your token from https://mapbox.com/' |
26 | | -}); |
27 | | -map.addLayer(layer); |
28 | | - |
29 | | -//! [layer] |
30 | | -const source = new VectorSource(); |
31 | | -const info = new VectorLayer({ |
32 | | - source: source, |
33 | | - style: { |
34 | | - 'stroke-color': 'red', |
35 | | - 'stroke-width': 4, |
36 | | - //! [coalesce] |
37 | | - 'text-value': ['coalesce', ['get', 'layers'], ''], |
38 | | - //! [coalesce] |
39 | | - 'text-padding': [2, 2, 2, 2], |
40 | | - 'text-offset-y': -15, |
41 | | - 'text-font': '16px sans-serif', |
42 | | - 'text-background-fill-color': 'gray', |
43 | | - }, |
44 | | -}); |
45 | | -map.addLayer(info); |
46 | | -//! [layer] |
47 | | -//! [interaction] |
48 | | -map.on('pointermove', function (event) { |
49 | | - source.clear(); |
50 | | - //! [get-features] |
51 | | - const features = map.getFeaturesAtPixel(event.pixel, { |
52 | | - layerFilter: (layer) => layer !== info, |
53 | | - }); |
54 | | - //! [get-features] |
55 | | - source.addFeatures(features); |
56 | | - //! [layers-label] |
57 | | - const layers = features.map((feature) => feature.get('layer')); |
58 | | - source.addFeature( |
59 | | - new Feature({ |
60 | | - geometry: new Point(event.coordinate), |
61 | | - layers: Array.from(new Set(layers)).join(', '), |
62 | | - }) |
63 | | - ); |
64 | | - //! [layers-label] |
65 | | -}); |
66 | | -//! [interaction] |
| 1 | +alert('Hello Workshop'); |
0 commit comments