From c2eb0485dae4bc18fbf283a042f888d2fb27ca1e Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 18 Aug 2022 14:47:08 +0100 Subject: [PATCH] replace example --- examples/data/fish.png | Bin 427 -> 0 bytes examples/data/world.png | Bin 0 -> 2931 bytes examples/icon-scale.html | 213 +++++++++++++++++++++++++++++++-- examples/icon-scale.js | 251 +++++++++++++++++++++++---------------- 4 files changed, 352 insertions(+), 112 deletions(-) delete mode 100644 examples/data/fish.png create mode 100644 examples/data/world.png diff --git a/examples/data/fish.png b/examples/data/fish.png deleted file mode 100644 index 8163d232855a24eea6a32965fa684bef6c334ee4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 427 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 literal 0 HcmV?d00001 diff --git a/examples/icon-scale.html b/examples/icon-scale.html index 56fbd92d95..11a5dbd1ed 100644 --- a/examples/icon-scale.html +++ b/examples/icon-scale.html @@ -1,16 +1,211 @@ --- layout: example.html -title: Icon Scale +title: Icon and Label Scale shortdesc: Example of scaling icons and labels. docs: > Icons and labels can be scaled in both dimensions if required. A negative value will flip the image - or text around its anchor point (reversed text is not suitable for line placement). A newline - character inserted in label text is interpreted in a vector layer, but will not be shown in - a vector context. + or text around its anchor point (reversed text is not suitable for line placement). tags: "vector, style, icon, label, scale" -resources: - - https://code.jquery.com/jquery-3.5.1.min.js - - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css - - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js --- -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Image + -0.00 π     + Text +
   + +    + +
