mprins /
dokuwiki-plugin-openlayersmap
| @@ 235-267 (lines=33) @@ | ||
| 232 | ||
| 233 | const iconScale = 1.0; |
|
| 234 | const vectorSource = new ol.source.Vector(); |
|
| 235 | poi.forEach((p) => { |
|
| 236 | const f = new ol.Feature({ |
|
| 237 | geometry: new ol.geom.Point(ol.proj.fromLonLat([p.lon, p.lat])), |
|
| 238 | description: p.txt, |
|
| 239 | img: p.img, |
|
| 240 | rowId: p.rowId, |
|
| 241 | lat: p.lat, |
|
| 242 | lon: p.lon, |
|
| 243 | angle: p.angle, |
|
| 244 | alt: p.img.substring(0, p.img.lastIndexOf(".")) |
|
| 245 | }); |
|
| 246 | f.setId(p.rowId); |
|
| 247 | f.setStyle(new ol.style.Style({ |
|
| 248 | text: new ol.style.Text({ |
|
| 249 | text: "" + p.rowId, |
|
| 250 | textAlign: 'left', |
|
| 251 | textBaseline: 'bottom', |
|
| 252 | offsetX: 8, |
|
| 253 | offsetY: -8, |
|
| 254 | scale: iconScale, |
|
| 255 | fill: new ol.style.Fill({color: 'rgb(0,0,0)'}), |
|
| 256 | font: '12px monospace bold', |
|
| 257 | backgroundFill: new ol.style.Fill({color: 'rgba(255,255,255,.4)'}) |
|
| 258 | }), image: new ol.style.Icon({ |
|
| 259 | src: DOKU_BASE + "lib/plugins/openlayersmap/icons/" + p.img, |
|
| 260 | crossOrigin: '', |
|
| 261 | opacity: p.opacity, |
|
| 262 | scale: iconScale, |
|
| 263 | rotation: p.angle * Math.PI / 180, |
|
| 264 | }), |
|
| 265 | })); |
|
| 266 | vectorSource.addFeature(f); |
|
| 267 | }); |
|
| 268 | ||
| 269 | const vectorLayer = new ol.layer.Vector({title: 'POI', visible: true, source: vectorSource}); |
|
| 270 | overlayGroup.getLayers().push(vectorLayer); |
|
| @@ 265-293 (lines=29) @@ | ||
| 262 | ||
| 263 | const iconScale = 1.5; |
|
| 264 | const vectorSource = new ol.source.Vector(); |
|
| 265 | poi.forEach((p) => { |
|
| 266 | const f = new ol.Feature({ |
|
| 267 | geometry: new ol.geom.Point(ol.proj.fromLonLat([p.lon, p.lat])), |
|
| 268 | description: p.txt, |
|
| 269 | img: p.img, |
|
| 270 | rowId: p.rowId, |
|
| 271 | lat: p.lat, |
|
| 272 | lon: p.lon, |
|
| 273 | angle: p.angle, |
|
| 274 | alt: p.img.substring(0, p.img.lastIndexOf(".")) |
|
| 275 | }); |
|
| 276 | f.setId(p.rowId); |
|
| 277 | f.setStyle(new ol.style.Style({ |
|
| 278 | text: new ol.style.Text({ |
|
| 279 | text: "" + p.rowId, |
|
| 280 | textAlign: 'left', |
|
| 281 | textBaseline: 'bottom', |
|
| 282 | offsetX: 8, |
|
| 283 | offsetY: -8, |
|
| 284 | scale: iconScale, |
|
| 285 | fill: new ol.style.Fill({color: 'rgb(0,0,0)'}), |
|
| 286 | font: '12px monospace bold', |
|
| 287 | backgroundFill: new ol.style.Fill({color: 'rgba(255,255,255,.4)'}) |
|
| 288 | }), image: new ol.style.Icon({ |
|
| 289 | src: "./" + p.img, crossOrigin: '', opacity: p.opacity, scale: iconScale, rotation: p.angle * Math.PI / 180, |
|
| 290 | }), |
|
| 291 | })); |
|
| 292 | vectorSource.addFeature(f); |
|
| 293 | }); |
|
| 294 | ||
| 295 | overlayGroup.getLayers().push(new ol.layer.Vector({title: 'POI', visible: true, source: vectorSource})); |
|
| 296 | ||
