diff --git a/examples/geographic.css b/examples/geographic.css new file mode 100644 index 0000000000..9e0dd53bc5 --- /dev/null +++ b/examples/geographic.css @@ -0,0 +1,4 @@ +td { + padding: 0 0.5em; + text-align: right; +} diff --git a/examples/geographic.html b/examples/geographic.html index 3993e862b5..4c1ceaa710 100644 --- a/examples/geographic.html +++ b/examples/geographic.html @@ -7,7 +7,11 @@ docs: > makes it so the map view uses geographic coordinates (even if the view projection is not geographic). tags: "geographic" +resources: + - https://code.jquery.com/jquery-2.2.3.min.js + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js --- -
+
diff --git a/examples/geographic.js b/examples/geographic.js index 8f463ce348..44adf0f95a 100644 --- a/examples/geographic.js +++ b/examples/geographic.js @@ -1,8 +1,9 @@ import {useGeographic} from '../src/ol/proj.js'; -import {Map, View, Feature} from '../src/ol/index.js'; +import {Map, View, Feature, Overlay} from '../src/ol/index.js'; import {Point} from '../src/ol/geom.js'; import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Style, Circle, Fill} from '../src/ol/style.js'; useGeographic(); @@ -25,14 +26,64 @@ const map = new Map({ features: [ new Feature(point) ] + }), + style: new Style({ + image: new Circle({ + radius: 9, + fill: new Fill({color: 'red'}) + }) }) }) ] }); +const element = document.getElementById('popup'); + +const popup = new Overlay({ + element: element, + positioning: 'bottom-center', + stopEvent: false, + offset: [0, -10] +}); +map.addOverlay(popup); + +function formatCoordinate(coordinate) { + return ` + + + + + +
lon${coordinate[0].toFixed(2)}
lat${coordinate[1].toFixed(2)}
`; +} + const info = document.getElementById('info'); map.on('moveend', function() { const view = map.getView(); const center = view.getCenter(); - info.innerText = `lon: ${center[0].toFixed(2)}, lat: ${center[1].toFixed(2)}`; + info.innerHTML = formatCoordinate(center); +}); + +map.on('click', function(event) { + const feature = map.getFeaturesAtPixel(event.pixel)[0]; + if (feature) { + const coordinate = feature.getGeometry().getCoordinates(); + popup.setPosition(coordinate); + $(element).popover({ + placement: 'top', + html: true, + content: formatCoordinate(coordinate) + }); + $(element).popover('show'); + } else { + $(element).popover('destroy'); + } +}); + +map.on('pointermove', function(event) { + if (map.hasFeatureAtPixel(event.pixel)) { + map.getViewport().style.cursor = 'pointer'; + } else { + map.getViewport().style.cursor = 'inherit'; + } }); diff --git a/src/ol/Overlay.js b/src/ol/Overlay.js index 0e1fbdae6b..f8d71f695a 100644 --- a/src/ol/Overlay.js +++ b/src/ol/Overlay.js @@ -488,7 +488,7 @@ class Overlay extends BaseObject { return; } - const pixel = map.getPixelFromCoordinateInternal(position); + const pixel = map.getPixelFromCoordinate(position); const mapSize = map.getSize(); this.updateRenderedPosition(pixel, mapSize); } diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index b239dd20d6..98afcc77f2 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -546,7 +546,7 @@ class PluggableMap extends BaseObject { if (!this.frameState_) { return; } - const coordinate = this.getCoordinateFromPixel(pixel); + const coordinate = this.getCoordinateFromPixelInternal(pixel); opt_options = opt_options !== undefined ? opt_options : /** @type {AtPixelOptions} */ ({}); const hitTolerance = opt_options.hitTolerance !== undefined ? @@ -618,7 +618,7 @@ class PluggableMap extends BaseObject { if (!this.frameState_) { return false; } - const coordinate = this.getCoordinateFromPixel(pixel); + const coordinate = this.getCoordinateFromPixelInternal(pixel); opt_options = opt_options !== undefined ? opt_options : /** @type {AtPixelOptions} */ ({}); const layerFilter = opt_options.layerFilter !== undefined ? opt_options.layerFilter : TRUE; diff --git a/src/ol/render/canvas/Builder.js b/src/ol/render/canvas/Builder.js index f5f9faf675..ade18f1e61 100644 --- a/src/ol/render/canvas/Builder.js +++ b/src/ol/render/canvas/Builder.js @@ -206,7 +206,7 @@ class CanvasBuilder extends VectorContext { * @inheritDoc. */ drawCustom(geometry, feature, renderer) { - this.beginGeometry(feature); + this.beginGeometry(geometry, feature); const type = geometry.getType(); const stride = geometry.getStride(); const builderBegin = this.coordinates.length; @@ -253,12 +253,14 @@ class CanvasBuilder extends VectorContext { /** * @protected + * @param {import("../../geom/Geometry").default|import("../Feature.js").default} geometry The geometry. * @param {import("../../Feature.js").FeatureLike} feature Feature. */ - beginGeometry(feature) { - this.beginGeometryInstruction1_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0]; + beginGeometry(geometry, feature) { + const extent = geometry.getExtent(); + this.beginGeometryInstruction1_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0, extent]; this.instructions.push(this.beginGeometryInstruction1_); - this.beginGeometryInstruction2_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0]; + this.beginGeometryInstruction2_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0, extent]; this.hitDetectionInstructions.push(this.beginGeometryInstruction2_); } diff --git a/src/ol/render/canvas/Executor.js b/src/ol/render/canvas/Executor.js index 2a5e24c7de..05bb112c72 100644 --- a/src/ol/render/canvas/Executor.js +++ b/src/ol/render/canvas/Executor.js @@ -556,8 +556,7 @@ class Executor extends Disposable { switch (type) { case CanvasInstruction.BEGIN_GEOMETRY: feature = /** @type {import("../../Feature.js").FeatureLike} */ (instruction[1]); - if (opt_hitExtent !== undefined && !intersects( - opt_hitExtent, feature.getGeometry().getExtent())) { + if (opt_hitExtent !== undefined && !intersects(opt_hitExtent, instruction[3])) { i = /** @type {number} */ (instruction[2]) + 1; } else { ++i; diff --git a/src/ol/render/canvas/ImageBuilder.js b/src/ol/render/canvas/ImageBuilder.js index d7cd75a5fb..f60304d577 100644 --- a/src/ol/render/canvas/ImageBuilder.js +++ b/src/ol/render/canvas/ImageBuilder.js @@ -113,7 +113,7 @@ class CanvasImageBuilder extends CanvasBuilder { if (!this.image_) { return; } - this.beginGeometry(feature); + this.beginGeometry(pointGeometry, feature); const flatCoordinates = pointGeometry.getFlatCoordinates(); const stride = pointGeometry.getStride(); const myBegin = this.coordinates.length; @@ -142,7 +142,7 @@ class CanvasImageBuilder extends CanvasBuilder { if (!this.image_) { return; } - this.beginGeometry(feature); + this.beginGeometry(multiPointGeometry, feature); const flatCoordinates = multiPointGeometry.getFlatCoordinates(); const stride = multiPointGeometry.getStride(); const myBegin = this.coordinates.length; diff --git a/src/ol/render/canvas/LineStringBuilder.js b/src/ol/render/canvas/LineStringBuilder.js index 06df9e23ac..eedbc70b67 100644 --- a/src/ol/render/canvas/LineStringBuilder.js +++ b/src/ol/render/canvas/LineStringBuilder.js @@ -44,7 +44,7 @@ class CanvasLineStringBuilder extends CanvasBuilder { return; } this.updateStrokeStyle(state, this.applyStroke); - this.beginGeometry(feature); + this.beginGeometry(lineStringGeometry, feature); this.hitDetectionInstructions.push([ CanvasInstruction.SET_STROKE_STYLE, state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin, @@ -68,7 +68,7 @@ class CanvasLineStringBuilder extends CanvasBuilder { return; } this.updateStrokeStyle(state, this.applyStroke); - this.beginGeometry(feature); + this.beginGeometry(multiLineStringGeometry, feature); this.hitDetectionInstructions.push([ CanvasInstruction.SET_STROKE_STYLE, state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin, diff --git a/src/ol/render/canvas/PolygonBuilder.js b/src/ol/render/canvas/PolygonBuilder.js index 0c67a6c903..c8536aa83d 100644 --- a/src/ol/render/canvas/PolygonBuilder.js +++ b/src/ol/render/canvas/PolygonBuilder.js @@ -72,7 +72,7 @@ class CanvasPolygonBuilder extends CanvasBuilder { return; } this.setFillStrokeStyles_(); - this.beginGeometry(feature); + this.beginGeometry(circleGeometry, feature); if (state.fillStyle !== undefined) { this.hitDetectionInstructions.push([ CanvasInstruction.SET_FILL_STYLE, @@ -116,7 +116,7 @@ class CanvasPolygonBuilder extends CanvasBuilder { return; } this.setFillStrokeStyles_(); - this.beginGeometry(feature); + this.beginGeometry(polygonGeometry, feature); if (state.fillStyle !== undefined) { this.hitDetectionInstructions.push([ CanvasInstruction.SET_FILL_STYLE, @@ -148,7 +148,7 @@ class CanvasPolygonBuilder extends CanvasBuilder { return; } this.setFillStrokeStyles_(); - this.beginGeometry(feature); + this.beginGeometry(multiPolygonGeometry, feature); if (state.fillStyle !== undefined) { this.hitDetectionInstructions.push([ CanvasInstruction.SET_FILL_STYLE, diff --git a/src/ol/render/canvas/TextBuilder.js b/src/ol/render/canvas/TextBuilder.js index d2399edab0..2c8c601441 100644 --- a/src/ol/render/canvas/TextBuilder.js +++ b/src/ol/render/canvas/TextBuilder.js @@ -184,7 +184,7 @@ class CanvasTextBuilder extends CanvasBuilder { ends.push(endss[i][0]); } } - this.beginGeometry(feature); + this.beginGeometry(geometry, feature); const textAlign = textState.textAlign; let flatOffset = 0; let flatEnd; @@ -270,7 +270,7 @@ class CanvasTextBuilder extends CanvasBuilder { } } - this.beginGeometry(feature); + this.beginGeometry(geometry, feature); // The image is unknown at this stage so we pass null; it will be computed at render time. // For clarity, we pass NaN for offsetX, offsetY, width and height, which will be computed at