+ + π + + π
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
diff --git a/examples/icon-scale.js b/examples/icon-scale.js index 3d079fc0ba..3fbb3162c1 100644 --- a/examples/icon-scale.js +++ b/examples/icon-scale.js @@ -1,14 +1,56 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import Overlay from '../src/ol/Overlay.js'; import Point from '../src/ol/geom/Point.js'; import TileJSON from '../src/ol/source/TileJSON.js'; import VectorSource from '../src/ol/source/Vector.js'; import View from '../src/ol/View.js'; -import {Icon, Style, Text} from '../src/ol/style.js'; +import {Circle, Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {fromLonLat} from '../src/ol/proj.js'; -import {getVectorContext} from '../src/ol/render.js'; + +const iconFeature = new Feature({ + geometry: new Point([0, 0]), +}); + +const iconStyle = new Style({ + image: new Icon({ + anchor: [0.5, 1], + src: 'data/world.png', + }), + text: new Text({ + text: 'World\nText', + font: 'bold 30px Calibri,sans-serif', + fill: new Fill({ + color: 'black', + }), + stroke: new Stroke({ + color: 'white', + width: 2, + }), + }), +}); + +const pointStyle = new Style({ + image: new Circle({ + radius: 7, + fill: new Fill({ + color: 'black', + }), + stroke: new Stroke({ + color: 'white', + width: 2, + }), + }), +}); + +iconFeature.setStyle([pointStyle, iconStyle]); + +const vectorSource = new VectorSource({ + features: [iconFeature], +}); + +const vectorLayer = new VectorLayer({ + source: vectorSource, +}); const rasterLayer = new TileLayer({ source: new TileJSON({ @@ -17,115 +59,118 @@ const rasterLayer = new TileLayer({ }), }); -const iconFeature = new Feature({ - geometry: new Point(fromLonLat([0, -10])), - name: 'Fish.1', -}); - -const feature1 = new Feature({ - geometry: new Point(fromLonLat([0, -10])), - name: 'Fish.1 Island', -}); - -const feature2 = new Feature({ - geometry: new Point(fromLonLat([-30, 10])), - name: 'Fish.2 Island', -}); - -const iconStyle = new Style({ - image: new Icon({ - anchor: [0.5, 0.9], - src: 'data/fish.png', - crossOrigin: '', - scale: [0, 0], - rotation: Math.PI / 4, - }), - text: new Text({ - text: 'FISH\nTEXT', - scale: [0, 0], - rotation: Math.PI / 4, - textAlign: 'center', - textBaseline: 'top', - }), -}); - -let i = 0; -let j = 45; - -iconFeature.setStyle(function () { - const x = Math.sin((i * Math.PI) / 180) * 3; - const y = Math.sin((j * Math.PI) / 180) * 4; - iconStyle.getImage().setScale([x, y]); - iconStyle.getText().setScale([x, y]); - return iconStyle; -}); - -rasterLayer.on('postrender', function (event) { - const vectorContext = getVectorContext(event); - const x = Math.cos((i * Math.PI) / 180) * 3; - const y = Math.cos((j * Math.PI) / 180) * 4; - iconStyle.getImage().setScale([x, y]); - iconStyle.getText().setScale([x, y]); - vectorContext.drawFeature(feature2, iconStyle); -}); - -const vectorSource = new VectorSource({ - features: [iconFeature, feature1, feature2], -}); - -const vectorLayer = new VectorLayer({ - source: vectorSource, -}); - const map = new Map({ layers: [rasterLayer, vectorLayer], - target: document.getElementById('map'), + target: 'map', view: new View({ - center: fromLonLat([-15, 0]), + center: [0, 0], zoom: 3, }), }); -setInterval(function () { - i = (i + 4) % 360; - j = (j + 5) % 360; - vectorSource.changed(); -}, 1000); - -const element = document.getElementById('popup'); - -const popup = new Overlay({ - element: element, - positioning: 'bottom-center', - stopEvent: false, -}); -map.addOverlay(popup); - -// display popup on click -map.on('click', function (evt) { - const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { - return feature; - }); - $(element).popover('dispose'); - if (feature) { - popup.setPosition(evt.coordinate); - $(element).popover({ - placement: 'top', - html: true, - animation: false, - content: feature.get('name'), - }); - $(element).popover('show'); +const textAlignments = ['left', 'center', 'right']; +const textBaselines = ['top', 'middle', 'bottom']; +const controls = {}; +const controlIds = [ + 'rotation', + 'rotateWithView', + 'scaleX', + 'scaleY', + 'anchorX', + 'anchorY', + 'displacementX', + 'displacementY', + 'textRotation', + 'textRotateWithView', + 'textScaleX', + 'textScaleY', + 'textAlign', + 'textBaseline', + 'textOffsetX', + 'textOffsetY', +]; +controlIds.forEach(function (id) { + const control = document.getElementById(id); + const output = document.getElementById(id + 'Out'); + function setOutput() { + const value = parseFloat(control.value); + if (control.type === 'checkbox') { + output.innerText = control.checked; + } else if (id === 'textAlign') { + output.innerText = textAlignments[value]; + } else if (id === 'textBaseline') { + output.innerText = textBaselines[value]; + } else { + output.innerText = control.step.startsWith('0.') + ? value.toFixed(2) + : value; + } } + control.addEventListener('input', function () { + setOutput(); + updateStyle(); + }); + setOutput(); + controls[id] = control; }); +function updateStyle() { + iconStyle + .getImage() + .setRotation(parseFloat(controls['rotation'].value) * Math.PI); + + iconStyle.getImage().setRotateWithView(controls['rotateWithView'].checked); + + iconStyle + .getImage() + .setScale([ + parseFloat(controls['scaleX'].value), + parseFloat(controls['scaleY'].value), + ]); + + iconStyle + .getImage() + .setAnchor([ + parseFloat(controls['anchorX'].value), + parseFloat(controls['anchorY'].value), + ]); + + iconStyle + .getImage() + .setDisplacement([ + parseFloat(controls['displacementX'].value), + parseFloat(controls['displacementY'].value), + ]); + + iconStyle + .getText() + .setRotation(parseFloat(controls['textRotation'].value) * Math.PI); + + iconStyle.getText().setRotateWithView(controls['textRotateWithView'].checked); + + iconStyle + .getText() + .setScale([ + parseFloat(controls['textScaleX'].value), + parseFloat(controls['textScaleY'].value), + ]); + + iconStyle + .getText() + .setTextAlign(textAlignments[parseFloat(controls['textAlign'].value)]); + + iconStyle + .getText() + .setTextBaseline(textBaselines[parseFloat(controls['textBaseline'].value)]); + + iconStyle.getText().setOffsetX(parseFloat(controls['textOffsetX'].value)); + + iconStyle.getText().setOffsetY(parseFloat(controls['textOffsetY'].value)); +} +updateStyle(); + // change mouse cursor when over marker map.on('pointermove', function (e) { - const pixel = map.getEventPixel(e.originalEvent); - const hit = map.hasFeatureAtPixel(pixel); - map.getTarget().style.cursor = hit ? 'pointer' : ''; -}); -// Close the popup when the map is moved -map.on('movestart', function () { - $(element).popover('dispose'); + const hit = map.hasFeatureAtPixel(e.pixel); + map.getTargetElement().style.cursor = hit ? 'pointer' : ''; });