ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove the bulk of the WebGL legacy code.

Browse Source 
Things left to do:
* redo an icon layer example
* redo a clipping layer example
* update docs where WebGL renderers are mentioned
This commit is contained in:
Olivier Guyot
2018-11-15 18:00:35 +01:00
parent d3294730f1
commit 7fa2189fe9
47 changed files with 0 additions and 7738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/icon-sprite-webgl.html
View File

@@ -1,10 +0,0 @@
---
layout: example.html
title: Icon Sprites with WebGL
shortdesc: Icon sprite with WebGL
docs: >
<p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
tags: "webgl, icon, sprite, vector, point"
---
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

136
examples/icon-sprite-webgl.js
View File

@@ -1,136 +0,0 @@
import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/WebGLMap.js';
import View from '../src/ol/View.js';
import Point from '../src/ol/geom/Point.js';
import VectorLayer from '../src/ol/layer/WebGLVector.js';
import VectorSource from '../src/ol/source/Vector.js';
import {Icon, Style} from '../src/ol/style.js';
const iconInfo = [{
offset: [0, 0],
opacity: 1.0,
rotateWithView: true,
rotation: 0.0,
scale: 1.0,
size: [55, 55]
}, {
offset: [110, 86],
opacity: 0.75,
rotateWithView: false,
rotation: Math.PI / 2.0,
scale: 1.25,
size: [55, 55]
}, {
offset: [55, 0],
opacity: 0.5,
rotateWithView: true,
rotation: Math.PI / 3.0,
scale: 1.5,
size: [55, 86]
}, {
offset: [212, 0],
opacity: 1.0,
rotateWithView: true,
rotation: 0.0,
scale: 1.0,
size: [44, 44]
}];
let i;
const iconCount = iconInfo.length;
const icons = new Array(iconCount);
for (i = 0; i < iconCount; ++i) {
const info = iconInfo[i];
icons[i] = new Icon({
offset: info.offset,
opacity: info.opacity,
rotateWithView: info.rotateWithView,
rotation: info.rotation,
scale: info.scale,
size: info.size,
crossOrigin: 'anonymous',
src: 'data/Butterfly.png'
});
}
const featureCount = 50000;
const features = new Array(featureCount);
let feature, geometry;
const e = 25000000;
for (i = 0; i < featureCount; ++i) {
geometry = new Point(
[2 * e * Math.random() - e, 2 * e * Math.random() - e]);
feature = new Feature(geometry);
feature.setStyle(
new Style({
image: icons[i % (iconCount - 1)]
})
);
features[i] = feature;
}
const vectorSource = new VectorSource({
features: features
});
const vector = new VectorLayer({
source: vectorSource
});
const map = new Map({
layers: [vector],
target: document.getElementById('map'),
view: new View({
center: [0, 0],
zoom: 5
})
});
const overlayFeatures = [];
for (i = 0; i < featureCount; i += 30) {
const clone = features[i].clone();
clone.setStyle(null);
overlayFeatures.push(clone);
}
new VectorLayer({
map: map,
source: new VectorSource({
features: overlayFeatures
}),
style: new Style({
image: icons[iconCount - 1]
})
});
map.on('click', function(evt) {
const info = document.getElementById('info');
info.innerHTML =
'Hold on a second, while I catch those butterflies for you ...';
window.setTimeout(function() {
const features = [];
map.forEachFeatureAtPixel(evt.pixel, function(feature) {
features.push(feature);
return false;
});
if (features.length === 1) {
info.innerHTML = 'Got one butterfly';
} else if (features.length > 1) {
info.innerHTML = 'Got ' + features.length + ' butterflies';
} else {
info.innerHTML = 'Couldn\'t catch a single butterfly';
}
}, 1);
});
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
const hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});

12
examples/layer-clipping-webgl.html
View File

@@ -1,12 +0,0 @@
---
layout: example.html
title: Layer Clipping with WebGL
shortdesc: Layer WebGL clipping example.
docs: >
This example shows how to use the <code>precompose</code> and <code>postcompose</code> rendering hooks to clip layers using WebGL.
tags: "clipping, webgl, openstreetmap"
---
<div id="map" class="map"></div>
<div id="no-webgl" class="alert alert-danger" style="display: none">
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
</div>

101
examples/layer-clipping-webgl.js
View File

