Make code prettier
This updates ESLint and our shared eslint-config-openlayers to use Prettier. Most formatting changes were automatically applied with this:
npm run lint -- --fix
A few manual changes were required:
* In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
* In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason. While editing this, I reworked `ExampleBuilder` to be a class.
* In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.
This commit is contained in:
Tim Schaub
@@ -1,29 +1,28 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Circle from '../../../src/ol/style/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Circle from '../../../src/ol/style/Circle.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
|
||||
vectorSource.addFeatures([
|
||||
new Feature({
|
||||
geometry: new Point([-50, 50]),
|
||||
radius: 10
|
||||
radius: 10,
|
||||
}),
|
||||
new Feature({
|
||||
geometry: new Point([50, -50]),
|
||||
radius: 20
|
||||
radius: 20,
|
||||
}),
|
||||
new Feature({
|
||||
geometry: new Point([50, 50]),
|
||||
radius: 30
|
||||
})
|
||||
radius: 30,
|
||||
}),
|
||||
]);
|
||||
|
||||
const style = new Style({
|
||||
@@ -31,9 +30,9 @@ const style = new Style({
|
||||
radius: 1,
|
||||
stroke: new Stroke({
|
||||
color: '#00f',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
width: 3,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -41,17 +40,17 @@ new Map({
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource,
|
||||
style: function(feature) {
|
||||
style: function (feature) {
|
||||
style.getImage().setRadius(feature.get('radius'));
|
||||
return style;
|
||||
}
|
||||
})
|
||||
},
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import {Map, View, Feature} from '../../../src/ol/index.js';
|
||||
import {Circle, Fill, Style} from '../../../src/ol/style.js';
|
||||
import {Feature, Map, View} from '../../../src/ol/index.js';
|
||||
import {Point} from '../../../src/ol/geom.js';
|
||||
import {Tile as TileLayer, Vector as VectorLayer} from '../../../src/ol/layer.js';
|
||||
import {
|
||||
Tile as TileLayer,
|
||||
Vector as VectorLayer,
|
||||
} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import {useGeographic} from '../../../src/ol/proj.js';
|
||||
import {XYZ, Vector as VectorSource} from '../../../src/ol/source.js';
|
||||
import {Style, Circle, Fill} from '../../../src/ol/style.js';
|
||||
|
||||
useGeographic();
|
||||
|
||||
@@ -16,28 +19,26 @@ new Map({
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
}),
|
||||
new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature(point)
|
||||
]
|
||||
features: [new Feature(point)],
|
||||
}),
|
||||
style: new Style({
|
||||
image: new Circle({
|
||||
radius: 5,
|
||||
fill: new Fill({color: 'red'})
|
||||
})
|
||||
})
|
||||
})
|
||||
fill: new Fill({color: 'red'}),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import KML from '../../../src/ol/format/KML.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {Heatmap as HeatmapLayer} from '../../../src/ol/layer.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import KML from '../../../src/ol/format/KML.js';
|
||||
|
||||
const vector = new HeatmapLayer({
|
||||
source: new VectorSource({
|
||||
url: '/data/2012_Earthquakes_Mag5.kml',
|
||||
format: new KML({
|
||||
extractStyles: false
|
||||
})
|
||||
extractStyles: false,
|
||||
}),
|
||||
}),
|
||||
blur: 3,
|
||||
radius: 3
|
||||
radius: 3,
|
||||
});
|
||||
|
||||
vector.getSource().on('addfeature', function(event) {
|
||||
vector.getSource().on('addfeature', function (event) {
|
||||
const name = event.feature.get('name');
|
||||
const magnitude = parseFloat(name.substr(2));
|
||||
event.feature.set('weight', magnitude - 5);
|
||||
@@ -26,8 +26,8 @@ vector.getSource().on('addfeature', function(event) {
|
||||
const raster = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -35,10 +35,10 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
render({
|
||||
message: 'Heatmap layer renders properly using webgl'
|
||||
message: 'Heatmap layer renders properly using webgl',
|
||||
});
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Icon, Style} from '../../../src/ol/style.js';
|
||||
import {
|
||||
Tile as TileLayer,
|
||||
Vector as VectorLayer,
|
||||
} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import {Style, Icon} from '../../../src/ol/style.js';
|
||||
|
||||
const center = fromLonLat([8.6, 50.1]);
|
||||
|
||||
@@ -13,35 +16,31 @@ new Map({
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
new VectorLayer({
|
||||
style: function() {
|
||||
style: function () {
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
opacity: 0.5,
|
||||
src: '/data/icon.png',
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels'
|
||||
})
|
||||
anchorYUnits: 'pixels',
|
||||
}),
|
||||
});
|
||||
},
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature(
|
||||
new Point(center)
|
||||
)
|
||||
]
|
||||
})
|
||||
})
|
||||
features: [new Feature(new Point(center))],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Icon, Style} from '../../../src/ol/style.js';
|
||||
import {
|
||||
Tile as TileLayer,
|
||||
Vector as VectorLayer,
|
||||
} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import {Style, Icon} from '../../../src/ol/style.js';
|
||||
|
||||
const center = fromLonLat([8, 50]);
|
||||
|
||||
@@ -14,59 +17,65 @@ let feature;
|
||||
|
||||
// scales svg correctly
|
||||
feature = new Feature({
|
||||
geometry: new Point(fromLonLat([3, 45]))
|
||||
geometry: new Point(fromLonLat([3, 45])),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new Icon({
|
||||
src: '/data/me0.svg',
|
||||
scale: 2
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new Icon({
|
||||
src: '/data/me0.svg',
|
||||
scale: 2,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// uses offset correctly
|
||||
feature = new Feature({
|
||||
geometry: new Point(fromLonLat([3, 55]))
|
||||
geometry: new Point(fromLonLat([3, 55])),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new Icon({
|
||||
src: '/data/me0.svg',
|
||||
offset: [16, 0],
|
||||
scale: 2
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new Icon({
|
||||
src: '/data/me0.svg',
|
||||
offset: [16, 0],
|
||||
scale: 2,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// uses offset correctly if it is larger than size
|
||||
feature = new Feature({
|
||||
geometry: new Point(fromLonLat([8, 55]))
|
||||
geometry: new Point(fromLonLat([8, 55])),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new Icon({
|
||||
src: '/data/me0.svg',
|
||||
offsetOrigin: 'bottom-left',
|
||||
offset: [16, 0],
|
||||
size: [64, 40]
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new Icon({
|
||||
src: '/data/me0.svg',
|
||||
offsetOrigin: 'bottom-left',
|
||||
offset: [16, 0],
|
||||
size: [64, 40],
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
new Map({
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Icon, Style} from '../../../src/ol/style.js';
|
||||
import {
|
||||
Tile as TileLayer,
|
||||
Vector as VectorLayer,
|
||||
} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import {Style, Icon} from '../../../src/ol/style.js';
|
||||
|
||||
const center = fromLonLat([8.6, 50.1]);
|
||||
|
||||
@@ -13,34 +16,30 @@ new Map({
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
new VectorLayer({
|
||||
style: function() {
|
||||
style: function () {
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
src: '/data/icon.png',
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels'
|
||||
})
|
||||
anchorYUnits: 'pixels',
|
||||
}),
|
||||
});
|
||||
},
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature(
|
||||
new Point(center)
|
||||
)
|
||||
]
|
||||
})
|
||||
})
|
||||
features: [new Feature(new Point(center))],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {Circle, Fill, Style} from '../../../src/ol/style.js';
|
||||
import {Map, View} from '../../../src/ol/index.js';
|
||||
import {Point} from '../../../src/ol/geom.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {useGeographic} from '../../../src/ol/proj.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {Style, Circle, Fill} from '../../../src/ol/style.js';
|
||||
import {getVectorContext} from '../../../src/ol/render.js';
|
||||
import {useGeographic} from '../../../src/ol/proj.js';
|
||||
|
||||
useGeographic();
|
||||
|
||||
@@ -13,18 +13,20 @@ const center = [8.6, 50.1];
|
||||
const layer = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
layer.on('postrender', event => {
|
||||
layer.on('postrender', (event) => {
|
||||
const context = getVectorContext(event);
|
||||
context.setStyle(new Style({
|
||||
image: new Circle({
|
||||
radius: 5,
|
||||
fill: new Fill({color: 'red'})
|
||||
context.setStyle(
|
||||
new Style({
|
||||
image: new Circle({
|
||||
radius: 5,
|
||||
fill: new Fill({color: 'red'}),
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
context.drawGeometry(new Point(center));
|
||||
});
|
||||
|
||||
@@ -33,8 +35,8 @@ new Map({
|
||||
layers: [layer],
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,34 +1,50 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import MultiPolygon from '../../../src/ol/geom/MultiPolygon.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import MultiPolygon from '../../../src/ol/geom/MultiPolygon.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import {getVectorContext} from '../../../src/ol/render.js';
|
||||
|
||||
const source = new XYZ({
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
transition: 0
|
||||
transition: 0,
|
||||
});
|
||||
|
||||
const layer = new TileLayer({
|
||||
source: source
|
||||
source: source,
|
||||
});
|
||||
|
||||
const geometry = new MultiPolygon([
|
||||
[[[-80, -40], [-40, 0], [-80, 40], [-120, 0], [-80, -40]]],
|
||||
[[[80, -40], [120, 0], [80, 40], [40, 0], [80, -40]]]
|
||||
[
|
||||
[
|
||||
[-80, -40],
|
||||
[-40, 0],
|
||||
[-80, 40],
|
||||
[-120, 0],
|
||||
[-80, -40],
|
||||
],
|
||||
],
|
||||
[
|
||||
[
|
||||
[80, -40],
|
||||
[120, 0],
|
||||
[80, 40],
|
||||
[40, 0],
|
||||
[80, -40],
|
||||
],
|
||||
],
|
||||
]).transform('EPSG:4326', 'EPSG:3857');
|
||||
|
||||
const style = new Style({
|
||||
stroke: new Stroke({
|
||||
width: 2,
|
||||
color: 'blue'
|
||||
})
|
||||
color: 'blue',
|
||||
}),
|
||||
});
|
||||
|
||||
layer.on('prerender', function(event) {
|
||||
layer.on('prerender', function (event) {
|
||||
const context = event.context;
|
||||
context.save();
|
||||
|
||||
@@ -39,7 +55,7 @@ layer.on('prerender', function(event) {
|
||||
context.clip();
|
||||
});
|
||||
|
||||
layer.on('postrender', function(event) {
|
||||
layer.on('postrender', function (event) {
|
||||
const context = event.context;
|
||||
context.restore();
|
||||
|
||||
@@ -54,8 +70,8 @@ new Map({
|
||||
layers: [layer],
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js';
|
||||
|
||||
new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 3
|
||||
zoom: 3,
|
||||
}),
|
||||
layers: new LayerGroup({
|
||||
opacity: 0.75,
|
||||
@@ -15,16 +15,16 @@ new Map({
|
||||
new TileLayer({
|
||||
opacity: 0.25,
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png'
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Static from '../../../src/ol/source/ImageStatic.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {
|
||||
get as getProjection,
|
||||
transformExtent,
|
||||
useGeographic
|
||||
useGeographic,
|
||||
} from '../../../src/ol/proj.js';
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
|
||||
useGeographic();
|
||||
|
||||
@@ -16,19 +16,25 @@ const extent = [-123.1, 37.1, -122.1, 37.9];
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
target: 'map',
|
||||
layers: [new ImageLayer({
|
||||
source: new Static({
|
||||
url: '/data/tiles/osm/5/5/12.png',
|
||||
imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
|
||||
projection: getProjection('EPSG:3857')
|
||||
layers: [
|
||||
new ImageLayer({
|
||||
source: new Static({
|
||||
url: '/data/tiles/osm/5/5/12.png',
|
||||
imageExtent: transformExtent(
|
||||
[-123, 37, -122, 38],
|
||||
'EPSG:4326',
|
||||
'EPSG:3857'
|
||||
),
|
||||
projection: getProjection('EPSG:3857'),
|
||||
}),
|
||||
extent,
|
||||
}),
|
||||
extent
|
||||
})],
|
||||
],
|
||||
view: new View({
|
||||
center,
|
||||
zoom: 8,
|
||||
rotation: Math.PI / 4
|
||||
})
|
||||
rotation: Math.PI / 4,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,31 +1,41 @@
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Static from '../../../src/ol/source/ImageStatic.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {
|
||||
get as getProjection,
|
||||
transform,
|
||||
transformExtent
|
||||
transformExtent,
|
||||
} from '../../../src/ol/proj.js';
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
|
||||
const extent = transformExtent([-123.1, 37.1, -122.1, 37.9], 'EPSG:4326', 'EPSG:3857');
|
||||
const extent = transformExtent(
|
||||
[-123.1, 37.1, -122.1, 37.9],
|
||||
'EPSG:4326',
|
||||
'EPSG:3857'
|
||||
);
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
target: 'map',
|
||||
layers: [new ImageLayer({
|
||||
source: new Static({
|
||||
url: '/data/tiles/osm/5/5/12.png',
|
||||
imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
|
||||
projection: getProjection('EPSG:3857')
|
||||
layers: [
|
||||
new ImageLayer({
|
||||
source: new Static({
|
||||
url: '/data/tiles/osm/5/5/12.png',
|
||||
imageExtent: transformExtent(
|
||||
[-123, 37, -122, 38],
|
||||
'EPSG:4326',
|
||||
'EPSG:3857'
|
||||
),
|
||||
projection: getProjection('EPSG:3857'),
|
||||
}),
|
||||
extent,
|
||||
}),
|
||||
extent
|
||||
})],
|
||||
],
|
||||
view: new View({
|
||||
center,
|
||||
zoom: 8,
|
||||
rotation: Math.PI / 4
|
||||
})
|
||||
rotation: Math.PI / 4,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,28 +1,34 @@
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Static from '../../../src/ol/source/ImageStatic.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {
|
||||
get as getProjection,
|
||||
transform,
|
||||
transformExtent
|
||||
transformExtent,
|
||||
} from '../../../src/ol/proj.js';
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
target: 'map',
|
||||
layers: [new ImageLayer({
|
||||
source: new Static({
|
||||
url: '/data/tiles/osm/5/5/12.png',
|
||||
imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
|
||||
projection: getProjection('EPSG:3857')
|
||||
})
|
||||
})],
|
||||
layers: [
|
||||
new ImageLayer({
|
||||
source: new Static({
|
||||
url: '/data/tiles/osm/5/5/12.png',
|
||||
imageExtent: transformExtent(
|
||||
[-123, 37, -122, 38],
|
||||
'EPSG:4326',
|
||||
'EPSG:3857'
|
||||
),
|
||||
projection: getProjection('EPSG:3857'),
|
||||
}),
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
center,
|
||||
zoom: 8
|
||||
})
|
||||
zoom: 8,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
*/
|
||||
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {useGeographic} from '../../../src/ol/proj.js';
|
||||
|
||||
@@ -17,25 +17,25 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
zoom: 3,
|
||||
}),
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
maxZoom: 3
|
||||
maxZoom: 3,
|
||||
}),
|
||||
extent: extent
|
||||
extent: extent,
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
|
||||
minZoom: 3,
|
||||
maxZoom: 5
|
||||
maxZoom: 5,
|
||||
}),
|
||||
extent: extent
|
||||
})
|
||||
]
|
||||
extent: extent,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
*/
|
||||
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import {transformExtent} from '../../../src/ol/proj.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
|
||||
const center = fromLonLat([7, 50]);
|
||||
const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857');
|
||||
@@ -16,25 +16,25 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
zoom: 3,
|
||||
}),
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
maxZoom: 3
|
||||
maxZoom: 3,
|
||||
}),
|
||||
extent: extent
|
||||
extent: extent,
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
|
||||
minZoom: 3,
|
||||
maxZoom: 5
|
||||
maxZoom: 5,
|
||||
}),
|
||||
extent: extent
|
||||
})
|
||||
]
|
||||
extent: extent,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
|
||||
@@ -10,10 +10,10 @@ const layer = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/512x256/{z}/{x}/{y}.png',
|
||||
tileGrid: createXYZ({
|
||||
tileSize: [512, 256]
|
||||
tileSize: [512, 256],
|
||||
}),
|
||||
transition: 0
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
const map = new Map({
|
||||
@@ -21,8 +21,8 @@ const map = new Map({
|
||||
pixelRatio: 1,
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 5
|
||||
})
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
map.addLayer(layer);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const center = fromLonLat([8.6, 50.1]);
|
||||
|
||||
@@ -11,16 +11,16 @@ new Map({
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
transition: 0,
|
||||
}),
|
||||
opacity: 0.2
|
||||
})
|
||||
opacity: 0.2,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {transform, fromLonLat} from '../../../src/ol/proj.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.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 Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {fromLonLat, transform} from '../../../src/ol/proj.js';
|
||||
import {getVectorContext} from '../../../src/ol/render.js';
|
||||
|
||||
const center = fromLonLat([8.6, 50.1]);
|
||||
@@ -14,32 +14,34 @@ const center = fromLonLat([8.6, 50.1]);
|
||||
const layer = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
const onRender = function(event) {
|
||||
const onRender = function (event) {
|
||||
const context = event.context;
|
||||
context.restore();
|
||||
const vectorContext = getVectorContext(event);
|
||||
vectorContext.setImageStyle(new CircleStyle({
|
||||
radius: 12,
|
||||
fill: new Fill({color: 'yellow'}),
|
||||
stroke: new Stroke({color: 'red', width: 1})
|
||||
}));
|
||||
vectorContext.drawPoint(new Point(
|
||||
transform([13, 37], 'EPSG:4326', 'EPSG:3857')));
|
||||
vectorContext.setImageStyle(
|
||||
new CircleStyle({
|
||||
radius: 12,
|
||||
fill: new Fill({color: 'yellow'}),
|
||||
stroke: new Stroke({color: 'red', width: 1}),
|
||||
})
|
||||
);
|
||||
vectorContext.drawPoint(
|
||||
new Point(transform([13, 37], 'EPSG:4326', 'EPSG:3857'))
|
||||
);
|
||||
};
|
||||
layer.on('postrender', onRender);
|
||||
|
||||
const map = new Map({
|
||||
layers: [
|
||||
],
|
||||
layers: [],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const center = fromLonLat([8.6, 50.1]);
|
||||
|
||||
@@ -11,15 +11,15 @@ new Map({
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
})
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const center = fromLonLat([8.6, 50.1]);
|
||||
|
||||
@@ -10,15 +10,15 @@ new Map({
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const center = fromLonLat([8.6, 50.1]);
|
||||
|
||||
const layer1 = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
transition: 0,
|
||||
}),
|
||||
opacity: 0.2
|
||||
opacity: 0.2,
|
||||
});
|
||||
const layer2 = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
|
||||
transition: 0
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
const map = new Map({
|
||||
@@ -26,8 +26,8 @@ const map = new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
map.getView().setRotation(Math.PI / 2);
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import CircleStyle from '../../../src/ol/style/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Text from '../../../src/ol/style/Text.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 LineString from '../../../src/ol/geom/LineString.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
let center = [1825927.7316762917, 6143091.089223046];
|
||||
const map = new Map({
|
||||
@@ -17,56 +17,60 @@ const map = new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 13
|
||||
})
|
||||
zoom: 13,
|
||||
}),
|
||||
});
|
||||
|
||||
const source1 = new VectorSource();
|
||||
const layer1 = new VectorLayer({
|
||||
declutter: true,
|
||||
source: source1
|
||||
source: source1,
|
||||
});
|
||||
|
||||
const source2 = new VectorSource();
|
||||
const layer2 = new VectorLayer({
|
||||
declutter: true,
|
||||
source: source2
|
||||
source: source2,
|
||||
});
|
||||
|
||||
const source3 = new VectorSource();
|
||||
const layer3 = new VectorLayer({
|
||||
declutter: true,
|
||||
source: source3
|
||||
source: source3,
|
||||
});
|
||||
|
||||
const source4 = new VectorSource();
|
||||
const layer4 = new VectorLayer({
|
||||
declutter: true,
|
||||
source: source4
|
||||
source: source4,
|
||||
});
|
||||
|
||||
const feature1 = new Feature({
|
||||
geometry: new Point(center),
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
});
|
||||
source1.addFeature(feature1);
|
||||
source1.addFeature(new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
zIndex: 3
|
||||
}));
|
||||
source1.addFeature(new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
zIndex: 1
|
||||
}));
|
||||
layer1.setStyle(function(feature) {
|
||||
source1.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
zIndex: 3,
|
||||
})
|
||||
);
|
||||
source1.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
zIndex: 1,
|
||||
})
|
||||
);
|
||||
layer1.setStyle(function (feature) {
|
||||
return new Style({
|
||||
zIndex: feature.get('zIndex'),
|
||||
image: new CircleStyle({
|
||||
radius: 15,
|
||||
fill: new Fill({
|
||||
color: 'blue'
|
||||
})
|
||||
})
|
||||
color: 'blue',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
});
|
||||
map.addLayer(layer1);
|
||||
@@ -75,91 +79,107 @@ center = [center[0] + 500, center[1] + 700];
|
||||
const feature2 = new Feature({
|
||||
geometry: new Point(center),
|
||||
text: 'center',
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
});
|
||||
source2.addFeature(feature2);
|
||||
source2.addFeature(new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west',
|
||||
zIndex: 3
|
||||
}));
|
||||
source2.addFeature(new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east',
|
||||
zIndex: 1
|
||||
}));
|
||||
layer2.setStyle(function(feature) {
|
||||
source2.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west',
|
||||
zIndex: 3,
|
||||
})
|
||||
);
|
||||
source2.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east',
|
||||
zIndex: 1,
|
||||
})
|
||||
);
|
||||
layer2.setStyle(function (feature) {
|
||||
return new Style({
|
||||
zIndex: feature.get('zIndex'),
|
||||
text: new Text({
|
||||
text: feature.get('text'),
|
||||
font: 'italic bold 18px Ubuntu'
|
||||
})
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
}),
|
||||
});
|
||||
});
|
||||
map.addLayer(layer2);
|
||||
|
||||
center = [center[0] + 500, center[1] + 300];
|
||||
source3.addFeature(new Feature({
|
||||
geometry: new Point(center),
|
||||
text: 'center'
|
||||
}));
|
||||
source3.addFeature(new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west'
|
||||
}));
|
||||
source3.addFeature(new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east'
|
||||
}));
|
||||
layer3.setStyle(function(feature) {
|
||||
source3.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point(center),
|
||||
text: 'center',
|
||||
})
|
||||
);
|
||||
source3.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west',
|
||||
})
|
||||
);
|
||||
source3.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east',
|
||||
})
|
||||
);
|
||||
layer3.setStyle(function (feature) {
|
||||
return new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 10,
|
||||
stroke: new Stroke({
|
||||
color: 'red',
|
||||
width: 8
|
||||
})
|
||||
width: 8,
|
||||
}),
|
||||
}),
|
||||
text: new Text({
|
||||
text: feature.get('text'),
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
textBaseline: 'bottom',
|
||||
offsetY: -12
|
||||
})
|
||||
offsetY: -12,
|
||||
}),
|
||||
});
|
||||
});
|
||||
map.addLayer(layer3);
|
||||
|
||||
center = [center[0] - 2000, center[1] - 2000];
|
||||
const point = new Feature(new Point(center));
|
||||
point.setStyle(new Style({
|
||||
zIndex: 1,
|
||||
image: new CircleStyle({
|
||||
radius: 8,
|
||||
point.setStyle(
|
||||
new Style({
|
||||
zIndex: 1,
|
||||
image: new CircleStyle({
|
||||
radius: 8,
|
||||
stroke: new Stroke({
|
||||
color: 'blue',
|
||||
width: 4,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
const line = new Feature(
|
||||
new LineString([
|
||||
[center[0] - 650, center[1] - 200],
|
||||
[center[0] + 650, center[1] - 200],
|
||||
])
|
||||
);
|
||||
line.setStyle(
|
||||
new Style({
|
||||
zIndex: 2,
|
||||
stroke: new Stroke({
|
||||
color: 'blue',
|
||||
width: 4
|
||||
})
|
||||
color: '#CCC',
|
||||
width: 12,
|
||||
}),
|
||||
text: new Text({
|
||||
placement: 'line',
|
||||
text: 'east-west',
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
overflow: true,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
const line = new Feature(new LineString([
|
||||
[center[0] - 650, center[1] - 200],
|
||||
[center[0] + 650, center[1] - 200]
|
||||
]));
|
||||
line.setStyle(new Style({
|
||||
zIndex: 2,
|
||||
stroke: new Stroke({
|
||||
color: '#CCC',
|
||||
width: 12
|
||||
}),
|
||||
text: new Text({
|
||||
placement: 'line',
|
||||
text: 'east-west',
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
overflow: true
|
||||
})
|
||||
}));
|
||||
);
|
||||
source4.addFeature(point);
|
||||
source4.addFeature(line);
|
||||
map.addLayer(layer4);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import GeoJSON from '../../../src/ol/format/GeoJSON.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {useGeographic} from '../../../src/ol/proj.js';
|
||||
|
||||
useGeographic();
|
||||
@@ -11,17 +11,17 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
zoom: 1,
|
||||
}),
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
extent: [-50, -45, 50, 45],
|
||||
source: new VectorSource({
|
||||
url: '/data/countries.json',
|
||||
format: new GeoJSON()
|
||||
})
|
||||
})
|
||||
]
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import GeoJSON from '../../../src/ol/format/GeoJSON.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Fill, Stroke, Style, Text} from '../../../src/ol/style.js';
|
||||
|
||||
const map = new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [-17465028, 2331736],
|
||||
zoom: 5
|
||||
})
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
const labelStyle = new Style({
|
||||
@@ -18,38 +18,37 @@ const labelStyle = new Style({
|
||||
font: '16px Ubuntu',
|
||||
overflow: true,
|
||||
fill: new Fill({
|
||||
color: '#000'
|
||||
color: '#000',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#fff',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
width: 3,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
const countryStyle = new Style({
|
||||
fill: new Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
})
|
||||
width: 1,
|
||||
}),
|
||||
});
|
||||
const style = [countryStyle, labelStyle];
|
||||
|
||||
const vectorLayer = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
url: '/data/countries.json',
|
||||
format: new GeoJSON()
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
style: function(feature) {
|
||||
style: function (feature) {
|
||||
labelStyle.getText().setText(feature.get('name'));
|
||||
return style;
|
||||
},
|
||||
declutter: true
|
||||
declutter: true,
|
||||
});
|
||||
|
||||
map.addLayer(vectorLayer);
|
||||
|
||||
|
||||
render({tolerance: 0.007});
|
||||
|
||||
@@ -1,30 +1,38 @@
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const src = new VectorSource({
|
||||
features: [
|
||||
new Feature(new Polygon([[
|
||||
[-22, 18],
|
||||
[-22, 78],
|
||||
[-9, 78],
|
||||
[-9, 18],
|
||||
[-22, 18]
|
||||
]])),
|
||||
new Feature(new Polygon([[
|
||||
[-9, 18],
|
||||
[-9, 78],
|
||||
[4, 78],
|
||||
[4, 18],
|
||||
[-9, 18]
|
||||
]]))
|
||||
]
|
||||
new Feature(
|
||||
new Polygon([
|
||||
[
|
||||
[-22, 18],
|
||||
[-22, 78],
|
||||
[-9, 78],
|
||||
[-9, 18],
|
||||
[-22, 18],
|
||||
],
|
||||
])
|
||||
),
|
||||
new Feature(
|
||||
new Polygon([
|
||||
[
|
||||
[-9, 18],
|
||||
[-9, 78],
|
||||
[4, 78],
|
||||
[4, 18],
|
||||
[-9, 18],
|
||||
],
|
||||
])
|
||||
),
|
||||
],
|
||||
});
|
||||
const layer = new VectorLayer({
|
||||
renderBuffer: 0,
|
||||
@@ -32,24 +40,24 @@ const layer = new VectorLayer({
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
color: [0, 0, 0, 1],
|
||||
width: 2
|
||||
width: 2,
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: [255, 0, 0, 1]
|
||||
})
|
||||
})
|
||||
color: [255, 0, 0, 1],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
const view = new View({
|
||||
center: [-9.5, 78],
|
||||
zoom: 2,
|
||||
projection: 'EPSG:4326',
|
||||
multiWorld: true
|
||||
multiWorld: true,
|
||||
});
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [layer],
|
||||
target: 'map',
|
||||
view: view
|
||||
view: view,
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,43 +1,59 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const feature = new Feature({
|
||||
geometry: new Polygon([
|
||||
[[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]],
|
||||
[[0, 60], [-17.6336, 24.2705], [-57.0634, 18.5410], [-28.5317, -9.2705], [-35.2671, -48.5410], [0, -30], [35.2671, -48.5410], [28.5317, -9.2705], [57.0634, 18.5410], [17.6336, 24.2705], [0, 60]]
|
||||
])
|
||||
[
|
||||
[-180, -90],
|
||||
[180, -90],
|
||||
[180, 90],
|
||||
[-180, 90],
|
||||
[-180, -90],
|
||||
],
|
||||
[
|
||||
[0, 60],
|
||||
[-17.6336, 24.2705],
|
||||
[-57.0634, 18.541],
|
||||
[-28.5317, -9.2705],
|
||||
[-35.2671, -48.541],
|
||||
[0, -30],
|
||||
[35.2671, -48.541],
|
||||
[28.5317, -9.2705],
|
||||
[57.0634, 18.541],
|
||||
[17.6336, 24.2705],
|
||||
[0, 60],
|
||||
],
|
||||
]),
|
||||
});
|
||||
|
||||
const src = new VectorSource({
|
||||
features: [
|
||||
feature
|
||||
]
|
||||
features: [feature],
|
||||
});
|
||||
const layer = new VectorLayer({
|
||||
renderBuffer: 0,
|
||||
source: src,
|
||||
style: new Style({
|
||||
fill: new Fill({
|
||||
color: 'blue'
|
||||
})
|
||||
})
|
||||
color: 'blue',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
const view = new View({
|
||||
center: [0, 0],
|
||||
zoom: 1,
|
||||
projection: 'EPSG:4326'
|
||||
projection: 'EPSG:4326',
|
||||
});
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [layer],
|
||||
target: 'map',
|
||||
view: view
|
||||
view: view,
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import Circle from '../../../src/ol/geom/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Circle from '../../../src/ol/geom/Circle.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const center = [1825927.7316762917, 6143091.089223046];
|
||||
|
||||
@@ -18,13 +18,13 @@ const vectorLayer1 = new VectorLayer({
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#3399CC',
|
||||
width: 1.25
|
||||
})
|
||||
})
|
||||
width: 1.25,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
const vectorLayer2 = new VectorLayer({
|
||||
source: source2,
|
||||
opacity: 0.6
|
||||
opacity: 0.6,
|
||||
});
|
||||
|
||||
function addCircle(r, source) {
|
||||
@@ -32,25 +32,33 @@ function addCircle(r, source) {
|
||||
}
|
||||
|
||||
function addPolygon(r, source) {
|
||||
source.addFeature(new Feature(new Polygon([
|
||||
[
|
||||
[center[0] - r, center[1] - r],
|
||||
[center[0] + r, center[1] - r],
|
||||
[center[0] + r, center[1] + r],
|
||||
[center[0] - r, center[1] + r],
|
||||
[center[0] - r, center[1] - r]
|
||||
]
|
||||
])));
|
||||
source.addFeature(
|
||||
new Feature(
|
||||
new Polygon([
|
||||
[
|
||||
[center[0] - r, center[1] - r],
|
||||
[center[0] + r, center[1] - r],
|
||||
[center[0] + r, center[1] + r],
|
||||
[center[0] - r, center[1] + r],
|
||||
[center[0] - r, center[1] - r],
|
||||
],
|
||||
])
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const smallLine = new Feature(new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1]
|
||||
]));
|
||||
smallLine.setStyle(new Style({
|
||||
zIndex: -99,
|
||||
stroke: new Stroke({width: 75, color: 'red'})
|
||||
}));
|
||||
const smallLine = new Feature(
|
||||
new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1],
|
||||
])
|
||||
);
|
||||
smallLine.setStyle(
|
||||
new Style({
|
||||
zIndex: -99,
|
||||
stroke: new Stroke({width: 75, color: 'red'}),
|
||||
})
|
||||
);
|
||||
smallLine.getGeometry().translate(-1000, 1000);
|
||||
source1.addFeature(smallLine);
|
||||
addPolygon(100, source1);
|
||||
@@ -60,32 +68,36 @@ addCircle(500, source1);
|
||||
addPolygon(600, source1);
|
||||
addPolygon(720, source1);
|
||||
|
||||
const smallLine2 = new Feature(new LineString([
|
||||
[center[0], center[1] - 1000],
|
||||
[center[0], center[1] + 1000]
|
||||
]));
|
||||
const smallLine2 = new Feature(
|
||||
new LineString([
|
||||
[center[0], center[1] - 1000],
|
||||
[center[0], center[1] + 1000],
|
||||
])
|
||||
);
|
||||
smallLine2.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({width: 35, color: 'blue'})
|
||||
stroke: new Stroke({width: 35, color: 'blue'}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({width: 15, color: 'green'})
|
||||
})
|
||||
stroke: new Stroke({width: 15, color: 'green'}),
|
||||
}),
|
||||
]);
|
||||
smallLine2.getGeometry().translate(1000, 1000);
|
||||
source1.addFeature(smallLine2);
|
||||
|
||||
const smallLine3 = new Feature(new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1]
|
||||
]));
|
||||
const smallLine3 = new Feature(
|
||||
new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1],
|
||||
])
|
||||
);
|
||||
smallLine3.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({width: 75, color: 'red'})
|
||||
stroke: new Stroke({width: 75, color: 'red'}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({width: 45, color: 'white'})
|
||||
})
|
||||
stroke: new Stroke({width: 45, color: 'white'}),
|
||||
}),
|
||||
]);
|
||||
smallLine3.getGeometry().translate(-1000, -1000);
|
||||
|
||||
@@ -94,15 +106,12 @@ addCircle(400, source2);
|
||||
source2.addFeature(smallLine3);
|
||||
|
||||
const map = new Map({
|
||||
layers: [
|
||||
vectorLayer1,
|
||||
vectorLayer2
|
||||
],
|
||||
layers: [vectorLayer1, vectorLayer2],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 13
|
||||
})
|
||||
zoom: 13,
|
||||
}),
|
||||
});
|
||||
|
||||
map.getView().setRotation(Math.PI + Math.PI / 4);
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
|
||||
import CircleStyle from '../../../src/ol/style/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Text from '../../../src/ol/style/Text.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 LineString from '../../../src/ol/geom/LineString.js';
|
||||
import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
let center = [1825927.7316762917, 6143091.089223046];
|
||||
const map = new Map({
|
||||
@@ -17,56 +17,60 @@ const map = new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 13
|
||||
})
|
||||
zoom: 13,
|
||||
}),
|
||||
});
|
||||
|
||||
const source1 = new VectorSource();
|
||||
const layer1 = new VectorImageLayer({
|
||||
declutter: true,
|
||||
source: source1
|
||||
source: source1,
|
||||
});
|
||||
|
||||
const source2 = new VectorSource();
|
||||
const layer2 = new VectorImageLayer({
|
||||
declutter: true,
|
||||
source: source2
|
||||
source: source2,
|
||||
});
|
||||
|
||||
const source3 = new VectorSource();
|
||||
const layer3 = new VectorImageLayer({
|
||||
declutter: true,
|
||||
source: source3
|
||||
source: source3,
|
||||
});
|
||||
|
||||
const source4 = new VectorSource();
|
||||
const layer4 = new VectorImageLayer({
|
||||
declutter: true,
|
||||
source: source4
|
||||
source: source4,
|
||||
});
|
||||
|
||||
const feature1 = new Feature({
|
||||
geometry: new Point(center),
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
});
|
||||
source1.addFeature(feature1);
|
||||
source1.addFeature(new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
zIndex: 3
|
||||
}));
|
||||
source1.addFeature(new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
zIndex: 1
|
||||
}));
|
||||
layer1.setStyle(function(feature) {
|
||||
source1.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
zIndex: 3,
|
||||
})
|
||||
);
|
||||
source1.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
zIndex: 1,
|
||||
})
|
||||
);
|
||||
layer1.setStyle(function (feature) {
|
||||
return new Style({
|
||||
zIndex: feature.get('zIndex'),
|
||||
image: new CircleStyle({
|
||||
radius: 15,
|
||||
fill: new Fill({
|
||||
color: 'blue'
|
||||
})
|
||||
})
|
||||
color: 'blue',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
});
|
||||
map.addLayer(layer1);
|
||||
@@ -75,91 +79,107 @@ center = [center[0] + 500, center[1] + 700];
|
||||
const feature2 = new Feature({
|
||||
geometry: new Point(center),
|
||||
text: 'center',
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
});
|
||||
source2.addFeature(feature2);
|
||||
source2.addFeature(new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west',
|
||||
zIndex: 3
|
||||
}));
|
||||
source2.addFeature(new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east',
|
||||
zIndex: 1
|
||||
}));
|
||||
layer2.setStyle(function(feature) {
|
||||
source2.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west',
|
||||
zIndex: 3,
|
||||
})
|
||||
);
|
||||
source2.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east',
|
||||
zIndex: 1,
|
||||
})
|
||||
);
|
||||
layer2.setStyle(function (feature) {
|
||||
return new Style({
|
||||
zIndex: feature.get('zIndex'),
|
||||
text: new Text({
|
||||
text: feature.get('text'),
|
||||
font: 'italic bold 18px Ubuntu'
|
||||
})
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
}),
|
||||
});
|
||||
});
|
||||
map.addLayer(layer2);
|
||||
|
||||
center = [center[0] + 500, center[1] + 300];
|
||||
source3.addFeature(new Feature({
|
||||
geometry: new Point(center),
|
||||
text: 'center'
|
||||
}));
|
||||
source3.addFeature(new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west'
|
||||
}));
|
||||
source3.addFeature(new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east'
|
||||
}));
|
||||
layer3.setStyle(function(feature) {
|
||||
source3.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point(center),
|
||||
text: 'center',
|
||||
})
|
||||
);
|
||||
source3.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] - 540, center[1]]),
|
||||
text: 'west',
|
||||
})
|
||||
);
|
||||
source3.addFeature(
|
||||
new Feature({
|
||||
geometry: new Point([center[0] + 540, center[1]]),
|
||||
text: 'east',
|
||||
})
|
||||
);
|
||||
layer3.setStyle(function (feature) {
|
||||
return new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 10,
|
||||
stroke: new Stroke({
|
||||
color: 'red',
|
||||
width: 8
|
||||
})
|
||||
width: 8,
|
||||
}),
|
||||
}),
|
||||
text: new Text({
|
||||
text: feature.get('text'),
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
textBaseline: 'bottom',
|
||||
offsetY: -12
|
||||
})
|
||||
offsetY: -12,
|
||||
}),
|
||||
});
|
||||
});
|
||||
map.addLayer(layer3);
|
||||
|
||||
center = [center[0] - 2000, center[1] - 2000];
|
||||
const point = new Feature(new Point(center));
|
||||
point.setStyle(new Style({
|
||||
zIndex: 1,
|
||||
image: new CircleStyle({
|
||||
radius: 8,
|
||||
point.setStyle(
|
||||
new Style({
|
||||
zIndex: 1,
|
||||
image: new CircleStyle({
|
||||
radius: 8,
|
||||
stroke: new Stroke({
|
||||
color: 'blue',
|
||||
width: 4,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
const line = new Feature(
|
||||
new LineString([
|
||||
[center[0] - 650, center[1] - 200],
|
||||
[center[0] + 650, center[1] - 200],
|
||||
])
|
||||
);
|
||||
line.setStyle(
|
||||
new Style({
|
||||
zIndex: 2,
|
||||
stroke: new Stroke({
|
||||
color: 'blue',
|
||||
width: 4
|
||||
})
|
||||
color: '#CCC',
|
||||
width: 12,
|
||||
}),
|
||||
text: new Text({
|
||||
placement: 'line',
|
||||
text: 'east-west',
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
overflow: true,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
const line = new Feature(new LineString([
|
||||
[center[0] - 650, center[1] - 200],
|
||||
[center[0] + 650, center[1] - 200]
|
||||
]));
|
||||
line.setStyle(new Style({
|
||||
zIndex: 2,
|
||||
stroke: new Stroke({
|
||||
color: '#CCC',
|
||||
width: 12
|
||||
}),
|
||||
text: new Text({
|
||||
placement: 'line',
|
||||
text: 'east-west',
|
||||
font: 'italic bold 18px Ubuntu',
|
||||
overflow: true
|
||||
})
|
||||
}));
|
||||
);
|
||||
source4.addFeature(point);
|
||||
source4.addFeature(line);
|
||||
map.addLayer(layer4);
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Circle from '../../../src/ol/geom/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const center = [1825927.7316762917, 6143091.089223046];
|
||||
|
||||
@@ -18,13 +18,13 @@ const vectorLayer1 = new VectorImageLayer({
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#3399CC',
|
||||
width: 1.25
|
||||
})
|
||||
})
|
||||
width: 1.25,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
const vectorLayer2 = new VectorImageLayer({
|
||||
source: source2,
|
||||
opacity: 0.6
|
||||
opacity: 0.6,
|
||||
});
|
||||
|
||||
function addCircle(r, source) {
|
||||
@@ -32,25 +32,33 @@ function addCircle(r, source) {
|
||||
}
|
||||
|
||||
function addPolygon(r, source) {
|
||||
source.addFeature(new Feature(new Polygon([
|
||||
[
|
||||
[center[0] - r, center[1] - r],
|
||||
[center[0] + r, center[1] - r],
|
||||
[center[0] + r, center[1] + r],
|
||||
[center[0] - r, center[1] + r],
|
||||
[center[0] - r, center[1] - r]
|
||||
]
|
||||
])));
|
||||
source.addFeature(
|
||||
new Feature(
|
||||
new Polygon([
|
||||
[
|
||||
[center[0] - r, center[1] - r],
|
||||
[center[0] + r, center[1] - r],
|
||||
[center[0] + r, center[1] + r],
|
||||
[center[0] - r, center[1] + r],
|
||||
[center[0] - r, center[1] - r],
|
||||
],
|
||||
])
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const smallLine = new Feature(new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1]
|
||||
]));
|
||||
smallLine.setStyle(new Style({
|
||||
zIndex: -99,
|
||||
stroke: new Stroke({width: 75, color: 'red'})
|
||||
}));
|
||||
const smallLine = new Feature(
|
||||
new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1],
|
||||
])
|
||||
);
|
||||
smallLine.setStyle(
|
||||
new Style({
|
||||
zIndex: -99,
|
||||
stroke: new Stroke({width: 75, color: 'red'}),
|
||||
})
|
||||
);
|
||||
smallLine.getGeometry().translate(-1000, 1000);
|
||||
source1.addFeature(smallLine);
|
||||
addPolygon(100, source1);
|
||||
@@ -60,32 +68,36 @@ addCircle(500, source1);
|
||||
addPolygon(600, source1);
|
||||
addPolygon(720, source1);
|
||||
|
||||
const smallLine2 = new Feature(new LineString([
|
||||
[center[0], center[1] - 1000],
|
||||
[center[0], center[1] + 1000]
|
||||
]));
|
||||
const smallLine2 = new Feature(
|
||||
new LineString([
|
||||
[center[0], center[1] - 1000],
|
||||
[center[0], center[1] + 1000],
|
||||
])
|
||||
);
|
||||
smallLine2.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({width: 35, color: 'blue'})
|
||||
stroke: new Stroke({width: 35, color: 'blue'}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({width: 15, color: 'green'})
|
||||
})
|
||||
stroke: new Stroke({width: 15, color: 'green'}),
|
||||
}),
|
||||
]);
|
||||
smallLine2.getGeometry().translate(1000, 1000);
|
||||
source1.addFeature(smallLine2);
|
||||
|
||||
const smallLine3 = new Feature(new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1]
|
||||
]));
|
||||
const smallLine3 = new Feature(
|
||||
new LineString([
|
||||
[center[0], center[1] - 1],
|
||||
[center[0], center[1] + 1],
|
||||
])
|
||||
);
|
||||
smallLine3.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({width: 75, color: 'red'})
|
||||
stroke: new Stroke({width: 75, color: 'red'}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({width: 45, color: 'white'})
|
||||
})
|
||||
stroke: new Stroke({width: 45, color: 'white'}),
|
||||
}),
|
||||
]);
|
||||
smallLine3.getGeometry().translate(-1000, -1000);
|
||||
|
||||
@@ -94,15 +106,12 @@ addCircle(1000, source2);
|
||||
source2.addFeature(smallLine3);
|
||||
|
||||
const map = new Map({
|
||||
layers: [
|
||||
vectorLayer1,
|
||||
vectorLayer2
|
||||
],
|
||||
layers: [vectorLayer1, vectorLayer2],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 13
|
||||
})
|
||||
zoom: 13,
|
||||
}),
|
||||
});
|
||||
|
||||
map.getView().setRotation(Math.PI + Math.PI / 4);
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorTileSource from '../../../src/ol/source/VectorTile.js';
|
||||
import MVT from '../../../src/ol/format/MVT.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
|
||||
import VectorTileRenderType from '../../../src/ol/layer/VectorTileRenderType.js';
|
||||
import VectorTileSource from '../../../src/ol/source/VectorTile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
|
||||
new Map({
|
||||
layers: [
|
||||
@@ -14,18 +14,18 @@ new Map({
|
||||
format: new MVT(),
|
||||
tileGrid: createXYZ(),
|
||||
url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
|
||||
transition: 0
|
||||
})
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [1825927.7316762917, 6143091.089223046],
|
||||
zoom: 14
|
||||
})
|
||||
zoom: 14,
|
||||
}),
|
||||
});
|
||||
|
||||
render({
|
||||
message: 'Vector tile layer renders with vector render mode',
|
||||
tolerance: 0.01
|
||||
tolerance: 0.01,
|
||||
});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorTileSource from '../../../src/ol/source/VectorTile.js';
|
||||
import MVT from '../../../src/ol/format/MVT.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import Map from '../../../src/ol/Map.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 {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
|
||||
const map = new Map({
|
||||
pixelRatio: 2,
|
||||
@@ -13,19 +13,19 @@ const map = new Map({
|
||||
format: new MVT(),
|
||||
tileGrid: createXYZ(),
|
||||
url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
|
||||
transition: 0
|
||||
})
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [1825927.7316762917, 6143091.089223046],
|
||||
zoom: 14
|
||||
})
|
||||
zoom: 14,
|
||||
}),
|
||||
});
|
||||
|
||||
map.getView().setRotation(Math.PI / 4);
|
||||
render({
|
||||
message: 'Vector tile layer rotates (hidip)',
|
||||
tolerance: 0.01
|
||||
tolerance: 0.01,
|
||||
});
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorTileSource from '../../../src/ol/source/VectorTile.js';
|
||||
import MVT from '../../../src/ol/format/MVT.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import CircleStyle from '../../../src/ol/style/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import MVT from '../../../src/ol/format/MVT.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.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 {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
|
||||
const vectorSource = new VectorSource({
|
||||
features: [
|
||||
new Feature(new Point([1825727.7316762917, 6143091.089223046]))
|
||||
]
|
||||
features: [new Feature(new Point([1825727.7316762917, 6143091.089223046]))],
|
||||
});
|
||||
const layer = new VectorLayer({
|
||||
zIndex: 1,
|
||||
@@ -24,10 +22,10 @@ const layer = new VectorLayer({
|
||||
image: new CircleStyle({
|
||||
radius: 10,
|
||||
fill: new Fill({
|
||||
color: 'red'
|
||||
})
|
||||
})
|
||||
})
|
||||
color: 'red',
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -38,16 +36,16 @@ new Map({
|
||||
format: new MVT(),
|
||||
tileGrid: createXYZ(),
|
||||
url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
|
||||
transition: 0
|
||||
})
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [1825927.7316762917, 6143091.089223046],
|
||||
zoom: 14,
|
||||
rotation: Math.PI / 4
|
||||
})
|
||||
rotation: Math.PI / 4,
|
||||
}),
|
||||
});
|
||||
|
||||
render({message: 'Vector tile layer rotates with vector layer on top'});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorTileSource from '../../../src/ol/source/VectorTile.js';
|
||||
import MVT from '../../../src/ol/format/MVT.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import Map from '../../../src/ol/Map.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 {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
|
||||
const map = new Map({
|
||||
layers: [
|
||||
@@ -12,15 +12,15 @@ const map = new Map({
|
||||
format: new MVT(),
|
||||
tileGrid: createXYZ(),
|
||||
url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
|
||||
transition: 0
|
||||
})
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [1825927.7316762917, 6143091.089223046],
|
||||
zoom: 14
|
||||
})
|
||||
zoom: 14,
|
||||
}),
|
||||
});
|
||||
|
||||
map.getView().setRotation(Math.PI / 4);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import VectorTileSource from '../../../src/ol/source/VectorTile.js';
|
||||
import MVT from '../../../src/ol/format/MVT.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import Map from '../../../src/ol/Map.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 {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
|
||||
new Map({
|
||||
layers: [
|
||||
@@ -12,18 +12,18 @@ new Map({
|
||||
format: new MVT(),
|
||||
tileGrid: createXYZ(),
|
||||
url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
|
||||
transition: 0
|
||||
})
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [1825927.7316762917, 6143091.089223046],
|
||||
zoom: 14
|
||||
})
|
||||
zoom: 14,
|
||||
}),
|
||||
});
|
||||
|
||||
render({
|
||||
message: 'Vector tile layer renders',
|
||||
tolerance: 0.01
|
||||
tolerance: 0.01,
|
||||
});
|
||||
|
||||
@@ -1,70 +1,86 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
let feature;
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, 60], [45, 60]])
|
||||
geometry: new LineString([
|
||||
[-60, 60],
|
||||
[45, 60],
|
||||
]),
|
||||
});
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, -50], [30, 10]])
|
||||
geometry: new LineString([
|
||||
[-60, -50],
|
||||
[30, 10],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-110, -100], [0, 100], [100, -90]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-80, 80], [80, 80], [-40, -90]])
|
||||
geometry: new LineString([
|
||||
[-110, -100],
|
||||
[0, 100],
|
||||
[100, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round',
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([
|
||||
[-80, 80],
|
||||
[80, 80],
|
||||
[-40, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#F2F211', width: 5})
|
||||
stroke: new Stroke({color: '#F2F211', width: 5}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#292921', width: 1})
|
||||
})
|
||||
stroke: new Stroke({color: '#292921', width: 1}),
|
||||
}),
|
||||
]);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
className: 'bw',
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,70 +1,86 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
let feature;
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, 60], [45, 60]])
|
||||
geometry: new LineString([
|
||||
[-60, 60],
|
||||
[45, 60],
|
||||
]),
|
||||
});
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, -50], [30, 10]])
|
||||
geometry: new LineString([
|
||||
[-60, -50],
|
||||
[30, 10],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-110, -100], [0, 100], [100, -90]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-80, 80], [80, 80], [-40, -90]])
|
||||
geometry: new LineString([
|
||||
[-110, -100],
|
||||
[0, 100],
|
||||
[100, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round',
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([
|
||||
[-80, 80],
|
||||
[80, 80],
|
||||
[-40, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#F2F211', width: 5})
|
||||
stroke: new Stroke({color: '#F2F211', width: 5}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#292921', width: 1})
|
||||
})
|
||||
stroke: new Stroke({color: '#292921', width: 1}),
|
||||
}),
|
||||
]);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
opacity: 0.5,
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,70 +1,86 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
let feature;
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, 60], [45, 60]])
|
||||
geometry: new LineString([
|
||||
[-60, 60],
|
||||
[45, 60],
|
||||
]),
|
||||
});
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, -50], [30, 10]])
|
||||
geometry: new LineString([
|
||||
[-60, -50],
|
||||
[30, 10],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-110, -100], [0, 100], [100, -90]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-80, 80], [80, 80], [-40, -90]])
|
||||
geometry: new LineString([
|
||||
[-110, -100],
|
||||
[0, 100],
|
||||
[100, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round',
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([
|
||||
[-80, 80],
|
||||
[80, 80],
|
||||
[-40, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#F2F211', width: 5})
|
||||
stroke: new Stroke({color: '#F2F211', width: 5}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#292921', width: 1})
|
||||
})
|
||||
stroke: new Stroke({color: '#292921', width: 1}),
|
||||
}),
|
||||
]);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1,
|
||||
rotation: Math.PI / 4
|
||||
})
|
||||
rotation: Math.PI / 4,
|
||||
}),
|
||||
});
|
||||
|
||||
render({tolerance: 0.01});
|
||||
|
||||
@@ -1,69 +1,85 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
let feature;
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, 60], [45, 60]])
|
||||
geometry: new LineString([
|
||||
[-60, 60],
|
||||
[45, 60],
|
||||
]),
|
||||
});
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, -50], [30, 10]])
|
||||
geometry: new LineString([
|
||||
[-60, -50],
|
||||
[30, 10],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-110, -100], [0, 100], [100, -90]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 3}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-80, 80], [80, 80], [-40, -90]])
|
||||
geometry: new LineString([
|
||||
[-110, -100],
|
||||
[0, 100],
|
||||
[100, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(55, 55, 55, 0.75)',
|
||||
width: 5,
|
||||
lineCap: 'square',
|
||||
lineDash: [4, 8],
|
||||
lineJoin: 'round',
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([
|
||||
[-80, 80],
|
||||
[80, 80],
|
||||
[-40, -90],
|
||||
]),
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#F2F211', width: 5})
|
||||
stroke: new Stroke({color: '#F2F211', width: 5}),
|
||||
}),
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#292921', width: 1})
|
||||
})
|
||||
stroke: new Stroke({color: '#292921', width: 1}),
|
||||
}),
|
||||
]);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const map = new Map({
|
||||
pixelRatio: 1,
|
||||
@@ -11,18 +11,20 @@ const map = new Map({
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [new Feature({
|
||||
geometry: new Point([0, 0])
|
||||
})]
|
||||
})
|
||||
})
|
||||
features: [
|
||||
new Feature({
|
||||
geometry: new Point([0, 0]),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
resolution: 1,
|
||||
multiWorld: true
|
||||
})
|
||||
multiWorld: true,
|
||||
}),
|
||||
});
|
||||
map.getView().setCenter([10, 10]);
|
||||
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
new Map({
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
rotation: Math.PI / 3,
|
||||
center: fromLonLat([8.6, 50.1]),
|
||||
zoom: 3
|
||||
})
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
@@ -11,17 +11,19 @@ new Map({
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [new Feature({
|
||||
geometry: new Point([0, 0])
|
||||
})]
|
||||
})
|
||||
})
|
||||
features: [
|
||||
new Feature({
|
||||
geometry: new Point([0, 0]),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import GeoJSON from '../../../src/ol/format/GeoJSON.js';
|
||||
import {Style, Stroke} from '../../../src/ol/style.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import GeoJSON from '../../../src/ol/format/GeoJSON.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Stroke, Style} from '../../../src/ol/style.js';
|
||||
import {
|
||||
Tile as TileLayer,
|
||||
Vector as VectorLayer,
|
||||
} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
|
||||
const map = new Map({
|
||||
layers: [
|
||||
@@ -14,32 +17,32 @@ const map = new Map({
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
width: 0.75
|
||||
})
|
||||
width: 0.75,
|
||||
}),
|
||||
}),
|
||||
source: new VectorSource({
|
||||
url: '/data/countries.json',
|
||||
format: new GeoJSON()
|
||||
})
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
maxZoom: 3
|
||||
})
|
||||
})
|
||||
maxZoom: 3,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
zoom: 2,
|
||||
}),
|
||||
});
|
||||
|
||||
const unmanaged = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [new Feature(new Point([0, 0]))]
|
||||
})
|
||||
features: [new Feature(new Point([0, 0]))],
|
||||
}),
|
||||
});
|
||||
unmanaged.setMap(map);
|
||||
|
||||
|
||||
@@ -1,169 +1,185 @@
|
||||
import CircleStyle from '../../../src/ol/style/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import MultiPoint from '../../../src/ol/geom/MultiPoint.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import MultiPoint from '../../../src/ol/geom/MultiPoint.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.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 Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
|
||||
let feature;
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-20, 18]])
|
||||
geometry: new MultiPoint([[-20, 18]]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339'
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-10, 18]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6'
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[4, 18]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6'
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-20, 3]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339',
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-10, 3]])
|
||||
geometry: new MultiPoint([[-10, 18]]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6',
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[4, 3]])
|
||||
geometry: new MultiPoint([[4, 18]]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6',
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-20, -15]])
|
||||
geometry: new MultiPoint([[-20, 3]]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-10, -15]])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: 'rgba(0, 0, 255, 0.3)'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 1,
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[4, -15]])
|
||||
geometry: new MultiPoint([[-10, 3]]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: 'rgba(235, 45, 70, 0.6)'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[4, 3]]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 3,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-20, -15]]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 1,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[-10, -15]]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: 'rgba(0, 0, 255, 0.3)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new MultiPoint([[4, -15]]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: 'rgba(235, 45, 70, 0.6)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 3,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
const vectorLayer = new VectorLayer({
|
||||
source: vectorSource
|
||||
source: vectorSource,
|
||||
});
|
||||
|
||||
new Map({
|
||||
layers: [
|
||||
vectorLayer
|
||||
],
|
||||
layers: [vectorLayer],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
})
|
||||
zoom: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,169 +1,185 @@
|
||||
import CircleStyle from '../../../src/ol/style/Circle.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.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 Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
|
||||
let feature;
|
||||
feature = new Feature({
|
||||
geometry: new Point([-20, 18])
|
||||
geometry: new Point([-20, 18]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339'
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10, 18])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6'
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([4, 18])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6'
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-20, 3])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339',
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10, 3])
|
||||
geometry: new Point([-10, 18]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6',
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([4, 3])
|
||||
geometry: new Point([4, 18]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6',
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-20, -15])
|
||||
geometry: new Point([-20, 3]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
}));
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10, -15])
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: 'rgba(0, 0, 255, 0.3)'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
fill: new Fill({
|
||||
color: '#91E339',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 1,
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([4, -15])
|
||||
geometry: new Point([-10, 3]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: 'rgba(235, 45, 70, 0.6)'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: '#5447E6',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([4, 3]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: '#92A8A6',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000000',
|
||||
width: 3,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-20, -15]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 2,
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 1,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10, -15]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 4,
|
||||
fill: new Fill({
|
||||
color: 'rgba(0, 0, 255, 0.3)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([4, -15]),
|
||||
});
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 6,
|
||||
fill: new Fill({
|
||||
color: 'rgba(235, 45, 70, 0.6)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#256308',
|
||||
width: 3,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
const vectorLayer = new VectorLayer({
|
||||
source: vectorSource
|
||||
source: vectorSource,
|
||||
});
|
||||
|
||||
new Map({
|
||||
layers: [
|
||||
vectorLayer
|
||||
],
|
||||
layers: [vectorLayer],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
})
|
||||
zoom: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
// create gradient
|
||||
const canvas = document.createElement('canvas');
|
||||
@@ -34,51 +33,84 @@ context.arc(5, 5, 2, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
const pattern = context.createPattern(canvas, 'repeat');
|
||||
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
let feature;
|
||||
|
||||
// rectangle with 1 hole
|
||||
feature = new Feature({
|
||||
geometry: new Polygon([
|
||||
[[-22.5, -5], [-22.5, 35], [37.5, 35], [37.5, -5], [-22.5, -5]],
|
||||
[[-2.5, 7], [17.5, 7], [17.5, 23], [-2.5, 23], [-2.5, 7]]
|
||||
])
|
||||
[
|
||||
[-22.5, -5],
|
||||
[-22.5, 35],
|
||||
[37.5, 35],
|
||||
[37.5, -5],
|
||||
[-22.5, -5],
|
||||
],
|
||||
[
|
||||
[-2.5, 7],
|
||||
[17.5, 7],
|
||||
[17.5, 23],
|
||||
[-2.5, 23],
|
||||
[-2.5, 7],
|
||||
],
|
||||
]),
|
||||
});
|
||||
|
||||
feature.setStyle(new Style({
|
||||
fill: new Fill({color: pattern}),
|
||||
stroke: new Stroke({color: gradient, width: 3})
|
||||
}));
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
fill: new Fill({color: pattern}),
|
||||
stroke: new Stroke({color: gradient, width: 3}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// rectangle with 2 holes
|
||||
feature = new Feature({
|
||||
geometry: new Polygon([
|
||||
[[-37.5, -32.5], [-37.5, 17.5], [32.5, 17.5], [32.5, -32.5], [-37.5, -32.5]],
|
||||
[[-33.5, -28.5], [-21.5, -28.5], [-21.5, -16.5], [-33.5, -16.5], [-33.5, -28.5]],
|
||||
[[12.5, -28.5], [26.5, -28.5], [26.5, -16.5], [12.5, -16.5], [12.5, -28.5]]
|
||||
])
|
||||
[
|
||||
[-37.5, -32.5],
|
||||
[-37.5, 17.5],
|
||||
[32.5, 17.5],
|
||||
[32.5, -32.5],
|
||||
[-37.5, -32.5],
|
||||
],
|
||||
[
|
||||
[-33.5, -28.5],
|
||||
[-21.5, -28.5],
|
||||
[-21.5, -16.5],
|
||||
[-33.5, -16.5],
|
||||
[-33.5, -28.5],
|
||||
],
|
||||
[
|
||||
[12.5, -28.5],
|
||||
[26.5, -28.5],
|
||||
[26.5, -16.5],
|
||||
[12.5, -16.5],
|
||||
[12.5, -28.5],
|
||||
],
|
||||
]),
|
||||
});
|
||||
|
||||
feature.setStyle(new Style({
|
||||
fill: new Fill({color: gradient}),
|
||||
stroke: new Stroke({color: pattern, width: 5})
|
||||
}));
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
fill: new Fill({color: gradient}),
|
||||
stroke: new Stroke({color: pattern, width: 5}),
|
||||
})
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
let feature;
|
||||
@@ -14,87 +14,153 @@ let feature;
|
||||
// rectangle with 1 hole
|
||||
feature = new Feature({
|
||||
geometry: new Polygon([
|
||||
[[-102.5, 75], [-102.5, 115], [-42.5, 115], [-42.5, 75], [-102.5, 75]],
|
||||
[[-82.5, 87], [-62.5, 87], [-62.5, 103], [-82.5, 103], [-82.5, 87]]
|
||||
])
|
||||
[
|
||||
[-102.5, 75],
|
||||
[-102.5, 115],
|
||||
[-42.5, 115],
|
||||
[-42.5, 75],
|
||||
[-102.5, 75],
|
||||
],
|
||||
[
|
||||
[-82.5, 87],
|
||||
[-62.5, 87],
|
||||
[-62.5, 103],
|
||||
[-82.5, 103],
|
||||
[-82.5, 87],
|
||||
],
|
||||
]),
|
||||
});
|
||||
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
width: 4,
|
||||
color: '#000',
|
||||
lineJoin: 'round',
|
||||
lineCap: 'butt'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
width: 4,
|
||||
color: '#000',
|
||||
lineJoin: 'round',
|
||||
lineCap: 'butt',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// rectangle with 2 holes
|
||||
feature = new Feature({
|
||||
geometry: new Polygon([
|
||||
[[-117.5, 47.5], [-117.5, 97.5], [-47.5, 97.5], [-47.5, 47.5], [-117.5, 47.5]],
|
||||
[[-113.5, 51.5], [-101.5, 51.5], [-101.5, 63.5], [-113.5, 63.5], [-113.5, 51.5]],
|
||||
[[-67.5, 51.5], [-53.5, 51.5], [-53.5, 63.5], [-67.5, 63.5], [-67.5, 51.5]]
|
||||
])
|
||||
[
|
||||
[-117.5, 47.5],
|
||||
[-117.5, 97.5],
|
||||
[-47.5, 97.5],
|
||||
[-47.5, 47.5],
|
||||
[-117.5, 47.5],
|
||||
],
|
||||
[
|
||||
[-113.5, 51.5],
|
||||
[-101.5, 51.5],
|
||||
[-101.5, 63.5],
|
||||
[-113.5, 63.5],
|
||||
[-113.5, 51.5],
|
||||
],
|
||||
[
|
||||
[-67.5, 51.5],
|
||||
[-53.5, 51.5],
|
||||
[-53.5, 63.5],
|
||||
[-67.5, 63.5],
|
||||
[-67.5, 51.5],
|
||||
],
|
||||
]),
|
||||
});
|
||||
|
||||
feature.setStyle(new Style({
|
||||
zIndex: -1,
|
||||
fill: new Fill({
|
||||
color: '#1A5E42'
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#9696EB',
|
||||
width: 3
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
zIndex: -1,
|
||||
fill: new Fill({
|
||||
color: '#1A5E42',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#9696EB',
|
||||
width: 3,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
|
||||
// rectangle with 1 hole
|
||||
feature = new Feature({
|
||||
geometry: new Polygon([
|
||||
[[-22.5, -5], [-22.5, 35], [37.5, 35], [37.5, -5], [-22.5, -5]],
|
||||
[[-2.5, 7], [17.5, 7], [17.5, 23], [-2.5, 23], [-2.5, 7]]
|
||||
])
|
||||
[
|
||||
[-22.5, -5],
|
||||
[-22.5, 35],
|
||||
[37.5, 35],
|
||||
[37.5, -5],
|
||||
[-22.5, -5],
|
||||
],
|
||||
[
|
||||
[-2.5, 7],
|
||||
[17.5, 7],
|
||||
[17.5, 23],
|
||||
[-2.5, 23],
|
||||
[-2.5, 7],
|
||||
],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
width: 3,
|
||||
color: '#777',
|
||||
lineDash: [2, 4]
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
width: 3,
|
||||
color: '#777',
|
||||
lineDash: [2, 4],
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// rectangle with 2 holes
|
||||
feature = new Feature({
|
||||
geometry: new Polygon([
|
||||
[[-37.5, -32.5], [-37.5, 17.5], [32.5, 17.5], [32.5, -32.5], [-37.5, -32.5]],
|
||||
[[-33.5, -28.5], [-21.5, -28.5], [-21.5, -16.5], [-33.5, -16.5], [-33.5, -28.5]],
|
||||
[[12.5, -28.5], [26.5, -28.5], [26.5, -16.5], [12.5, -16.5], [12.5, -28.5]]
|
||||
])
|
||||
[
|
||||
[-37.5, -32.5],
|
||||
[-37.5, 17.5],
|
||||
[32.5, 17.5],
|
||||
[32.5, -32.5],
|
||||
[-37.5, -32.5],
|
||||
],
|
||||
[
|
||||
[-33.5, -28.5],
|
||||
[-21.5, -28.5],
|
||||
[-21.5, -16.5],
|
||||
[-33.5, -16.5],
|
||||
[-33.5, -28.5],
|
||||
],
|
||||
[
|
||||
[12.5, -28.5],
|
||||
[26.5, -28.5],
|
||||
[26.5, -16.5],
|
||||
[12.5, -16.5],
|
||||
[12.5, -28.5],
|
||||
],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
fill: new Fill({
|
||||
color: 'rgba(255, 0, 0, 0.85)'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
fill: new Fill({
|
||||
color: 'rgba(255, 0, 0, 0.85)',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,89 +1,94 @@
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import RegularShape from '../../../src/ol/style/RegularShape.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import RegularShape from '../../../src/ol/style/RegularShape.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
function createFeatures(stroke, fill, offSet = [0, 0]) {
|
||||
let feature;
|
||||
feature = new Feature({
|
||||
geometry: new Point([offSet[0], offSet[1]])
|
||||
geometry: new Point([offSet[0], offSet[1]]),
|
||||
});
|
||||
// square with offset
|
||||
feature.setStyle(new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 4,
|
||||
radius: 10,
|
||||
angle: Math.PI / 4,
|
||||
displacement: [-15, 15]
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 4,
|
||||
radius: 10,
|
||||
angle: Math.PI / 4,
|
||||
displacement: [-15, 15],
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([8 + offSet[0], 15 + offSet[1]])
|
||||
geometry: new Point([8 + offSet[0], 15 + offSet[1]]),
|
||||
});
|
||||
// triangle
|
||||
feature.setStyle(new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 3,
|
||||
radius: 10,
|
||||
rotation: Math.PI / 4,
|
||||
angle: 0
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 3,
|
||||
radius: 10,
|
||||
rotation: Math.PI / 4,
|
||||
angle: 0,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10 + offSet[0], -8 + offSet[1]])
|
||||
geometry: new Point([-10 + offSet[0], -8 + offSet[1]]),
|
||||
});
|
||||
// star
|
||||
feature.setStyle(new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 5,
|
||||
radius: 10,
|
||||
radius2: 4,
|
||||
angle: 0
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 5,
|
||||
radius: 10,
|
||||
radius2: 4,
|
||||
angle: 0,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new Point([12 + offSet[0], -8 + offSet[1]])
|
||||
geometry: new Point([12 + offSet[0], -8 + offSet[1]]),
|
||||
});
|
||||
// cross
|
||||
feature.setStyle(new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 4,
|
||||
radius: 10,
|
||||
radius2: 0,
|
||||
angle: 0
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
image: new RegularShape({
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
points: 4,
|
||||
radius: 10,
|
||||
radius2: 0,
|
||||
angle: 0,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
}
|
||||
|
||||
createFeatures(
|
||||
new Stroke({width: 2}),
|
||||
new Fill({color: 'red'})
|
||||
);
|
||||
createFeatures(new Stroke({width: 2}), new Fill({color: 'red'}));
|
||||
createFeatures(
|
||||
new Stroke({
|
||||
lineDash: [10, 5]
|
||||
lineDash: [10, 5],
|
||||
}),
|
||||
null,
|
||||
[50, 50]
|
||||
@@ -91,7 +96,7 @@ createFeatures(
|
||||
createFeatures(
|
||||
new Stroke({
|
||||
lineDash: [10, 5],
|
||||
lineDashOffset: 5
|
||||
lineDashOffset: 5,
|
||||
}),
|
||||
null,
|
||||
[-50, -50]
|
||||
@@ -100,7 +105,7 @@ createFeatures(
|
||||
createFeatures(new Stroke(), new Fill(), [50, -50]);
|
||||
|
||||
const vectorLayer = new VectorLayer({
|
||||
source: vectorSource
|
||||
source: vectorSource,
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -108,8 +113,8 @@ new Map({
|
||||
layers: [vectorLayer],
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,77 +1,126 @@
|
||||
import CircleStyle from '../../../src/ol/style/Circle.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Polygon from '../../../src/ol/geom/Polygon.js';
|
||||
import {toContext} from '../../../src/ol/render.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';
|
||||
import {toContext} from '../../../src/ol/render.js';
|
||||
|
||||
const canvas = document.getElementById('canvas');
|
||||
const vectorContext = toContext(canvas.getContext('2d'), {
|
||||
pixelRatio: 1,
|
||||
size: [200, 200]
|
||||
size: [200, 200],
|
||||
});
|
||||
|
||||
vectorContext.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
fill: new Fill({
|
||||
color: 'green'
|
||||
vectorContext.setStyle(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
fill: new Fill({
|
||||
color: 'green',
|
||||
}),
|
||||
radius: 10,
|
||||
}),
|
||||
radius: 10
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorContext.drawGeometry(new Point([100, 100]));
|
||||
|
||||
vectorContext.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
lineCap: 'butt',
|
||||
color: 'red',
|
||||
width: 14
|
||||
vectorContext.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
lineCap: 'butt',
|
||||
color: 'red',
|
||||
width: 14,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
vectorContext.drawGeometry(new LineString([
|
||||
[10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
|
||||
]));
|
||||
);
|
||||
vectorContext.drawGeometry(
|
||||
new LineString([
|
||||
[10, 60],
|
||||
[30, 40],
|
||||
[50, 60],
|
||||
[70, 40],
|
||||
[90, 60],
|
||||
])
|
||||
);
|
||||
|
||||
vectorContext.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
lineJoin: 'bevel',
|
||||
lineCap: 'butt',
|
||||
color: '#111',
|
||||
width: 14
|
||||
vectorContext.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
lineJoin: 'bevel',
|
||||
lineCap: 'butt',
|
||||
color: '#111',
|
||||
width: 14,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
vectorContext.drawGeometry(new LineString([
|
||||
[10, 140], [30, 120], [50, 140], [70, 120], [90, 140]
|
||||
]));
|
||||
);
|
||||
vectorContext.drawGeometry(
|
||||
new LineString([
|
||||
[10, 140],
|
||||
[30, 120],
|
||||
[50, 140],
|
||||
[70, 120],
|
||||
[90, 140],
|
||||
])
|
||||
);
|
||||
|
||||
|
||||
vectorContext.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'blue',
|
||||
width: 6
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(0,0,255,0.5)'
|
||||
vectorContext.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'blue',
|
||||
width: 6,
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(0,0,255,0.5)',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
|
||||
vectorContext.drawGeometry(new Polygon([
|
||||
[[125, 25], [175, 25], [175, 75], [125, 75], [125, 25]],
|
||||
[[140, 40], [140, 60], [160, 60], [160, 40], [140, 40]]
|
||||
]));
|
||||
vectorContext.drawGeometry(
|
||||
new Polygon([
|
||||
[
|
||||
[125, 25],
|
||||
[175, 25],
|
||||
[175, 75],
|
||||
[125, 75],
|
||||
[125, 25],
|
||||
],
|
||||
[
|
||||
[140, 40],
|
||||
[140, 60],
|
||||
[160, 60],
|
||||
[160, 40],
|
||||
[140, 40],
|
||||
],
|
||||
])
|
||||
);
|
||||
|
||||
vectorContext.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
lineDash: [10, 5],
|
||||
lineDashOffset: 5
|
||||
vectorContext.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
lineDash: [10, 5],
|
||||
lineDashOffset: 5,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
|
||||
vectorContext.drawGeometry(new Polygon([
|
||||
[[125, 125], [175, 125], [175, 175], [125, 175], [125, 125]],
|
||||
[[140, 140], [140, 160], [160, 160], [160, 140], [140, 140]]
|
||||
]));
|
||||
vectorContext.drawGeometry(
|
||||
new Polygon([
|
||||
[
|
||||
[125, 125],
|
||||
[175, 125],
|
||||
[175, 175],
|
||||
[125, 175],
|
||||
[125, 125],
|
||||
],
|
||||
[
|
||||
[140, 140],
|
||||
[140, 160],
|
||||
[160, 160],
|
||||
[160, 140],
|
||||
[140, 140],
|
||||
],
|
||||
])
|
||||
);
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,31 +1,30 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Static from '../../../src/ol/source/ImageStatic.js';
|
||||
import {
|
||||
get as getProjection,
|
||||
transformExtent
|
||||
} from '../../../src/ol/proj.js';
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Static from '../../../src/ol/source/ImageStatic.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {get as getProjection, transformExtent} from '../../../src/ol/proj.js';
|
||||
|
||||
const source = new Static({
|
||||
url: '/data/tiles/osm/5/5/12.png',
|
||||
imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
|
||||
projection: getProjection('EPSG:3857')
|
||||
projection: getProjection('EPSG:3857'),
|
||||
});
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
target: 'map',
|
||||
layers: [new ImageLayer({
|
||||
source: source
|
||||
})],
|
||||
layers: [
|
||||
new ImageLayer({
|
||||
source: source,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
center: [-122.416667, 37.783333],
|
||||
zoom: 8,
|
||||
projection: 'EPSG:4326'
|
||||
})
|
||||
projection: 'EPSG:4326',
|
||||
}),
|
||||
});
|
||||
|
||||
render({
|
||||
tolerance: 0.001
|
||||
tolerance: 0.001,
|
||||
});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {toLonLat, get} from '../../../src/ol/proj.js';
|
||||
import {createXYZ, createForProjection} from '../../../src/ol/tilegrid.js';
|
||||
import {createForProjection, createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import {get, toLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const tileGrid = createXYZ();
|
||||
const extent = tileGrid.getTileCoordExtent([5, 5, 12]);
|
||||
@@ -13,24 +13,27 @@ const source = new XYZ({
|
||||
transition: 0,
|
||||
minZoom: 5,
|
||||
maxZoom: 5,
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png'
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
});
|
||||
|
||||
source.setTileGridForProjection(get('EPSG:4326'), createForProjection(get('EPSG:4326'), 7, [64, 64]));
|
||||
source.setTileGridForProjection(
|
||||
get('EPSG:4326'),
|
||||
createForProjection(get('EPSG:4326'), 7, [64, 64])
|
||||
);
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: source
|
||||
})
|
||||
source: source,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: toLonLat(center),
|
||||
zoom: 5
|
||||
})
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import proj4 from 'proj4';
|
||||
import {get, transform} from '../../../src/ol/proj.js';
|
||||
import {register} from '../../../src/ol/proj/proj4.js';
|
||||
import proj4 from 'proj4';
|
||||
|
||||
proj4.defs('EPSG:5070',
|
||||
proj4.defs(
|
||||
'EPSG:5070',
|
||||
'+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 ' +
|
||||
'+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
|
||||
'+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
|
||||
);
|
||||
register(proj4);
|
||||
const proj5070 = get('EPSG:5070');
|
||||
proj5070.setExtent([-6e6, 0, 4e6, 6e6]);
|
||||
@@ -20,7 +22,7 @@ const source = new XYZ({
|
||||
transition: 0,
|
||||
minZoom: 5,
|
||||
maxZoom: 5,
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png'
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -28,14 +30,14 @@ new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: source
|
||||
})
|
||||
source: source,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'EPSG:5070',
|
||||
center: center,
|
||||
zoom: 4
|
||||
})
|
||||
zoom: 4,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import proj4 from 'proj4';
|
||||
import {get, transform} from '../../../src/ol/proj.js';
|
||||
import {register} from '../../../src/ol/proj/proj4.js';
|
||||
import proj4 from 'proj4';
|
||||
|
||||
proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
|
||||
proj4.defs(
|
||||
'ESRI:54009',
|
||||
'+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'
|
||||
);
|
||||
|
||||
register(proj4);
|
||||
const proj54009 = get('ESRI:54009');
|
||||
@@ -19,7 +22,7 @@ const source = new XYZ({
|
||||
transition: 0,
|
||||
minZoom: 5,
|
||||
maxZoom: 5,
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png'
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -27,14 +30,14 @@ new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: source
|
||||
})
|
||||
source: source,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'ESRI:54009',
|
||||
center: center,
|
||||
zoom: 6
|
||||
})
|
||||
zoom: 6,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import proj4 from 'proj4';
|
||||
import {get, transform} from '../../../src/ol/proj.js';
|
||||
import {register} from '../../../src/ol/proj/proj4.js';
|
||||
import proj4 from 'proj4';
|
||||
|
||||
proj4.defs('merc_180', '+proj=merc +lon_0=180 +units=m +no_defs');
|
||||
|
||||
register(proj4);
|
||||
const merc = get('merc_180');
|
||||
merc.setExtent([-20026376.39, -20048966.10, 20026376.39, 20048966.10]);
|
||||
merc.setExtent([-20026376.39, -20048966.1, 20026376.39, 20048966.1]);
|
||||
|
||||
const center4326 = [180, 0];
|
||||
const center = transform(center4326, 'EPSG:4326', 'merc_180');
|
||||
@@ -19,7 +19,7 @@ const source = new XYZ({
|
||||
projection: 'EPSG:4326',
|
||||
minZoom: 0,
|
||||
maxZoom: 0,
|
||||
url: '/data/tiles/4326/{z}/{x}/{y}.png'
|
||||
url: '/data/tiles/4326/{z}/{x}/{y}.png',
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -27,14 +27,14 @@ new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: source
|
||||
})
|
||||
source: source,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'merc_180',
|
||||
center: center,
|
||||
zoom: 0
|
||||
})
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {toLonLat} from '../../../src/ol/proj.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import {toLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const tileGrid = createXYZ();
|
||||
const extent = tileGrid.getTileCoordExtent([5, 5, 12]);
|
||||
@@ -14,11 +14,11 @@ const source = new XYZ({
|
||||
minZoom: 5,
|
||||
maxZoom: 5,
|
||||
imageSmoothing: false,
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png'
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
});
|
||||
|
||||
const layer = new TileLayer({
|
||||
source: source
|
||||
source: source,
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -28,8 +28,8 @@ new Map({
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: toLonLat(center),
|
||||
zoom: 10
|
||||
})
|
||||
zoom: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,23 +1,20 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {toLonLat} from '../../../src/ol/proj.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
import {toLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const tileGrid = createXYZ({tileSize: [512, 256]});
|
||||
const extent = tileGrid.getTileCoordExtent([5, 3, 12]);
|
||||
const center = [
|
||||
(extent[0] + extent[2]) / 2,
|
||||
(extent[1] + extent[3]) / 2
|
||||
];
|
||||
const center = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
|
||||
|
||||
const source = new XYZ({
|
||||
projection: 'EPSG:3857',
|
||||
minZoom: 5,
|
||||
maxZoom: 5,
|
||||
url: '/data/tiles/512x256/{z}/{x}/{y}.png',
|
||||
tileSize: [512, 256]
|
||||
tileSize: [512, 256],
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -25,14 +22,14 @@ new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: source
|
||||
})
|
||||
source: source,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: toLonLat(center),
|
||||
zoom: 5
|
||||
})
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import proj4 from 'proj4';
|
||||
import {get, transform} from '../../../src/ol/proj.js';
|
||||
import {register} from '../../../src/ol/proj/proj4.js';
|
||||
import proj4 from 'proj4';
|
||||
|
||||
proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' +
|
||||
'+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
|
||||
proj4.defs(
|
||||
'EPSG:3413',
|
||||
'+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' +
|
||||
'+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'
|
||||
);
|
||||
|
||||
register(proj4);
|
||||
const proj3413 = get('EPSG:3413');
|
||||
@@ -19,7 +22,7 @@ const center = transform(center4326, 'EPSG:4326', 'EPSG:3413');
|
||||
const source = new XYZ({
|
||||
maxZoom: 0,
|
||||
projection: 'EPSG:4326',
|
||||
url: '/data/tiles/4326/{z}/{x}/{y}.png'
|
||||
url: '/data/tiles/4326/{z}/{x}/{y}.png',
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -27,14 +30,14 @@ new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: source
|
||||
})
|
||||
source: source,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
projection: 'EPSG:3413',
|
||||
center: center,
|
||||
zoom: 0
|
||||
})
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import {
|
||||
Tile as TileLayer,
|
||||
Vector as VectorLayer,
|
||||
} from '../../../src/ol/layer.js';
|
||||
import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
|
||||
import {fromLonLat} from '../../../src/ol/proj.js';
|
||||
|
||||
const center = fromLonLat([-111, 45.7]);
|
||||
@@ -12,25 +15,21 @@ new Map({
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature(
|
||||
new Point(center)
|
||||
)
|
||||
]
|
||||
})
|
||||
})
|
||||
features: [new Feature(new Point(center))],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 3,
|
||||
rotation: Math.PI / 4
|
||||
})
|
||||
rotation: Math.PI / 4,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
|
||||
new Map({
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
|
||||
})
|
||||
})
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
}),
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
render({message: 'A single layer with a XZY source'});
|
||||
|
||||
@@ -1,22 +1,24 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import ImageLayer from '../../../src/ol/layer/Image.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import RasterSource from '../../../src/ol/source/Raster.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
|
||||
const raster = new RasterSource({
|
||||
sources: [new XYZ({
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
transition: 0
|
||||
})],
|
||||
sources: [
|
||||
new XYZ({
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
transition: 0,
|
||||
}),
|
||||
],
|
||||
threads: 0, // Avoid using workers to work with puppeteer
|
||||
operation: function(pixels) {
|
||||
operation: function (pixels) {
|
||||
const pixel = pixels[0];
|
||||
const red = pixel[0];
|
||||
pixel[0] = pixel[2];
|
||||
pixel[2] = red;
|
||||
return pixel;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -24,9 +26,8 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import TileWMS from '../../../src/ol/source/TileWMS.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const tileWms = new TileWMS({
|
||||
params: {
|
||||
'LAYERS': 'layer'
|
||||
'LAYERS': 'layer',
|
||||
},
|
||||
gutter: 0,
|
||||
url: '/data/tiles/wms/wms0.png',
|
||||
transition: 0
|
||||
transition: 0,
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -18,9 +18,8 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 5
|
||||
})
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import TileWMS from '../../../src/ol/source/TileWMS.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const tileWms = new TileWMS({
|
||||
params: {
|
||||
'LAYERS': 'layer'
|
||||
'LAYERS': 'layer',
|
||||
},
|
||||
gutter: 20,
|
||||
url: '/data/tiles/wms/wms20.png',
|
||||
transition: 0
|
||||
transition: 0,
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -18,9 +18,8 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 5
|
||||
})
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
* above layers.
|
||||
*/
|
||||
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Layer from '../../../src/ol/layer/Layer.js';
|
||||
import Control from '../../../src/ol/control/Control.js';
|
||||
import Layer from '../../../src/ol/layer/Layer.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import SourceState from '../../../src/ol/source/State.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
class Element extends Layer {
|
||||
constructor(options, style) {
|
||||
@@ -50,33 +50,39 @@ style2.zIndex = '-1';
|
||||
new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new Element({
|
||||
zIndex: 200
|
||||
}, {
|
||||
background: 'red',
|
||||
width: '50%',
|
||||
height: '100%'
|
||||
}),
|
||||
new Element({
|
||||
zIndex: -200
|
||||
}, {
|
||||
background: 'green',
|
||||
width: '100%',
|
||||
height: '50%'
|
||||
})
|
||||
new Element(
|
||||
{
|
||||
zIndex: 200,
|
||||
},
|
||||
{
|
||||
background: 'red',
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
}
|
||||
),
|
||||
new Element(
|
||||
{
|
||||
zIndex: -200,
|
||||
},
|
||||
{
|
||||
background: 'green',
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
}
|
||||
),
|
||||
],
|
||||
controls: [
|
||||
new Control({
|
||||
element: element1
|
||||
element: element1,
|
||||
}),
|
||||
new Control({
|
||||
element: element2
|
||||
})
|
||||
element: element2,
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,133 +1,178 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
|
||||
const nicePath = [
|
||||
20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
|
||||
180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
|
||||
20,
|
||||
33,
|
||||
40,
|
||||
31,
|
||||
60,
|
||||
30,
|
||||
80,
|
||||
31,
|
||||
100,
|
||||
33,
|
||||
120,
|
||||
37,
|
||||
140,
|
||||
39,
|
||||
160,
|
||||
40,
|
||||
180,
|
||||
39,
|
||||
200,
|
||||
37,
|
||||
220,
|
||||
33,
|
||||
240,
|
||||
31,
|
||||
260,
|
||||
30,
|
||||
280,
|
||||
31,
|
||||
300,
|
||||
33,
|
||||
];
|
||||
|
||||
const lineString1 = new LineString(nicePath, 'XY');
|
||||
const feature1 = new Feature({geometry: lineString1});
|
||||
feature1.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line'
|
||||
feature1.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature1);
|
||||
|
||||
const lineString2 = lineString1.clone();
|
||||
lineString2.translate(0, 30);
|
||||
const feature2 = new Feature({geometry: lineString2});
|
||||
feature2.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Scale 2',
|
||||
font: 'normal 400 12px/1 Ubuntu',
|
||||
scale: 2,
|
||||
textBaseline: 'bottom',
|
||||
textAlign: 'right',
|
||||
placement: 'line'
|
||||
feature2.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Scale 2',
|
||||
font: 'normal 400 12px/1 Ubuntu',
|
||||
scale: 2,
|
||||
textBaseline: 'bottom',
|
||||
textAlign: 'right',
|
||||
placement: 'line',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature2);
|
||||
|
||||
const lineString3 = lineString2.clone();
|
||||
lineString3.translate(0, 30);
|
||||
const feature3 = new Feature({geometry: lineString3});
|
||||
feature3.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
font: 'italic bold 0.75em Ubuntu',
|
||||
text: 'Set properties'
|
||||
feature3.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
font: 'italic bold 0.75em Ubuntu',
|
||||
text: 'Set properties',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
feature3.getStyle().getText().setTextAlign('left');
|
||||
feature3.getStyle().getText().setOffsetX(10);
|
||||
feature3.getStyle().getText().setOffsetY(-10);
|
||||
feature3.getStyle().getText().setPlacement('line');
|
||||
feature3.getStyle().getText().setScale(1.1);
|
||||
feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
|
||||
feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
|
||||
feature3
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setStroke(new Stroke({color: '#00F7F8'}));
|
||||
feature3
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setFill(new Fill({color: '#006772'}));
|
||||
|
||||
vectorSource.addFeature(feature3);
|
||||
|
||||
const lineString4 = lineString3.clone();
|
||||
lineString4.translate(0, 30);
|
||||
const feature4 = new Feature({geometry: lineString4});
|
||||
feature4.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'negative offsetX',
|
||||
font: 'normal 400 10px/1 Ubuntu',
|
||||
offsetX: -10,
|
||||
textAlign: 'start',
|
||||
textBaseline: 'top',
|
||||
placement: 'line'
|
||||
feature4.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'negative offsetX',
|
||||
font: 'normal 400 10px/1 Ubuntu',
|
||||
offsetX: -10,
|
||||
textAlign: 'start',
|
||||
textBaseline: 'top',
|
||||
placement: 'line',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature4);
|
||||
|
||||
const lineString5 = lineString4.clone();
|
||||
lineString5.translate(0, 30);
|
||||
const feature5 = new Feature({geometry: lineString5});
|
||||
feature5.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Small text',
|
||||
font: '10px Ubuntu',
|
||||
offsetY: 5,
|
||||
scale: 0.7,
|
||||
textAlign: 'end',
|
||||
placement: 'line'
|
||||
feature5.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Small text',
|
||||
font: '10px Ubuntu',
|
||||
offsetY: 5,
|
||||
scale: 0.7,
|
||||
textAlign: 'end',
|
||||
placement: 'line',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature5);
|
||||
|
||||
const lineString6 = lineString5.clone();
|
||||
lineString6.translate(0, 30);
|
||||
const feature6 = new Feature({geometry: lineString6});
|
||||
feature6.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'FILL AND STROKE',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line',
|
||||
fill: new Fill({color: '#FFC0CB'}),
|
||||
stroke: new Stroke({
|
||||
color: '#00FF00',
|
||||
width: 1
|
||||
})
|
||||
feature6.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'FILL AND STROKE',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line',
|
||||
fill: new Fill({color: '#FFC0CB'}),
|
||||
stroke: new Stroke({
|
||||
color: '#00FF00',
|
||||
width: 1,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature6);
|
||||
|
||||
const map = new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1,
|
||||
rotation: Math.PI / 4
|
||||
})
|
||||
rotation: Math.PI / 4,
|
||||
}),
|
||||
});
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
|
||||
@@ -16,51 +15,63 @@ const uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
|
||||
|
||||
const lineString1 = new LineString(uglyPath, 'XY');
|
||||
const feature1 = new Feature({geometry: lineString1});
|
||||
feature1.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line',
|
||||
overflow: true
|
||||
feature1.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Hello world',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line',
|
||||
overflow: true,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature1);
|
||||
|
||||
const lineString2 = lineString1.clone();
|
||||
lineString2.translate(0, 30);
|
||||
const feature2 = new Feature({geometry: lineString2});
|
||||
feature2.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'red'}),
|
||||
text: new Text({
|
||||
text: 'Scale 2',
|
||||
scale: 2,
|
||||
textBaseline: 'bottom',
|
||||
textAlign: 'right',
|
||||
placement: 'line',
|
||||
font: 'italic bold 0.5em Ubuntu',
|
||||
overflow: true
|
||||
feature2.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'red'}),
|
||||
text: new Text({
|
||||
text: 'Scale 2',
|
||||
scale: 2,
|
||||
textBaseline: 'bottom',
|
||||
textAlign: 'right',
|
||||
placement: 'line',
|
||||
font: 'italic bold 0.5em Ubuntu',
|
||||
overflow: true,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature2);
|
||||
|
||||
const lineString3 = lineString2.clone();
|
||||
lineString3.translate(0, 30);
|
||||
const feature3 = new Feature({geometry: lineString3});
|
||||
feature3.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Set properties'
|
||||
feature3.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Set properties',
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
feature3.getStyle().getText().setTextAlign('left');
|
||||
feature3.getStyle().getText().setOffsetX(10);
|
||||
feature3.getStyle().getText().setOffsetY(-10);
|
||||
feature3.getStyle().getText().setOverflow(true);
|
||||
feature3.getStyle().getText().setPlacement('line');
|
||||
feature3.getStyle().getText().setScale(1.2);
|
||||
feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
|
||||
feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
|
||||
feature3
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setStroke(new Stroke({color: '#00F7F8'}));
|
||||
feature3
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setFill(new Fill({color: '#006772'}));
|
||||
feature3.getStyle().getText().setMaxAngle(Math.PI);
|
||||
|
||||
vectorSource.addFeature(feature3);
|
||||
@@ -68,70 +79,76 @@ vectorSource.addFeature(feature3);
|
||||
const lineString4 = lineString3.clone();
|
||||
lineString4.translate(0, 30);
|
||||
const feature4 = new Feature({geometry: lineString4});
|
||||
feature4.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'red'}),
|
||||
text: new Text({
|
||||
text: 'PLEASE OMIT ME IM UGLY',
|
||||
font: '10px Ubuntu',
|
||||
offsetX: -10,
|
||||
textAlign: 'start',
|
||||
textBaseline: 'top',
|
||||
placement: 'line',
|
||||
overflow: true
|
||||
feature4.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'red'}),
|
||||
text: new Text({
|
||||
text: 'PLEASE OMIT ME IM UGLY',
|
||||
font: '10px Ubuntu',
|
||||
offsetX: -10,
|
||||
textAlign: 'start',
|
||||
textBaseline: 'top',
|
||||
placement: 'line',
|
||||
overflow: true,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature4);
|
||||
|
||||
const lineString5 = lineString4.clone();
|
||||
lineString5.translate(0, 30);
|
||||
const feature5 = new Feature({geometry: lineString5});
|
||||
feature5.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Small text',
|
||||
font: '10px Ubuntu',
|
||||
offsetY: 5,
|
||||
scale: 0.7,
|
||||
rotation: 4,
|
||||
textAlign: 'end',
|
||||
placement: 'line',
|
||||
maxAngle: Math.PI,
|
||||
overflow: true
|
||||
feature5.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'Small text',
|
||||
font: '10px Ubuntu',
|
||||
offsetY: 5,
|
||||
scale: 0.7,
|
||||
rotation: 4,
|
||||
textAlign: 'end',
|
||||
placement: 'line',
|
||||
maxAngle: Math.PI,
|
||||
overflow: true,
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature5);
|
||||
|
||||
const lineString6 = lineString5.clone();
|
||||
lineString6.translate(0, 30);
|
||||
const feature6 = new Feature({geometry: lineString6});
|
||||
feature6.setStyle(new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'FILL AND STROKE',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line',
|
||||
overflow: true,
|
||||
fill: new Fill({color: '#FFC0CB'}),
|
||||
stroke: new Stroke({
|
||||
color: '#00FF00'
|
||||
})
|
||||
feature6.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
text: new Text({
|
||||
text: 'FILL AND STROKE',
|
||||
font: '10px Ubuntu',
|
||||
placement: 'line',
|
||||
overflow: true,
|
||||
fill: new Fill({color: '#FFC0CB'}),
|
||||
stroke: new Stroke({
|
||||
color: '#00FF00',
|
||||
}),
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature6);
|
||||
|
||||
const map = new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1,
|
||||
rotation: -(Math.PI / 4)
|
||||
})
|
||||
rotation: -(Math.PI / 4),
|
||||
}),
|
||||
});
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
|
||||
|
||||
@@ -1,18 +1,46 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const nicePath = [
|
||||
20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
|
||||
180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
|
||||
20,
|
||||
33,
|
||||
40,
|
||||
31,
|
||||
60,
|
||||
30,
|
||||
80,
|
||||
31,
|
||||
100,
|
||||
33,
|
||||
120,
|
||||
37,
|
||||
140,
|
||||
39,
|
||||
160,
|
||||
40,
|
||||
180,
|
||||
39,
|
||||
200,
|
||||
37,
|
||||
220,
|
||||
33,
|
||||
240,
|
||||
31,
|
||||
260,
|
||||
30,
|
||||
280,
|
||||
31,
|
||||
300,
|
||||
33,
|
||||
];
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
@@ -21,12 +49,12 @@ const pointStyle = new Style({
|
||||
text: 'Point Label',
|
||||
font: 'Ubuntu',
|
||||
fill: new Fill({
|
||||
color: 'red'
|
||||
color: 'red',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: 'black'
|
||||
})
|
||||
})
|
||||
color: 'black',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
const lineStyle = new Style({
|
||||
stroke: new Stroke({color: 'blue'}),
|
||||
@@ -34,36 +62,42 @@ const lineStyle = new Style({
|
||||
text: 'Line Label',
|
||||
font: 'Ubuntu',
|
||||
fill: new Fill({
|
||||
color: 'red'
|
||||
color: 'red',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: 'black'
|
||||
color: 'black',
|
||||
}),
|
||||
placement: 'line'
|
||||
})
|
||||
placement: 'line',
|
||||
}),
|
||||
});
|
||||
|
||||
const pointFeature1 = new Feature({
|
||||
geometry: new Point([160, 100])
|
||||
geometry: new Point([160, 100]),
|
||||
});
|
||||
pointFeature1.setStyle(pointStyle.clone());
|
||||
pointFeature1.getStyle().getText().setText('POINT ONE');
|
||||
vectorSource.addFeature(pointFeature1);
|
||||
|
||||
const pointFeature2 = new Feature({
|
||||
geometry: new Point([170, 105])
|
||||
geometry: new Point([170, 105]),
|
||||
});
|
||||
pointFeature2.setStyle(pointStyle.clone());
|
||||
pointFeature2.getStyle().getText().setText('POINT TWO');
|
||||
pointFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
|
||||
pointFeature2
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setFill(new Fill({color: 'green'}));
|
||||
vectorSource.addFeature(pointFeature2);
|
||||
|
||||
const pointFeature3 = new Feature({
|
||||
geometry: new Point([150, 95])
|
||||
geometry: new Point([150, 95]),
|
||||
});
|
||||
pointFeature3.setStyle(pointStyle.clone());
|
||||
pointFeature3.getStyle().getText().setText('POINT THREE');
|
||||
pointFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
|
||||
pointFeature3
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setFill(new Fill({color: 'yellow'}));
|
||||
vectorSource.addFeature(pointFeature3);
|
||||
|
||||
const lineString1 = new LineString(nicePath, 'XY');
|
||||
@@ -77,7 +111,10 @@ lineString2.translate(10, 10);
|
||||
const lineFeature2 = new Feature({geometry: lineString2});
|
||||
lineFeature2.setStyle(lineStyle.clone());
|
||||
lineFeature2.getStyle().getText().setText('LINE TWO');
|
||||
lineFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
|
||||
lineFeature2
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setFill(new Fill({color: 'green'}));
|
||||
vectorSource.addFeature(lineFeature2);
|
||||
|
||||
const lineString3 = lineString1.clone();
|
||||
@@ -85,21 +122,24 @@ lineString3.translate(-10, 10);
|
||||
const lineFeature3 = new Feature({geometry: lineString3});
|
||||
lineFeature3.setStyle(lineStyle.clone());
|
||||
lineFeature3.getStyle().getText().setText('LINE THREE');
|
||||
lineFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
|
||||
lineFeature3
|
||||
.getStyle()
|
||||
.getText()
|
||||
.setFill(new Fill({color: 'yellow'}));
|
||||
vectorSource.addFeature(lineFeature3);
|
||||
|
||||
const map = new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
map.getView().fit(vectorSource.getExtent());
|
||||
|
||||
|
||||
@@ -1,140 +1,150 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Point from '../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Text from '../../../src/ol/style/Text.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Fill from '../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSource = new VectorSource();
|
||||
let feature;
|
||||
|
||||
// scale
|
||||
feature = new Feature({
|
||||
geometry: new Point([-50, 50])
|
||||
geometry: new Point([-50, 50]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'hello',
|
||||
font: '12px Ubuntu',
|
||||
scale: 2,
|
||||
fill: new Fill({
|
||||
color: 'red'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
text: new Text({
|
||||
text: 'hello',
|
||||
font: '12px Ubuntu',
|
||||
scale: 2,
|
||||
fill: new Fill({
|
||||
color: 'red',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000',
|
||||
}),
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#000'
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// rotate
|
||||
feature = new Feature({
|
||||
geometry: new Point([50, -50])
|
||||
geometry: new Point([50, -50]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'upside down',
|
||||
font: '12px Ubuntu',
|
||||
rotation: Math.PI,
|
||||
stroke: new Stroke({
|
||||
color: 'red',
|
||||
width: 2
|
||||
})
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
text: new Text({
|
||||
text: 'upside down',
|
||||
font: '12px Ubuntu',
|
||||
rotation: Math.PI,
|
||||
stroke: new Stroke({
|
||||
color: 'red',
|
||||
width: 2,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// rotate with view
|
||||
feature = new Feature({
|
||||
geometry: new Point([50, 50])
|
||||
geometry: new Point([50, 50]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
font: 'Ubuntu',
|
||||
text: 'rotateWithView',
|
||||
rotateWithView: true,
|
||||
stroke: new Stroke({
|
||||
color: [10, 10, 10, 0.5]
|
||||
})
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
text: new Text({
|
||||
font: 'Ubuntu',
|
||||
text: 'rotateWithView',
|
||||
rotateWithView: true,
|
||||
stroke: new Stroke({
|
||||
color: [10, 10, 10, 0.5],
|
||||
}),
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// align left
|
||||
feature = new Feature({
|
||||
geometry: new Point([50, 50])
|
||||
geometry: new Point([50, 50]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
font: 'Ubuntu',
|
||||
text: 'align left',
|
||||
textAlign: 'left',
|
||||
stroke: new Stroke({
|
||||
color: [10, 10, 10, 0.5]
|
||||
})
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
text: new Text({
|
||||
font: 'Ubuntu',
|
||||
text: 'align left',
|
||||
textAlign: 'left',
|
||||
stroke: new Stroke({
|
||||
color: [10, 10, 10, 0.5],
|
||||
}),
|
||||
}),
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// background and padding
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10, 0])
|
||||
geometry: new Point([-10, 0]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'hello',
|
||||
font: '12px Ubuntu',
|
||||
padding: [1, 2, 3, 5],
|
||||
backgroundFill: new Fill({
|
||||
color: 'rgba(55, 55, 55, 0.25)'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
text: new Text({
|
||||
text: 'hello',
|
||||
font: '12px Ubuntu',
|
||||
padding: [1, 2, 3, 5],
|
||||
backgroundFill: new Fill({
|
||||
color: 'rgba(55, 55, 55, 0.25)',
|
||||
}),
|
||||
backgroundStroke: new Stroke({
|
||||
color: '#000',
|
||||
width: 1,
|
||||
}),
|
||||
}),
|
||||
backgroundStroke: new Stroke({
|
||||
color: '#000',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
// background and padding
|
||||
feature = new Feature({
|
||||
geometry: new Point([-10, 0])
|
||||
geometry: new Point([-10, 0]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
text: new Text({
|
||||
text: 'hello',
|
||||
font: '12px Ubuntu',
|
||||
padding: [1, 2, 3, 5],
|
||||
backgroundFill: new Fill({
|
||||
color: 'rgba(55, 55, 55, 0.25)'
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
text: new Text({
|
||||
text: 'hello',
|
||||
font: '12px Ubuntu',
|
||||
padding: [1, 2, 3, 5],
|
||||
backgroundFill: new Fill({
|
||||
color: 'rgba(55, 55, 55, 0.25)',
|
||||
}),
|
||||
backgroundStroke: new Stroke({
|
||||
color: '#000',
|
||||
width: 1,
|
||||
}),
|
||||
}),
|
||||
backgroundStroke: new Stroke({
|
||||
color: '#000',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
}));
|
||||
);
|
||||
vectorSource.addFeature(feature);
|
||||
|
||||
|
||||
new Map({
|
||||
pixelRatio: 1,
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
source: vectorSource
|
||||
})
|
||||
source: vectorSource,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1,
|
||||
rotation: Math.PI / 4
|
||||
})
|
||||
rotation: Math.PI / 4,
|
||||
}),
|
||||
});
|
||||
|
||||
render({tolerance: 0.02});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import {createXYZ} from '../../../src/ol/tilegrid.js';
|
||||
|
||||
const tileGrid = createXYZ();
|
||||
@@ -13,11 +13,11 @@ const source = new XYZ({
|
||||
minZoom: 5,
|
||||
maxZoom: 5,
|
||||
imageSmoothing: false,
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png'
|
||||
url: '/data/tiles/osm/{z}/{x}/{y}.png',
|
||||
});
|
||||
|
||||
const layer = new TileLayer({
|
||||
source: source
|
||||
source: source,
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -26,8 +26,8 @@ new Map({
|
||||
layers: [layer],
|
||||
view: new View({
|
||||
center: center,
|
||||
zoom: 10
|
||||
})
|
||||
zoom: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,32 +1,40 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Feature from '../../../src/ol/Feature.js';
|
||||
import LineString from '../../../src/ol/geom/LineString.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import VectorLayer from '../../../src/ol/layer/Vector.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import Style from '../../../src/ol/style/Style.js';
|
||||
import Stroke from '../../../src/ol/style/Stroke.js';
|
||||
|
||||
import View from '../../../src/ol/View.js';
|
||||
|
||||
const vectorSourceRed = new VectorSource();
|
||||
const vectorSourceBlue = new VectorSource();
|
||||
let feature;
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[-60, 20], [45, 20]])
|
||||
geometry: new LineString([
|
||||
[-60, 20],
|
||||
[45, 20],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 10})
|
||||
}));
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#f00', width: 10}),
|
||||
})
|
||||
);
|
||||
vectorSourceRed.addFeature(feature);
|
||||
|
||||
|
||||
feature = new Feature({
|
||||
geometry: new LineString([[0, -50], [0, 60]])
|
||||
geometry: new LineString([
|
||||
[0, -50],
|
||||
[0, 60],
|
||||
]),
|
||||
});
|
||||
feature.setStyle(new Style({
|
||||
stroke: new Stroke({color: '#00f', width: 16})
|
||||
}));
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({color: '#00f', width: 16}),
|
||||
})
|
||||
);
|
||||
vectorSourceBlue.addFeature(feature);
|
||||
|
||||
new Map({
|
||||
@@ -34,17 +42,17 @@ new Map({
|
||||
layers: [
|
||||
new VectorLayer({
|
||||
zIndex: 1,
|
||||
source: vectorSourceRed
|
||||
source: vectorSourceRed,
|
||||
}),
|
||||
new VectorLayer({
|
||||
source: vectorSourceBlue
|
||||
})
|
||||
source: vectorSourceBlue,
|
||||
}),
|
||||
],
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolution: 1
|
||||
})
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import KML from '../../../src/ol/format/KML.js';
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import VectorSource from '../../../src/ol/source/Vector.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import WebGLPointsLayer from '../../../src/ol/layer/WebGLPoints.js';
|
||||
import XYZ from '../../../src/ol/source/XYZ.js';
|
||||
|
||||
const vector = new WebGLPointsLayer({
|
||||
source: new VectorSource({
|
||||
url: '/data/2012_Earthquakes_Mag5.kml',
|
||||
format: new KML({
|
||||
extractStyles: false
|
||||
})
|
||||
extractStyles: false,
|
||||
}),
|
||||
}),
|
||||
style: {
|
||||
symbol: {
|
||||
symbolType: 'square',
|
||||
size: 4,
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const raster = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
|
||||
transition: 0
|
||||
})
|
||||
transition: 0,
|
||||
}),
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -34,10 +34,10 @@ new Map({
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [15180597.9736, 2700366.3807],
|
||||
zoom: 2
|
||||
})
|
||||
zoom: 2,
|
||||
}),
|
||||
});
|
||||
|
||||
render({
|
||||
message: 'Points are rendered using webgl as 4px pixel squares'
|
||||
message: 'Points are rendered using webgl as 4px pixel squares',
|
||||
});
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Zoomify from '../../../src/ol/source/Zoomify.js';
|
||||
|
||||
const layer = new TileLayer({
|
||||
source: new Zoomify({
|
||||
url: '/data/tiles/zoomify/',
|
||||
size: [200, 200],
|
||||
tileSize: 100
|
||||
})
|
||||
tileSize: 100,
|
||||
}),
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -17,8 +17,8 @@ new Map({
|
||||
view: new View({
|
||||
resolutions: [2, 1],
|
||||
center: [100, -100],
|
||||
zoom: 0.4
|
||||
})
|
||||
zoom: 0.4,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Map from '../../../src/ol/Map.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import TileLayer from '../../../src/ol/layer/Tile.js';
|
||||
import View from '../../../src/ol/View.js';
|
||||
import Zoomify from '../../../src/ol/source/Zoomify.js';
|
||||
|
||||
const layer = new TileLayer({
|
||||
@@ -8,8 +8,8 @@ const layer = new TileLayer({
|
||||
url: '/data/tiles/zoomify/',
|
||||
size: [200, 200],
|
||||
tileSize: 100,
|
||||
zDirection: -1
|
||||
})
|
||||
zDirection: -1,
|
||||
}),
|
||||
});
|
||||
|
||||
new Map({
|
||||
@@ -18,8 +18,8 @@ new Map({
|
||||
view: new View({
|
||||
resolutions: [2, 1],
|
||||
center: [100, -100],
|
||||
zoom: 0.4
|
||||
})
|
||||
zoom: 0.4,
|
||||
}),
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
@@ -35,7 +35,7 @@ function indexHandler(req, res) {
|
||||
const markup = `<!DOCTYPE html><body><ul>${items.join('')}</ul></body>`;
|
||||
|
||||
res.writeHead(404, {
|
||||
'Content-Type': 'text/html'
|
||||
'Content-Type': 'text/html',
|
||||
});
|
||||
res.end(markup);
|
||||
}
|
||||
@@ -58,7 +58,7 @@ function serve(options) {
|
||||
const webpackHandler = webpackMiddleware(compiler, {
|
||||
lazy: true,
|
||||
logger: options.log,
|
||||
stats: 'minimal'
|
||||
stats: 'minimal',
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
@@ -78,12 +78,14 @@ function serve(options) {
|
||||
staticHandler(req, res, notFound(req, res));
|
||||
});
|
||||
|
||||
server.listen(options.port, options.host, err => {
|
||||
server.listen(options.port, options.host, (err) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
const address = server.address();
|
||||
options.log.info(`test server listening http://${address.address}:${address.port}/`);
|
||||
options.log.info(
|
||||
`test server listening http://${address.address}:${address.port}/`
|
||||
);
|
||||
resolve(() => server.close());
|
||||
});
|
||||
});
|
||||
@@ -104,7 +106,7 @@ function getPassFilePath(entry) {
|
||||
function parsePNG(filepath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const stream = fs.createReadStream(filepath);
|
||||
stream.on('error', err => {
|
||||
stream.on('error', (err) => {
|
||||
if (err.code === 'ENOENT') {
|
||||
return reject(new Error(`File not found: ${filepath}`));
|
||||
}
|
||||
@@ -123,12 +125,22 @@ async function match(actual, expected) {
|
||||
const width = expectedImage.width;
|
||||
const height = expectedImage.height;
|
||||
if (actualImage.width != width) {
|
||||
throw new Error(`Unexpected width for ${actual}: expected ${width}, got ${actualImage.width}`);
|
||||
throw new Error(
|
||||
`Unexpected width for ${actual}: expected ${width}, got ${actualImage.width}`
|
||||
);
|
||||
}
|
||||
if (actualImage.height != height) {
|
||||
throw new Error(`Unexpected height for ${actual}: expected ${height}, got ${actualImage.height}`);
|
||||
throw new Error(
|
||||
`Unexpected height for ${actual}: expected ${height}, got ${actualImage.height}`
|
||||
);
|
||||
}
|
||||
const count = pixelmatch(actualImage.data, expectedImage.data, null, width, height);
|
||||
const count = pixelmatch(
|
||||
actualImage.data,
|
||||
expectedImage.data,
|
||||
null,
|
||||
width,
|
||||
height
|
||||
);
|
||||
return count / (width * height);
|
||||
}
|
||||
|
||||
@@ -155,14 +167,16 @@ async function exposeRender(page) {
|
||||
}
|
||||
|
||||
async function renderPage(page, entry, options) {
|
||||
const renderCalled = new Promise(resolve => {
|
||||
const renderCalled = new Promise((resolve) => {
|
||||
handleRender = (config) => {
|
||||
handleRender = null;
|
||||
resolve(config || {});
|
||||
};
|
||||
});
|
||||
options.log.debug('navigating', entry);
|
||||
await page.goto(`http://${options.host}:${options.port}${getHref(entry)}`, {waitUntil: 'networkidle0'});
|
||||
await page.goto(`http://${options.host}:${options.port}${getHref(entry)}`, {
|
||||
waitUntil: 'networkidle0',
|
||||
});
|
||||
const config = await renderCalled;
|
||||
options.log.debug('screenshot', entry);
|
||||
await page.screenshot({path: getActualScreenshotPath(entry)});
|
||||
@@ -184,7 +198,11 @@ async function copyActualToExpected(entry) {
|
||||
async function renderEach(page, entries, options) {
|
||||
let fail = false;
|
||||
for (const entry of entries) {
|
||||
const {tolerance = 0.005, message = ''} = await renderPage(page, entry, options);
|
||||
const {tolerance = 0.005, message = ''} = await renderPage(
|
||||
page,
|
||||
entry,
|
||||
options
|
||||
);
|
||||
|
||||
if (options.fix) {
|
||||
await copyActualToExpected(entry);
|
||||
@@ -217,20 +235,20 @@ async function renderEach(page, entries, options) {
|
||||
async function render(entries, options) {
|
||||
const browser = await puppeteer.launch({
|
||||
args: options.puppeteerArgs,
|
||||
headless: options.headless
|
||||
headless: options.headless,
|
||||
});
|
||||
|
||||
let fail = false;
|
||||
|
||||
try {
|
||||
const page = await browser.newPage();
|
||||
page.on('error', err => {
|
||||
page.on('error', (err) => {
|
||||
options.log.error('page crash', err);
|
||||
});
|
||||
page.on('pageerror', err => {
|
||||
page.on('pageerror', (err) => {
|
||||
options.log.error('uncaught exception', err);
|
||||
});
|
||||
page.on('console', message => {
|
||||
page.on('console', (message) => {
|
||||
const type = message.type();
|
||||
if (options.log[type]) {
|
||||
options.log[type](message.text());
|
||||
@@ -262,7 +280,9 @@ async function getLatest(patterns) {
|
||||
}
|
||||
|
||||
async function getOutdated(entries, options) {
|
||||
const libTime = await getLatest(path.join(__dirname, '..', 'src', 'ol', '**', '*'));
|
||||
const libTime = await getLatest(
|
||||
path.join(__dirname, '..', 'src', 'ol', '**', '*')
|
||||
);
|
||||
options.log.debug('library time', libTime);
|
||||
const outdated = [];
|
||||
for (const entry of entries) {
|
||||
@@ -274,7 +294,9 @@ async function getOutdated(entries, options) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const caseTime = await getLatest(path.join(__dirname, path.dirname(entry), '**', '*'));
|
||||
const caseTime = await getLatest(
|
||||
path.join(__dirname, path.dirname(entry), '**', '*')
|
||||
);
|
||||
options.log.debug('case time', entry, caseTime);
|
||||
if (passTime < caseTime) {
|
||||
outdated.push(entry);
|
||||
@@ -292,7 +314,7 @@ async function main(entries, options) {
|
||||
}
|
||||
if (options.match) {
|
||||
const exp = new RegExp(options.match);
|
||||
entries = entries.filter(entry => exp.test(entry));
|
||||
entries = entries.filter((entry) => exp.test(entry));
|
||||
}
|
||||
if (!options.interactive && entries.length === 0) {
|
||||
return;
|
||||
@@ -309,63 +331,69 @@ async function main(entries, options) {
|
||||
}
|
||||
|
||||
if (require.main === module) {
|
||||
|
||||
const options = yargs.
|
||||
option('fix', {
|
||||
const options = yargs
|
||||
.option('fix', {
|
||||
describe: 'Accept all screenshots as accepted',
|
||||
type: 'boolean',
|
||||
default: false
|
||||
}).
|
||||
option('host', {
|
||||
default: false,
|
||||
})
|
||||
.option('host', {
|
||||
describe: 'The host for serving rendering cases',
|
||||
default: '127.0.0.1'
|
||||
}).
|
||||
option('port', {
|
||||
default: '127.0.0.1',
|
||||
})
|
||||
.option('port', {
|
||||
describe: 'The port for serving rendering cases',
|
||||
type: 'number',
|
||||
default: 3000
|
||||
}).
|
||||
option('match', {
|
||||
default: 3000,
|
||||
})
|
||||
.option('match', {
|
||||
describe: 'Only run tests matching the provided string RegExp pattern',
|
||||
type: 'string'
|
||||
}).
|
||||
option('force', {
|
||||
type: 'string',
|
||||
})
|
||||
.option('force', {
|
||||
describe: 'Run all tests (instead of just outdated tests)',
|
||||
type: 'boolean',
|
||||
default: false
|
||||
}).
|
||||
option('interactive', {
|
||||
describe: 'Run all tests and keep the test server running (this option will be reworked later)',
|
||||
default: false,
|
||||
})
|
||||
.option('interactive', {
|
||||
describe:
|
||||
'Run all tests and keep the test server running (this option will be reworked later)',
|
||||
type: 'boolean',
|
||||
default: false
|
||||
}).
|
||||
option('log-level', {
|
||||
default: false,
|
||||
})
|
||||
.option('log-level', {
|
||||
describe: 'The level for logging',
|
||||
choices: ['trace', 'debug', 'info', 'warn', 'error', 'silent'],
|
||||
default: 'error'
|
||||
}).
|
||||
option('timeout', {
|
||||
default: 'error',
|
||||
})
|
||||
.option('timeout', {
|
||||
describe: 'The timeout for loading pages (in milliseconds)',
|
||||
type: 'number',
|
||||
default: 60000
|
||||
}).
|
||||
option('headless', {
|
||||
default: 60000,
|
||||
})
|
||||
.option('headless', {
|
||||
describe: 'Launch Puppeteer in headless mode',
|
||||
type: 'boolean',
|
||||
default: false
|
||||
}).
|
||||
option('puppeteer-args', {
|
||||
default: false,
|
||||
})
|
||||
.option('puppeteer-args', {
|
||||
describe: 'Additional args for Puppeteer',
|
||||
type: 'array',
|
||||
default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'] : []
|
||||
}).
|
||||
parse();
|
||||
default: process.env.CI
|
||||
? [
|
||||
'--no-sandbox',
|
||||
'--disable-setuid-sandbox',
|
||||
'--disable-dev-shm-usage',
|
||||
]
|
||||
: [],
|
||||
})
|
||||
.parse();
|
||||
|
||||
const entries = Object.keys(config.entry).map(key => config.entry[key]);
|
||||
const entries = Object.keys(config.entry).map((key) => config.entry[key]);
|
||||
|
||||
options.log = log.create({name: 'rendering', level: options.logLevel});
|
||||
|
||||
main(entries, options).catch(err => {
|
||||
main(entries, options).catch((err) => {
|
||||
options.log.error(err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@ const path = require('path');
|
||||
|
||||
const cases = path.join(__dirname, 'cases');
|
||||
|
||||
const caseDirs = fs.readdirSync(cases).filter(name => {
|
||||
const caseDirs = fs.readdirSync(cases).filter((name) => {
|
||||
let exists = true;
|
||||
try {
|
||||
fs.accessSync(path.join(cases, name, 'main.js'));
|
||||
@@ -14,7 +14,7 @@ const caseDirs = fs.readdirSync(cases).filter(name => {
|
||||
});
|
||||
|
||||
const entry = {};
|
||||
caseDirs.forEach(c => {
|
||||
caseDirs.forEach((c) => {
|
||||
entry[`cases/${c}/main`] = `./cases/${c}/main.js`;
|
||||
});
|
||||
|
||||
@@ -24,14 +24,14 @@ module.exports = {
|
||||
entry: entry,
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.js$/,
|
||||
use: {
|
||||
loader: path.join(__dirname, '../examples/webpack/worker-loader.js')
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: {
|
||||
loader: path.join(__dirname, '../examples/webpack/worker-loader.js'),
|
||||
},
|
||||
include: [path.join(__dirname, '../src/ol/worker')],
|
||||
},
|
||||
include: [
|
||||
path.join(__dirname, '../src/ol/worker')
|
||||
]
|
||||
}]
|
||||
}
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user