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

Merge pull request #8944 from jahow/fix-graticule

Browse Source 
Use a layer for the graticule instead of a control
This commit is contained in:
Tim Schaub
2018-11-15 18:07:15 +01:00
committed by GitHub
parent f95070a34d a3f9c6b724
commit 00cf75c837
8 changed files with 356 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
changelog/upgrade-notes.md
View File

@@ -2,8 +2,14 @@
### Next version
Breaking change: The `OverviewMap` control now cannot be instantiated without a list of layers.
Breaking change: layers can no longer be shared between several `Map` objects.
Breaking change: the `Graticule` control has been replaced by a layer also called `Graticule`, found in `ol/layer/Graticule`.
The API remains similar.
### v5.3.0
#### The `getUid` function returns string

4
examples/graticule.html
View File

@@ -1,9 +1,9 @@
---
layout: example.html
title: Map Graticule
shortdesc: This example shows how to add a graticule overlay to a map.
shortdesc: This example shows how to add a graticule layer to a map.
docs: >
This example shows how to add a graticule overlay to a map.
This example shows how to add a graticule layer to a map.
tags: "graticule"
---
<div id="map" class="map"></div>

25
examples/graticule.js
View File

@@ -1,4 +1,4 @@
import Graticule from '../src/ol/Graticule.js';
import Graticule from '../src/ol/layer/Graticule.js';
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
@@ -13,6 +13,16 @@ const map = new Map({
source: new OSM({
wrapX: false
})
}),
new Graticule({
// the style to use for the lines, optional.
strokeStyle: new Stroke({
color: 'rgba(255,120,0,0.9)',
width: 2,
lineDash: [0.5, 4]
}),
showLabels: true,
wrapX: false
})
],
target: 'map',
@@ -21,16 +31,3 @@ const map = new Map({
zoom: 5
})
});
// Create the graticule component
const graticule = new Graticule({
// the style to use for the lines, optional.
strokeStyle: new Stroke({
color: 'rgba(255,120,0,0.9)',
width: 2,
lineDash: [0.5, 4]
}),
showLabels: true
});
graticule.setMap(map);

4
examples/sphere-mollweide.html
View File

@@ -1,9 +1,9 @@
---
layout: example.html
title: Sphere Mollweide
shortdesc: Example of a Sphere Mollweide map with a Graticule component.
shortdesc: Example of a Sphere Mollweide map with a Graticule layer.
docs: >
Example of a Sphere Mollweide map with a Graticule component.
Example of a Sphere Mollweide map with a Graticule layer.
tags: "graticule, Mollweide, projection, proj4js"
---
<div id="map" class="map"></div>

10
examples/sphere-mollweide.js
View File

@@ -1,4 +1,4 @@
import Graticule from '../src/ol/Graticule.js';
import Graticule from '../src/ol/layer/Graticule.js';
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
@@ -30,17 +30,13 @@ const map = new Map({
url: 'data/geojson/countries-110m.geojson',
format: new GeoJSON()
})
})
}),
new Graticule()
],
target: 'map',
view: new View({
center: [0, 0],
projection: sphereMollweideProjection,
resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
zoom: 0
})
});
new Graticule({
map: map
});

2
src/ol/index.js
View File

@@ -7,7 +7,7 @@ export {default as Collection} from './Collection.js';
export {default as Disposable} from './Disposable.js';
export {default as Feature} from './Feature.js';
export {default as Geolocation} from './Geolocation.js';
export {default as Graticule} from './Graticule.js';
export {default as Graticule} from './layer/Graticule.js';
export {default as Image} from './Image.js';
export {default as ImageBase} from './ImageBase.js';
export {default as ImageCanvas} from './ImageCanvas.js';

519
src/ol/Graticule.js → src/ol/layer/Graticule.js
View File

