diff --git a/examples/box-selection.css b/examples/box-selection.css deleted file mode 100644 index bb7a30e630..0000000000 --- a/examples/box-selection.css +++ /dev/null @@ -1,3 +0,0 @@ -#map { - background: #1a2b39; -} diff --git a/examples/box-selection.js b/examples/box-selection.js index 22c9ffd745..9fdb528fbc 100644 --- a/examples/box-selection.js +++ b/examples/box-selection.js @@ -22,6 +22,7 @@ const map = new Map({ layers: [ new VectorLayer({ source: vectorSource, + background: '#1a2b39', style: function (feature) { const color = feature.get('COLOR_BIO') || '#eeeeee'; style.getFill().setColor(color); diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js index a19a8f1748..737056e1ae 100644 --- a/examples/geojson-vt.js +++ b/examples/geojson-vt.js @@ -1,60 +1,67 @@ import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; -import OSM from '../src/ol/source/OSM.js'; import Projection from '../src/ol/proj/Projection.js'; +import VectorTileLayer from '../src/ol/layer/VectorTile.js'; import VectorTileSource from '../src/ol/source/VectorTile.js'; import View from '../src/ol/View.js'; -import { - Tile as TileLayer, - VectorTile as VectorTileLayer, -} from '../src/ol/layer.js'; +import {Fill, Style} from '../src/ol/style.js'; // Converts geojson-vt data to GeoJSON const replacer = function (key, value) { - if (value.geometry) { - let type; - const rawType = value.type; - let geometry = value.geometry; - - if (rawType === 1) { - type = 'MultiPoint'; - if (geometry.length == 1) { - type = 'Point'; - geometry = geometry[0]; - } - } else if (rawType === 2) { - type = 'MultiLineString'; - if (geometry.length == 1) { - type = 'LineString'; - geometry = geometry[0]; - } - } else if (rawType === 3) { - type = 'Polygon'; - if (geometry.length > 1) { - type = 'MultiPolygon'; - geometry = [geometry]; - } - } - - return { - 'type': 'Feature', - 'geometry': { - 'type': type, - 'coordinates': geometry, - }, - 'properties': value.tags, - }; - } else { + if (!value || !value.geometry) { return value; } + + let type; + const rawType = value.type; + let geometry = value.geometry; + if (rawType === 1) { + type = 'MultiPoint'; + if (geometry.length == 1) { + type = 'Point'; + geometry = geometry[0]; + } + } else if (rawType === 2) { + type = 'MultiLineString'; + if (geometry.length == 1) { + type = 'LineString'; + geometry = geometry[0]; + } + } else if (rawType === 3) { + type = 'Polygon'; + if (geometry.length > 1) { + type = 'MultiPolygon'; + geometry = [geometry]; + } + } + + return { + 'type': 'Feature', + 'geometry': { + 'type': type, + 'coordinates': geometry, + }, + 'properties': value.tags, + }; }; +const style = new Style({ + fill: new Fill({ + color: '#eeeeee', + }), +}); + +const layer = new VectorTileLayer({ + background: '#1a2b39', + style: function (feature) { + const color = feature.get('COLOR') || '#eeeeee'; + style.getFill().setColor(color); + return style; + }, +}); + const map = new Map({ - layers: [ - new TileLayer({ - source: new OSM(), - }), - ], + layers: [layer], target: 'map', view: new View({ center: [0, 0], @@ -62,7 +69,7 @@ const map = new Map({ }), }); -const url = 'data/geojson/countries.geojson'; +const url = 'https://openlayers.org/data/vector/ecoregions.json'; fetch(url) .then(function (response) { return response.json(); @@ -106,8 +113,5 @@ fetch(url) tile.setFeatures(features); }, }); - const vectorLayer = new VectorTileLayer({ - source: vectorSource, - }); - map.addLayer(vectorLayer); + layer.setSource(vectorSource); }); diff --git a/examples/vector-layer.css b/examples/vector-layer.css deleted file mode 100644 index bb7a30e630..0000000000 --- a/examples/vector-layer.css +++ /dev/null @@ -1,3 +0,0 @@ -#map { - background: #1a2b39; -} diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 85da839068..7e240e2b96 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -12,6 +12,7 @@ const style = new Style({ }); const vectorLayer = new VectorLayer({ + background: '#1a2b39', source: new VectorSource({ url: 'https://openlayers.org/data/vector/ecoregions.json', format: new GeoJSON(),