@@ -1,101 +0,0 @@
import Map from '../src/ol/WebGLMap.js';
import View from '../src/ol/View.js';
import {WEBGL} from '../src/ol/has.js';
import TileLayer from '../src/ol/layer/WebGLTile.js';
import OSM from '../src/ol/source/OSM.js';
if (!WEBGL) {
const info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
} else {
const osm = new TileLayer({
source: new OSM()
});
const map = new Map({
layers: [osm],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
const fragmentShaderSource = [
'precision mediump float;',
'void main() {',
'}'
].join('');
const vertexShaderSource = [
'attribute vec2 a_position;',
'void main() {',
' gl_Position = vec4(a_position, 0, 1);',
'}'
].join('');
osm.on('precompose', function(event) {
const context = event.glContext;
const gl = context.getGL();
const program = gl.createProgram();
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
gl.attachShader(program, vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
context.useProgram(program);
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
// first band
-1.0, -1.0, -0.75, -1.0, -1.0, 1.0,
-1.0, 1.0, -0.75, -1.0, -0.75, 1.0,
// second band
-0.5, -1.0, -0.25, -1.0, -0.5, 1.0,
-0.5, 1.0, -0.25, -1.0, -0.25, 1.0,
// third band
0.0, -1.0, 0.25, -1.0, 0.0, 1.0,
0.0, 1.0, 0.25, -1.0, 0.25, 1.0,
// forth band
0.5, -1.0, 0.75, -1.0, 0.5, 1.0,
0.5, 1.0, 0.75, -1.0, 0.75, 1.0
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 24);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.deleteBuffer(buffer);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL, 0, 0xff);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
});
osm.on('postcompose', function(event) {
const context = event.glContext;
const gl = context.getGL();
gl.disable(gl.STENCIL_TEST);
});
}

7
examples/side-by-side.css
View File

@@ -1,7 +0,0 @@
@media (min-width: 800px) {
.half {
padding: 0 10px;
width: 50%;
float: left;
}
}

16
examples/side-by-side.html
View File

@@ -1,16 +0,0 @@
---
layout: example.html
title: Shared Views
shortdesc: Two maps with different renderers share view properties
docs: >
Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers.
tags: "side-by-side, canvas, webgl"
---
<div class="half">
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
</div>
<div class="half">
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
</div>

31
examples/side-by-side.js
View File

@@ -1,31 +0,0 @@
import Map from '../src/ol/Map.js';
import WebGLMap from '../src/ol/WebGLMap.js';
import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import WebGLTileLayer from '../src/ol/layer/WebGLTile.js';
import OSM from '../src/ol/source/OSM.js';
const layer = new TileLayer({
source: new OSM()
});
const webGLLayer = new WebGLTileLayer({
source: new OSM()
});
const view = new View({
center: [0, 0],
zoom: 1
});
const map1 = new Map({
target: 'canvasMap',
layers: [layer],
view: view
});
const map2 = new WebGLMap({
target: 'webglMap',
layers: [webGLLayer],
view: view
});

14
examples/symbol-atlas-webgl.html
View File

@@ -1,14 +0,0 @@
---
layout: example.html
title: Symbols with WebGL
shortdesc: Using symbols in an atlas with WebGL.
docs: >
<p>When using symbol styles with WebGL, OpenLayers would render the symbol
on a temporary image and would create a WebGL texture for each image. For a
better performance, it is recommended to use atlas images (similar to
image sprites with CSS), so that the number of textures is reduced. OpenLayers
provides an <code>AtlasManager</code>, which when passed to the constructor
of a symbol style, will create atlases for the symbols.</p>
tags: "webgl, symbol, atlas, vector, point"
---
<div id="map" class="map"></div>

111
examples/symbol-atlas-webgl.js
View File

@@ -1,111 +0,0 @@
import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/WebGLMap.js';
import View from '../src/ol/View.js';
import Point from '../src/ol/geom/Point.js';
import VectorLayer from '../src/ol/layer/WebGLVector.js';
import VectorSource from '../src/ol/source/Vector.js';
import {AtlasManager, Circle as CircleStyle, Fill, RegularShape, Stroke, Style} from '../src/ol/style.js';
const atlasManager = new AtlasManager({
// we increase the initial size so that all symbols fit into
// a single atlas image
initialSize: 512
});
const symbolInfo = [{
opacity: 1.0,
scale: 1.0,
fillColor: 'rgba(255, 153, 0, 0.4)',
strokeColor: 'rgba(255, 204, 0, 0.2)'
}, {
opacity: 0.75,
scale: 1.25,
fillColor: 'rgba(70, 80, 224, 0.4)',
strokeColor: 'rgba(12, 21, 138, 0.2)'
}, {
opacity: 0.5,
scale: 1.5,
fillColor: 'rgba(66, 150, 79, 0.4)',
strokeColor: 'rgba(20, 99, 32, 0.2)'
}, {
opacity: 1.0,
scale: 1.0,
fillColor: 'rgba(176, 61, 35, 0.4)',
strokeColor: 'rgba(145, 43, 20, 0.2)'
}];
const radiuses = [3, 6, 9, 15, 19, 25];
const symbolCount = symbolInfo.length * radiuses.length * 2;
const symbols = [];
let i, j;
for (i = 0; i < symbolInfo.length; ++i) {
const info = symbolInfo[i];
for (j = 0; j < radiuses.length; ++j) {
// circle symbol
symbols.push(new CircleStyle({
opacity: info.opacity,
scale: info.scale,
radius: radiuses[j],
fill: new Fill({
color: info.fillColor
}),
stroke: new Stroke({
color: info.strokeColor,
width: 1
}),
// by passing the atlas manager to the symbol,
// the symbol will be added to an atlas
atlasManager: atlasManager
}));
// star symbol
symbols.push(new RegularShape({
points: 8,
opacity: info.opacity,
scale: info.scale,
radius: radiuses[j],
radius2: radiuses[j] * 0.7,
angle: 1.4,
fill: new Fill({
color: info.fillColor
}),
stroke: new Stroke({
color: info.strokeColor,
width: 1
}),
atlasManager: atlasManager
}));
}
}
const featureCount = 50000;
const features = new Array(featureCount);
let feature, geometry;
const e = 25000000;
for (i = 0; i < featureCount; ++i) {
geometry = new Point(
[2 * e * Math.random() - e, 2 * e * Math.random() - e]);
feature = new Feature(geometry);
feature.setStyle(
new Style({
image: symbols[i % symbolCount]
})
);
features[i] = feature;
}
const vectorSource = new VectorSource({
features: features
});
const vector = new VectorLayer({
source: vectorSource
});
const map = new Map({
layers: [vector],
target: document.getElementById('map'),
view: new View({
center: [0, 0],
zoom: 4
})
});