@@ -1,19 +1,29 @@
/**
* @module ol/Graticule
* @module ol/layer/Graticule
*/
import {degreesToStringHDMS} from './coordinate.js';
import {listen, unlistenByKey} from './events.js';
import {intersects, getCenter} from './extent.js';
import GeometryLayout from './geom/GeometryLayout.js';
import LineString from './geom/LineString.js';
import Point from './geom/Point.js';
import {meridian, parallel} from './geom/flat/geodesic.js';
import {clamp} from './math.js';
import {get as getProjection, equivalent as equivalentProjection, getTransform, transformExtent} from './proj.js';
import RenderEventType from './render/EventType.js';
import Fill from './style/Fill.js';
import Stroke from './style/Stroke.js';
import Text from './style/Text.js';
import VectorLayer from './Vector.js';
import {assign} from '../obj.js';
import {degreesToStringHDMS} from '../coordinate';
import Text from '../style/Text';
import Fill from '../style/Fill';
import Stroke from '../style/Stroke';
import LineString from '../geom/LineString.js';
import VectorSource from '../source/Vector';
import {
equivalent as equivalentProjection,
get as getProjection,
getTransform,
transformExtent
} from '../proj';
import {getCenter, intersects, equals, getIntersection, isEmpty} from '../extent';
import {clamp} from '../math';
import Style from '../style/Style';
import Feature from '../Feature';
import {bbox} from '../loadingstrategy';
import {meridian, parallel} from '../geom/flat/geodesic';
import GeometryLayout from '../geom/GeometryLayout';
import Point from '../geom/Point';
import Collection from '../Collection';
/**
@@ -39,10 +49,21 @@ const INTERVALS = [
* @property {string} text
*/
/**
* @typedef {Object} Options
* @property {import("./PluggableMap.js").default} [map] Reference to an
* {@link module:ol/Map~Map} object.
* @property {number} [opacity=1] Opacity (0, 1).
* @property {boolean} [visible=true] Visibility.
* @property {import("../extent.js").Extent} [extent] The bounding extent for layer rendering. The layer will not be
* rendered outside of this extent.
* @property {number} [zIndex] The z-index for layer rendering. At rendering time, the layers
* will be ordered, first by Z-index and then by position. When `undefined`, a `zIndex` of 0 is assumed
* for layers that are added to the map's `layers` collection, or `Infinity` when the layer's `setMap()`
* method was used.
* @property {number} [minResolution] The minimum resolution (inclusive) at which this layer will be
* visible.
* @property {number} [maxResolution] The maximum resolution (exclusive) below which this layer will
* be visible.
* @property {number} [maxLines=100] The maximum number of meridians and
* parallels from the center of the map. The default value of 100 means that at
* most 200 meridians and 200 parallels will be displayed. The default value is
@@ -111,35 +132,41 @@ const INTERVALS = [
* ```js
* [30, 10]
* ```
* @property {boolean} [wrapX=true] Whether to repeat the graticule horizontally.
*/
/**
* Render a grid for a coordinate system on a map.
* @classdesc
* Layer that renders a grid for a coordinate system.
*
* @fires import("../render/Event.js").RenderEvent
* @api
*/
class Graticule {
class Graticule extends VectorLayer {
/**
* @param {Options=} opt_options Options.
*/
constructor(opt_options) {
const options = opt_options || {};
const options = opt_options ? opt_options : {};
const baseOptions = assign({}, options);
delete baseOptions.maxLines;
delete baseOptions.strokeStyle;
delete baseOptions.targetSize;
delete baseOptions.showLabels;
delete baseOptions.lonLabelFormatter;
delete baseOptions.latLabelFormatter;
delete baseOptions.lonLabelPosition;
delete baseOptions.latLabelPosition;
delete baseOptions.lonLabelStyle;
delete baseOptions.latLabelStyle;
delete baseOptions.intervals;
super(baseOptions);
/**
* @type {import("./PluggableMap.js").default}
* @private
*/
this.map_ = null;
/**
* @type {?import("./events.js").EventsKey}
* @private
*/
this.postcomposeListenerKey_ = null;
/**
* @type {import("./proj/Projection.js").default}
* @type {import("../proj/Projection.js").default}
*/
this.projection_ = null;
@@ -222,19 +249,19 @@ class Graticule {
this.strokeStyle_ = options.strokeStyle !== undefined ? options.strokeStyle : DEFAULT_STROKE_STYLE;
/**
* @type {import("./proj.js").TransformFunction|undefined}
* @type {import("../proj.js").TransformFunction|undefined}
* @private
*/
this.fromLonLatTransform_ = undefined;
/**
* @type {import("./proj.js").TransformFunction|undefined}
* @type {import("../proj.js").TransformFunction|undefined}
* @private
*/
this.toLonLatTransform_ = undefined;
/**
* @type {import("./coordinate.js").Coordinate}
* @type {import("../coordinate.js").Coordinate}
* @private
*/
this.projectionCenterLonLat_ = null;
@@ -251,7 +278,7 @@ class Graticule {
*/
this.parallelsLabels_ = null;
if (options.showLabels == true) {
if (options.showLabels) {
/**
* @type {null|function(number):string}
@@ -286,38 +313,70 @@ class Graticule {
options.latLabelPosition;
/**
* @type {Text}
* @type {Object.<string,Style>}
* @private
*/
this.lonLabelStyle_ = options.lonLabelStyle !== undefined ? options.lonLabelStyle :
new Text({
font: '12px Calibri,sans-serif',
textBaseline: 'bottom',
fill: new Fill({
color: 'rgba(0,0,0,1)'
}),
stroke: new Stroke({
color: 'rgba(255,255,255,1)',
width: 3
})
});
this.lonLabelStyleCache_ = {};
/**
* @type {Text}
* @private
* @param {import("../Feature").default} feature Feature
* @return {Style} style
*/
this.lonLabelStyle_ = function(feature) {
const label = feature.get('graticule_label');
if (!this.lonLabelStyleCache_[label]) {
this.lonLabelStyleCache_[label] = new Style({
text: options.lonLabelStyle !== undefined ? options.lonLabelStyle :
new Text({
text: label,
font: '12px Calibri,sans-serif',
textBaseline: 'bottom',
fill: new Fill({
color: 'rgba(0,0,0,1)'
}),
stroke: new Stroke({
color: 'rgba(255,255,255,1)',
width: 3
})
})
});
}
return this.lonLabelStyleCache_[label];
}.bind(this);
/**
* @type {Object.<string,Style>}
* @private
*/
this.latLabelStyle_ = options.latLabelStyle !== undefined ? options.latLabelStyle :
new Text({
font: '12px Calibri,sans-serif',
textAlign: 'end',
fill: new Fill({
color: 'rgba(0,0,0,1)'
}),
stroke: new Stroke({
color: 'rgba(255,255,255,1)',
width: 3
})
});
this.latLabelStyleCache_ = {};
/**
* @private
* @param {import("../Feature").default} feature Feature
* @return {Style} style
*/
this.latLabelStyle_ = function(feature) {
const label = feature.get('graticule_label');
if (!this.latLabelStyleCache_[label]) {
this.latLabelStyleCache_[label] = new Style({
text: options.latLabelStyle !== undefined ? options.latLabelStyle :
new Text({
text: label,
font: '12px Calibri,sans-serif',
textAlign: 'right',
fill: new Fill({
color: 'rgba(0,0,0,1)'
}),
stroke: new Stroke({
color: 'rgba(255,255,255,1)',
width: 3
})
})
});
}
return this.latLabelStyleCache_[label];
}.bind(this);
this.meridiansLabels_ = [];
this.parallelsLabels_ = [];
@@ -329,7 +388,143 @@ class Graticule {
*/
this.intervals_ = options.intervals !== undefined ? options.intervals : INTERVALS;
this.setMap(options.map !== undefined ? options.map : null);
// use a source with a custom loader for lines & text
this.setSource(
new VectorSource({
loader: this.loaderFunction.bind(this),
strategy: bbox,
features: new Collection(),
overlaps: false,
useSpatialIndex: false,
wrapX: options.wrapX
})
);
/**
* feature pool to use when updating graticule
* @type {Array<Feature>}
* @private
*/
this.featurePool_ = [];
/**
* @type {Style}
* @private
*/
this.lineStyle_ = new Style({
stroke: this.strokeStyle_
});
/**
* @type {import("../extent.js").Extent}
*/
this.renderedExtent_ = null;
this.setRenderOrder(null);
this.renderBuffer_ = 0;
this.updateWhileAnimating_ = true;
this.updateWhileInteracting_ = true;
this.tmpExtent_ = null;
}
/**
* Update geometries in the source based on current view
* @param {import("../extent").Extent} extent Extent
* @param {number} resolution Resolution
* @param {import("../proj/Projection.js").default} projection Projection
*/
loaderFunction(extent, resolution, projection) {
const source = /** @type import("../source/Vector").default} */ (this.getSource());
// only consider the intersection between our own extent & the requested one
const layerExtent = this.getExtent() || [-Infinity, -Infinity, Infinity, Infinity];
const renderExtent = getIntersection(layerExtent, extent, this.tmpExtent_);
// we should not keep track of loaded extents
setTimeout(function() {
source.removeLoadedExtent(extent);
}, 0);
if (this.renderedExtent_ && equals(this.renderedExtent_, renderExtent)) {
return;
}
this.renderedExtent_ = renderExtent;
// bail out if nothing to render
if (isEmpty(renderExtent)) {
return;
}
// update projection info
const center = getCenter(renderExtent);
const squaredTolerance = resolution * resolution / 4;
const updateProjectionInfo = !this.projection_ ||
!equivalentProjection(this.projection_, projection);
if (updateProjectionInfo) {
this.updateProjectionInfo_(projection);
}
this.createGraticule_(renderExtent, center, resolution, squaredTolerance);
// first make sure we have enough features in the pool
let featureCount = this.meridians_.length + this.parallels_.length;
if (this.meridiansLabels_) {
featureCount += this.meridiansLabels_.length;
}
if (this.parallelsLabels_) {
featureCount += this.parallelsLabels_.length;
}
let feature;
while (featureCount > this.featurePool_.length) {
feature = new Feature();
this.featurePool_.push(feature);
}
const featuresColl = source.getFeaturesCollection();
featuresColl.clear();
let poolIndex = 0;
// add features for the lines & labels
let i, l;
for (i = 0, l = this.meridians_.length; i < l; ++i) {
feature = this.featurePool_[poolIndex++];
feature.setGeometry(this.meridians_[i]);
feature.setStyle(this.lineStyle_);
featuresColl.push(feature);
}
for (i = 0, l = this.parallels_.length; i < l; ++i) {
feature = this.featurePool_[poolIndex++];
feature.setGeometry(this.parallels_[i]);
feature.setStyle(this.lineStyle_);
featuresColl.push(feature);
}
let labelData;
if (this.meridiansLabels_) {
for (i = 0, l = this.meridiansLabels_.length; i < l; ++i) {
labelData = this.meridiansLabels_[i];
feature = this.featurePool_[poolIndex++];
feature.setGeometry(labelData.geom);
feature.setStyle(this.lonLabelStyle_);
feature.set('graticule_label', labelData.text);
featuresColl.push(feature);
}
}
if (this.parallelsLabels_) {
for (i = 0, l = this.parallelsLabels_.length; i < l; ++i) {
labelData = this.parallelsLabels_[i];
feature = this.featurePool_[poolIndex++];
feature.setGeometry(labelData.geom);
feature.setStyle(this.latLabelStyle_);
feature.set('graticule_label', labelData.text);
featuresColl.push(feature);
}
}
}
/**
@@ -337,7 +532,7 @@ class Graticule {
* @param {number} minLat Minimal latitude.
* @param {number} maxLat Maximal latitude.
* @param {number} squaredTolerance Squared tolerance.
* @param {import("./extent.js").Extent} extent Extent.
* @param {import("../extent.js").Extent} extent Extent.
* @param {number} index Index.
* @return {number} Index.
* @private
@@ -357,37 +552,12 @@ class Graticule {
return index;
}
/**
* @param {LineString} lineString Meridian
* @param {import("./extent.js").Extent} extent Extent.
* @param {number} index Index.
* @return {Point} Meridian point.
* @private
*/
getMeridianPoint_(lineString, extent, index) {
const flatCoordinates = lineString.getFlatCoordinates();
const clampedBottom = Math.max(extent[1], flatCoordinates[1]);
const clampedTop = Math.min(extent[3], flatCoordinates[flatCoordinates.length - 1]);
const lat = clamp(
extent[1] + Math.abs(extent[1] - extent[3]) * this.lonLabelPosition_,
clampedBottom, clampedTop);
const coordinate = [flatCoordinates[0], lat];
let point;
if (index in this.meridiansLabels_) {
point = this.meridiansLabels_[index].geom;
point.setCoordinates(coordinate);
} else {
point = new Point(coordinate);
}
return point;
}
/**
* @param {number} lat Latitude.
* @param {number} minLon Minimal longitude.
* @param {number} maxLon Maximal longitude.
* @param {number} squaredTolerance Squared tolerance.
* @param {import("./extent.js").Extent} extent Extent.
* @param {import("../extent.js").Extent} extent Extent.
* @param {number} index Index.
* @return {number} Index.
* @private
@@ -408,39 +578,13 @@ class Graticule {
}
/**
* @param {LineString} lineString Parallels.
* @param {import("./extent.js").Extent} extent Extent.
* @param {number} index Index.
* @return {Point} Parallel point.
* @private
*/
getParallelPoint_(lineString, extent, index) {
const flatCoordinates = lineString.getFlatCoordinates();
const clampedLeft = Math.max(extent[0], flatCoordinates[0]);
const clampedRight = Math.min(extent[2], flatCoordinates[flatCoordinates.length - 2]);
const lon = clamp(
extent[0] + Math.abs(extent[0] - extent[2]) * this.latLabelPosition_,
clampedLeft, clampedRight);
const coordinate = [lon, flatCoordinates[1]];
let point;
if (index in this.parallelsLabels_) {
point = this.parallelsLabels_[index].geom;
point.setCoordinates(coordinate);
} else {
point = new Point(coordinate);
}
return point;
}
/**
* @param {import("./extent.js").Extent} extent Extent.
* @param {import("./coordinate.js").Coordinate} center Center.
* @param {import("../extent.js").Extent} extent Extent.
* @param {import("../coordinate.js").Coordinate} center Center.
* @param {number} resolution Resolution.
* @param {number} squaredTolerance Squared tolerance.
* @private
*/
createGraticule_(extent, center, resolution, squaredTolerance) {
const interval = this.getInterval_(resolution);
if (interval == -1) {
this.meridians_.length = this.parallels_.length = 0;
@@ -557,15 +701,6 @@ class Graticule {
return interval;
}
/**
* Get the map associated with this graticule.
* @return {import("./PluggableMap.js").default} The map.
* @api
*/
getMap() {
return this.map_;
}
/**
* @param {number} lon Longitude.
* @param {number} minLat Minimal latitude.
@@ -587,6 +722,31 @@ class Graticule {
return lineString;
}
/**
* @param {LineString} lineString Meridian
* @param {import("../extent.js").Extent} extent Extent.
* @param {number} index Index.
* @return {Point} Meridian point.
* @private
*/
getMeridianPoint_(lineString, extent, index) {
const flatCoordinates = lineString.getFlatCoordinates();
const clampedBottom = Math.max(extent[1], flatCoordinates[1]);
const clampedTop = Math.min(extent[3], flatCoordinates[flatCoordinates.length - 1]);
const lat = clamp(
extent[1] + Math.abs(extent[1] - extent[3]) * this.lonLabelPosition_,
clampedBottom, clampedTop);
const coordinate = [flatCoordinates[0], lat];
let point;
if (index in this.meridiansLabels_) {
point = this.meridiansLabels_[index].geom;
point.setCoordinates(coordinate);
} else {
point = new Point(coordinate);
}
return point;
}
/**
* Get the list of meridians. Meridians are lines of equal longitude.
* @return {Array<LineString>} The meridians.
@@ -617,6 +777,32 @@ class Graticule {
return lineString;
}
/**
* @param {LineString} lineString Parallels.
* @param {import("../extent.js").Extent} extent Extent.
* @param {number} index Index.
* @return {Point} Parallel point.
* @private
*/
getParallelPoint_(lineString, extent, index) {
const flatCoordinates = lineString.getFlatCoordinates();
const clampedLeft = Math.max(extent[0], flatCoordinates[0]);
const clampedRight = Math.min(extent[2], flatCoordinates[flatCoordinates.length - 2]);
const lon = clamp(
extent[0] + Math.abs(extent[0] - extent[2]) * this.latLabelPosition_,
clampedLeft, clampedRight);
const coordinate = [lon, flatCoordinates[1]];
let point;
if (index in this.parallelsLabels_) {
point = this.parallelsLabels_[index].geom;
point.setCoordinates(coordinate);
} else {
point = new Point(coordinate);
}
return point;
}
/**
* Get the list of parallels. Parallels are lines of equal latitude.
* @return {Array<LineString>} The parallels.
@@ -627,62 +813,7 @@ class Graticule {
}
/**
* @param {import("./render/Event.js").default} e Event.
* @private
*/
handlePostCompose_(e) {
const vectorContext = e.vectorContext;
const frameState = e.frameState;
const extent = frameState.extent;
const viewState = frameState.viewState;
const center = viewState.center;
const projection = viewState.projection;
const resolution = viewState.resolution;
const pixelRatio = frameState.pixelRatio;
const squaredTolerance =
resolution * resolution / (4 * pixelRatio * pixelRatio);
const updateProjectionInfo = !this.projection_ ||
!equivalentProjection(this.projection_, projection);
if (updateProjectionInfo) {
this.updateProjectionInfo_(projection);
}
this.createGraticule_(extent, center, resolution, squaredTolerance);
// Draw the lines
vectorContext.setFillStrokeStyle(null, this.strokeStyle_);
let i, l, line;
for (i = 0, l = this.meridians_.length; i < l; ++i) {
line = this.meridians_[i];
vectorContext.drawGeometry(line);
}
for (i = 0, l = this.parallels_.length; i < l; ++i) {
line = this.parallels_[i];
vectorContext.drawGeometry(line);
}
let labelData;
if (this.meridiansLabels_) {
for (i = 0, l = this.meridiansLabels_.length; i < l; ++i) {
labelData = this.meridiansLabels_[i];
this.lonLabelStyle_.setText(labelData.text);
vectorContext.setTextStyle(this.lonLabelStyle_);
vectorContext.drawGeometry(labelData.geom);
}
}
if (this.parallelsLabels_) {
for (i = 0, l = this.parallelsLabels_.length; i < l; ++i) {
labelData = this.parallelsLabels_[i];
this.latLabelStyle_.setText(labelData.text);
vectorContext.setTextStyle(this.latLabelStyle_);
vectorContext.drawGeometry(labelData.geom);
}
}
}
/**
* @param {import("./proj/Projection.js").default} projection Projection.
* @param {import("../proj/Projection.js").default} projection Projection.
* @private
*/
updateProjectionInfo_(projection) {
@@ -709,25 +840,7 @@ class Graticule {
this.projection_ = projection;
}
/**
* Set the map for this graticule. The graticule will be rendered on the
* provided map.
* @param {import("./PluggableMap.js").default} map Map.
* @api
*/
setMap(map) {
if (this.map_) {
unlistenByKey(this.postcomposeListenerKey_);
this.postcomposeListenerKey_ = null;
this.map_.render();
}
if (map) {
this.postcomposeListenerKey_ = listen(map, RenderEventType.POSTCOMPOSE, this.handlePostCompose_, this);
map.render();
}
this.map_ = map;
}
}
export default Graticule;

23
test/spec/ol/graticule.test.js
View File

@@ -1,15 +1,17 @@
import Graticule from '../../../src/ol/Graticule.js';
import Graticule from '../../../src/ol/layer/Graticule.js';
import Map from '../../../src/ol/Map.js';
import {get as getProjection} from '../../../src/ol/proj.js';
import Stroke from '../../../src/ol/style/Stroke.js';
import Text from '../../../src/ol/style/Text.js';
import Feature from '../../../src/ol/Feature';
describe('ol.Graticule', function() {
describe('ol.layer.Graticule', function() {
let graticule;
function createGraticule() {
graticule = new Graticule({
map: new Map({})
graticule = new Graticule();
new Map({
layers: [graticule]
});
}
@@ -31,9 +33,11 @@ describe('ol.Graticule', function() {
it('creates a graticule with labels', function() {
graticule = new Graticule({
map: new Map({}),
showLabels: true
});
new Map({
layers: [graticule]
});
const extent = [-25614353.926475704, -7827151.696402049,
25614353.926475704, 7827151.696402049];
const projection = getProjection('EPSG:3857');
@@ -75,6 +79,7 @@ describe('ol.Graticule', function() {
it('can be configured with label options', function() {
const latLabelStyle = new Text();
const lonLabelStyle = new Text();
const feature = new Feature();
graticule = new Graticule({
map: new Map({}),
showLabels: true,
@@ -98,15 +103,14 @@ describe('ol.Graticule', function() {
graticule.createGraticule_(extent, [0, 0], resolution, squaredTolerance);
expect(graticule.meridiansLabels_[0].text).to.be('lon: 0');
expect(graticule.parallelsLabels_[0].text).to.be('lat: 0');
expect(graticule.lonLabelStyle_).to.eql(lonLabelStyle);
expect(graticule.latLabelStyle_).to.eql(latLabelStyle);
expect(graticule.lonLabelStyle_(feature).getText()).to.eql(lonLabelStyle);
expect(graticule.latLabelStyle_(feature).getText()).to.eql(latLabelStyle);
expect(graticule.lonLabelPosition_).to.be(0.9);
expect(graticule.latLabelPosition_).to.be(0.1);
});
it('can be configured with interval limits', function() {
graticule = new Graticule({
map: new Map({}),
showLabels: true,
lonLabelFormatter: function(lon) {
return lon.toString();
@@ -116,6 +120,9 @@ describe('ol.Graticule', function() {
},
intervals: [10]
});
new Map({
layers: [graticule]
});
const extent = [-25614353.926475704, -7827151.696402049,
25614353.926475704, 7827151.696402049];
const projection = getProjection('EPSG:3857');