Merge pull request #2167 from elemoine/graticule
Add a Graticule component
This commit is contained in:
Marc Jansen
File diff suppressed because one or more lines are too long
@@ -0,0 +1,51 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
|
<title>Graticule example</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container">
|
||||||
|
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
|
||||||
|
<div class="span12">
|
||||||
|
<h4 id="title">Graticule example</h4>
|
||||||
|
<p id="shortdesc">This example shows how to add a graticule overlay to a map.</p>
|
||||||
|
<div id="docs">
|
||||||
|
<p>See the <a href="graticule.js" target="_blank">graticule.js source</a> to see how this is done.</p>
|
||||||
|
</div>
|
||||||
|
<div id="tags">graticule</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="jquery.min.js" type="text/javascript"></script>
|
||||||
|
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||||
|
<script src="loader.js?id=graticule" type="text/javascript"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
goog.require('ol.Graticule');
|
||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.View');
|
||||||
|
goog.require('ol.layer.Tile');
|
||||||
|
goog.require('ol.proj');
|
||||||
|
goog.require('ol.source.OSM');
|
||||||
|
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.OSM()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
renderer: 'canvas',
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View({
|
||||||
|
center: ol.proj.transform([4.8, 47.75], 'EPSG:4326', 'EPSG:3857'),
|
||||||
|
zoom: 5
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create the graticule component
|
||||||
|
var graticule = new ol.Graticule();
|
||||||
|
graticule.setMap(map);
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
|
<title>Sphere Mollweide example</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container">
|
||||||
|
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
|
||||||
|
<div class="span12">
|
||||||
|
<h4 id="title">Sphere Mollweide example</h4>
|
||||||
|
<p id="shortdesc">Example of a Sphere Mollweide map with a Graticule component.</p>
|
||||||
|
<div id="docs">
|
||||||
|
<p>See the <a href="sphere-mollweide.js" target="_blank">sphere-mollweide.js source</a> to see how this is done.</p>
|
||||||
|
</div>
|
||||||
|
<div id="tags">graticule, Mollweide, projection, proj4js</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="jquery.min.js" type="text/javascript"></script>
|
||||||
|
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||||
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
|
||||||
|
<script src="loader.js?id=sphere-mollweide" type="text/javascript"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
goog.require('ol.Graticule');
|
||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.View');
|
||||||
|
goog.require('ol.layer.Vector');
|
||||||
|
goog.require('ol.proj');
|
||||||
|
goog.require('ol.source.GeoJSON');
|
||||||
|
|
||||||
|
|
||||||
|
proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +
|
||||||
|
'+b=6371000 +units=m +no_defs');
|
||||||
|
|
||||||
|
// Configure the Sphere Mollweide projection object with an extent,
|
||||||
|
// and a world extent. These are required for the Graticule.
|
||||||
|
var sphereMollweideProjection = ol.proj.get('ESRI:53009');
|
||||||
|
sphereMollweideProjection.setExtent([
|
||||||
|
-9009954.605703328, -9009954.605703328,
|
||||||
|
9009954.605703328, 9009954.605703328]);
|
||||||
|
sphereMollweideProjection.setWorldExtent([-179, -90, 179, 90]);
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
keyboardEventTarget: document,
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Vector({
|
||||||
|
source: new ol.source.GeoJSON({
|
||||||
|
projection: sphereMollweideProjection,
|
||||||
|
url: 'data/geojson/countries-110m.geojson'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
],
|
||||||
|
renderer: 'canvas',
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View({
|
||||||
|
center: [0, 0],
|
||||||
|
projection: sphereMollweideProjection,
|
||||||
|
resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
|
||||||
|
zoom: 0
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
var graticule = new ol.Graticule({
|
||||||
|
map: map
|
||||||
|
});
|
||||||
+44
-1
@@ -106,6 +106,41 @@ olx.GeolocationOptions.prototype.projection;
|
|||||||
olx.LogoOptions;
|
olx.LogoOptions;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {{map: (ol.Map|undefined),
|
||||||
|
* maxLines: (number|undefined),
|
||||||
|
* targetSize: (number|undefined)}}
|
||||||
|
*/
|
||||||
|
olx.GraticuleOptions;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reference to an `ol.Map` object.
|
||||||
|
* @type {ol.Map|undefined}
|
||||||
|
*/
|
||||||
|
olx.GraticuleOptions.prototype.map;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The maximum number of meridians and parallels from the center of the
|
||||||
|
* map. The default value is 100, which means that at most 200 meridians
|
||||||
|
* and 200 parallels will be displayed. The default value is appropriate
|
||||||
|
* for conformal projections like Spherical Mercator. If you increase
|
||||||
|
* the value more lines will be drawn and the drawing performance will
|
||||||
|
* decrease.
|
||||||
|
* @type {number|undefined}
|
||||||
|
*/
|
||||||
|
olx.GraticuleOptions.prototype.maxLines;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The target size of the graticule cells, in pixels. Default
|
||||||
|
* value is 100 pixels.
|
||||||
|
* @type {number|undefined}
|
||||||
|
*/
|
||||||
|
olx.GraticuleOptions.prototype.targetSize;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Object literal with config options for the map.
|
* Object literal with config options for the map.
|
||||||
* @typedef {{controls: (ol.Collection|Array.<ol.control.Control>|undefined),
|
* @typedef {{controls: (ol.Collection|Array.<ol.control.Control>|undefined),
|
||||||
@@ -293,7 +328,8 @@ olx.OverlayOptions.prototype.insertFirst;
|
|||||||
* units: (ol.proj.Units|string),
|
* units: (ol.proj.Units|string),
|
||||||
* extent: (ol.Extent|undefined),
|
* extent: (ol.Extent|undefined),
|
||||||
* axisOrientation: (string|undefined),
|
* axisOrientation: (string|undefined),
|
||||||
* global: (boolean|undefined)}}
|
* global: (boolean|undefined),
|
||||||
|
* worldExtent: (ol.Extent|undefined)}}
|
||||||
* @api
|
* @api
|
||||||
*/
|
*/
|
||||||
olx.ProjectionOptions;
|
olx.ProjectionOptions;
|
||||||
@@ -334,6 +370,13 @@ olx.ProjectionOptions.prototype.axisOrientation;
|
|||||||
olx.ProjectionOptions.prototype.global;
|
olx.ProjectionOptions.prototype.global;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The world extent for the SRS.
|
||||||
|
* @type {ol.Extent|undefined}
|
||||||
|
*/
|
||||||
|
olx.ProjectionOptions.prototype.worldExtent;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Object literal with config options for the view.
|
* Object literal with config options for the view.
|
||||||
* @typedef {{center: (ol.Coordinate|undefined),
|
* @typedef {{center: (ol.Coordinate|undefined),
|
||||||
|
|||||||
@@ -0,0 +1,180 @@
|
|||||||
|
goog.provide('ol.geom.flat.geodesic');
|
||||||
|
|
||||||
|
goog.require('goog.asserts');
|
||||||
|
goog.require('goog.math');
|
||||||
|
goog.require('goog.object');
|
||||||
|
goog.require('ol.TransformFunction');
|
||||||
|
goog.require('ol.math');
|
||||||
|
goog.require('ol.proj');
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @param {function(number): ol.Coordinate} interpolate Interpolate function.
|
||||||
|
* @param {ol.TransformFunction} transform Transform from longitude/latitude to
|
||||||
|
* projected coordinates.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @return {Array.<number>} Flat coordinates.
|
||||||
|
*/
|
||||||
|
ol.geom.flat.geodesic.line_ =
|
||||||
|
function(interpolate, transform, squaredTolerance) {
|
||||||
|
// FIXME reduce garbage generation
|
||||||
|
// FIXME optimize stack operations
|
||||||
|
|
||||||
|
/** @type {Array.<number>} */
|
||||||
|
var flatCoordinates = [];
|
||||||
|
|
||||||
|
var geoA = interpolate(0);
|
||||||
|
var geoB = interpolate(1);
|
||||||
|
|
||||||
|
var a = transform(geoA);
|
||||||
|
var b = transform(geoB);
|
||||||
|
|
||||||
|
/** @type {Array.<ol.Coordinate>} */
|
||||||
|
var geoStack = [geoB, geoA];
|
||||||
|
/** @type {Array.<ol.Coordinate>} */
|
||||||
|
var stack = [b, a];
|
||||||
|
/** @type {Array.<number>} */
|
||||||
|
var fractionStack = [1, 0];
|
||||||
|
|
||||||
|
/** @type {Object.<number, boolean>} */
|
||||||
|
var fractions = {};
|
||||||
|
|
||||||
|
var maxIterations = 1e5;
|
||||||
|
var geoM, m, fracA, fracB, fracM, key;
|
||||||
|
|
||||||
|
while (--maxIterations > 0 && fractionStack.length > 0) {
|
||||||
|
// Pop the a coordinate off the stack
|
||||||
|
fracA = fractionStack.pop();
|
||||||
|
geoA = geoStack.pop();
|
||||||
|
a = stack.pop();
|
||||||
|
// Add the a coordinate if it has not been added yet
|
||||||
|
key = fracA.toString();
|
||||||
|
if (!goog.object.containsKey(fractions, key)) {
|
||||||
|
flatCoordinates.push(a[0], a[1]);
|
||||||
|
goog.object.set(fractions, key, true);
|
||||||
|
}
|
||||||
|
// Pop the b coordinate off the stack
|
||||||
|
fracB = fractionStack.pop();
|
||||||
|
geoB = geoStack.pop();
|
||||||
|
b = stack.pop();
|
||||||
|
// Find the m point between the a and b coordinates
|
||||||
|
fracM = (fracA + fracB) / 2;
|
||||||
|
geoM = interpolate(fracM);
|
||||||
|
m = transform(geoM);
|
||||||
|
if (ol.math.squaredSegmentDistance(m[0], m[1], a[0], a[1],
|
||||||
|
b[0], b[1]) < squaredTolerance) {
|
||||||
|
// If the m point is sufficiently close to the straight line, then we
|
||||||
|
// discard it. Just use the b coordinate and move on to the next line
|
||||||
|
// segment.
|
||||||
|
flatCoordinates.push(b[0], b[1]);
|
||||||
|
key = fracB.toString();
|
||||||
|
goog.asserts.assert(!goog.object.containsKey(fractions, key));
|
||||||
|
goog.object.set(fractions, key, true);
|
||||||
|
} else {
|
||||||
|
// Otherwise, we need to subdivide the current line segment. Split it
|
||||||
|
// into two and push the two line segments onto the stack.
|
||||||
|
fractionStack.push(fracB, fracM, fracM, fracA);
|
||||||
|
stack.push(b, m, m, a);
|
||||||
|
geoStack.push(geoB, geoM, geoM, geoA);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
goog.asserts.assert(maxIterations > 0);
|
||||||
|
|
||||||
|
return flatCoordinates;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a great-circle arcs between two lat/lon points.
|
||||||
|
* @param {number} lon1 Longitude 1 in degrees.
|
||||||
|
* @param {number} lat1 Latitude 1 in degrees.
|
||||||
|
* @param {number} lon2 Longitude 2 in degrees.
|
||||||
|
* @param {number} lat2 Latitude 2 in degrees.
|
||||||
|
* @param {ol.proj.Projection} projection Projection.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @return {Array.<number>} Flat coordinates.
|
||||||
|
*/
|
||||||
|
ol.geom.flat.geodesic.greatCircleArc = function(
|
||||||
|
lon1, lat1, lon2, lat2, projection, squaredTolerance) {
|
||||||
|
|
||||||
|
var geoProjection = ol.proj.get('EPSG:4326');
|
||||||
|
|
||||||
|
var cosLat1 = Math.cos(goog.math.toRadians(lat1));
|
||||||
|
var sinLat1 = Math.sin(goog.math.toRadians(lat1));
|
||||||
|
var cosLat2 = Math.cos(goog.math.toRadians(lat2));
|
||||||
|
var sinLat2 = Math.sin(goog.math.toRadians(lat2));
|
||||||
|
var cosDeltaLon = Math.cos(goog.math.toRadians(lon2 - lon1));
|
||||||
|
var sinDeltaLon = Math.sin(goog.math.toRadians(lon2 - lon1));
|
||||||
|
var d = sinLat1 * sinLat2 + cosLat1 * cosLat2 * cosDeltaLon;
|
||||||
|
|
||||||
|
return ol.geom.flat.geodesic.line_(
|
||||||
|
/**
|
||||||
|
* @param {number} frac Fraction.
|
||||||
|
* @return {ol.Coordinate} Coordinate.
|
||||||
|
*/
|
||||||
|
function(frac) {
|
||||||
|
if (1 <= d) {
|
||||||
|
return [lon2, lat2];
|
||||||
|
}
|
||||||
|
var D = frac * Math.acos(d);
|
||||||
|
var cosD = Math.cos(D);
|
||||||
|
var sinD = Math.sin(D);
|
||||||
|
var y = sinDeltaLon * cosLat2;
|
||||||
|
var x = cosLat1 * sinLat2 - sinLat1 * cosLat2 * cosDeltaLon;
|
||||||
|
var theta = Math.atan2(y, x);
|
||||||
|
var lat = Math.asin(sinLat1 * cosD + cosLat1 * sinD * Math.cos(theta));
|
||||||
|
var lon = goog.math.toRadians(lon1) +
|
||||||
|
Math.atan2(Math.sin(theta) * sinD * cosLat1,
|
||||||
|
cosD - sinLat1 * Math.sin(lat));
|
||||||
|
return [goog.math.toDegrees(lon), goog.math.toDegrees(lat)];
|
||||||
|
}, ol.proj.getTransform(geoProjection, projection), squaredTolerance);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a meridian (line at constant longitude).
|
||||||
|
* @param {number} lon Longitude.
|
||||||
|
* @param {number} lat1 Latitude 1.
|
||||||
|
* @param {number} lat2 Latitude 2.
|
||||||
|
* @param {ol.proj.Projection} projection Projection.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @return {Array.<number>} Flat coordinates.
|
||||||
|
*/
|
||||||
|
ol.geom.flat.geodesic.meridian =
|
||||||
|
function(lon, lat1, lat2, projection, squaredTolerance) {
|
||||||
|
var epsg4326Projection = ol.proj.get('EPSG:4326');
|
||||||
|
return ol.geom.flat.geodesic.line_(
|
||||||
|
/**
|
||||||
|
* @param {number} frac Fraction.
|
||||||
|
* @return {ol.Coordinate} Coordinate.
|
||||||
|
*/
|
||||||
|
function(frac) {
|
||||||
|
return [lon, lat1 + ((lat2 - lat1) * frac)];
|
||||||
|
},
|
||||||
|
ol.proj.getTransform(epsg4326Projection, projection), squaredTolerance);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a parallel (line at constant latitude).
|
||||||
|
* @param {number} lat Latitude.
|
||||||
|
* @param {number} lon1 Longitude 1.
|
||||||
|
* @param {number} lon2 Longitude 2.
|
||||||
|
* @param {ol.proj.Projection} projection Projection.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @return {Array.<number>} Flat coordinates.
|
||||||
|
*/
|
||||||
|
ol.geom.flat.geodesic.parallel =
|
||||||
|
function(lat, lon1, lon2, projection, squaredTolerance) {
|
||||||
|
var epsg4326Projection = ol.proj.get('EPSG:4326');
|
||||||
|
return ol.geom.flat.geodesic.line_(
|
||||||
|
/**
|
||||||
|
* @param {number} frac Fraction.
|
||||||
|
* @return {ol.Coordinate} Coordinate.
|
||||||
|
*/
|
||||||
|
function(frac) {
|
||||||
|
return [lon1 + ((lon2 - lon1) * frac), lat];
|
||||||
|
},
|
||||||
|
ol.proj.getTransform(epsg4326Projection, projection), squaredTolerance);
|
||||||
|
};
|
||||||
@@ -0,0 +1,427 @@
|
|||||||
|
goog.provide('ol.Graticule');
|
||||||
|
|
||||||
|
goog.require('goog.asserts');
|
||||||
|
goog.require('goog.math');
|
||||||
|
goog.require('ol.extent');
|
||||||
|
goog.require('ol.geom.LineString');
|
||||||
|
goog.require('ol.geom.flat.geodesic');
|
||||||
|
goog.require('ol.proj');
|
||||||
|
goog.require('ol.render.EventType');
|
||||||
|
goog.require('ol.style.Stroke');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @constructor
|
||||||
|
* @param {olx.GraticuleOptions=} opt_options Options.
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
ol.Graticule = function(opt_options) {
|
||||||
|
|
||||||
|
var options = goog.isDef(opt_options) ? opt_options : {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {ol.Map}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.map_ = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {ol.proj.Projection}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.projection_ = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.maxLat_ = Infinity;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.maxLon_ = Infinity;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.minLat_ = -Infinity;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.minLon_ = -Infinity;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.targetSize_ = goog.isDef(options.targetSize) ?
|
||||||
|
options.targetSize : 100;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {number}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.maxLines_ = goog.isDef(options.maxLines) ? options.maxLines : 100;
|
||||||
|
goog.asserts.assert(this.maxLines_ > 0);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {Array.<ol.geom.LineString>}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.meridians_ = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {Array.<ol.geom.LineString>}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.parallels_ = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO can be configurable
|
||||||
|
* @type {ol.style.Stroke}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.strokeStyle_ = new ol.style.Stroke({
|
||||||
|
color: 'rgba(0,0,0,0.2)'
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {ol.TransformFunction|undefined}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.fromLonLatTransform_ = undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {ol.TransformFunction|undefined}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.toLonLatTransform_ = undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {ol.Coordinate}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.projectionCenterLonLat_ = null;
|
||||||
|
|
||||||
|
this.setMap(goog.isDef(options.map) ? options.map : null);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO can be configurable
|
||||||
|
* @type {Array.<number>}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.intervals_ = [90, 45, 30, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1, 0.05,
|
||||||
|
0.01, 0.005, 0.002, 0.001];
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} lon Longitude.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @param {ol.Extent} extent Extent.
|
||||||
|
* @param {number} index Index.
|
||||||
|
* @return {number} Index.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.addMeridian_ =
|
||||||
|
function(lon, squaredTolerance, extent, index) {
|
||||||
|
var lineString = this.getMeridian_(lon, squaredTolerance, index);
|
||||||
|
if (ol.extent.intersects(lineString.getExtent(), extent)) {
|
||||||
|
this.meridians_[index++] = lineString;
|
||||||
|
}
|
||||||
|
return index;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} lat Latitude.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @param {ol.Extent} extent Extent.
|
||||||
|
* @param {number} index Index.
|
||||||
|
* @return {number} Index.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.addParallel_ =
|
||||||
|
function(lat, squaredTolerance, extent, index) {
|
||||||
|
var lineString = this.getParallel_(lat, squaredTolerance, index);
|
||||||
|
if (ol.extent.intersects(lineString.getExtent(), extent)) {
|
||||||
|
this.parallels_[index++] = lineString;
|
||||||
|
}
|
||||||
|
return index;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {ol.Extent} extent Extent.
|
||||||
|
* @param {ol.Coordinate} center Center.
|
||||||
|
* @param {number} resolution Resolution.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.createGraticule_ =
|
||||||
|
function(extent, center, resolution, squaredTolerance) {
|
||||||
|
|
||||||
|
var interval = this.getInterval_(resolution);
|
||||||
|
if (interval == -1) {
|
||||||
|
this.meridians_.length = this.parallels_.length = 0;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var centerLonLat = this.toLonLatTransform_(center);
|
||||||
|
var centerLon = centerLonLat[0];
|
||||||
|
var centerLat = centerLonLat[1];
|
||||||
|
var maxLines = this.maxLines_;
|
||||||
|
var cnt, idx, lat, lon;
|
||||||
|
|
||||||
|
// Create meridians
|
||||||
|
|
||||||
|
centerLon = Math.floor(centerLon / interval) * interval;
|
||||||
|
lon = goog.math.clamp(centerLon, this.minLon_, this.maxLon_);
|
||||||
|
|
||||||
|
idx = this.addMeridian_(lon, squaredTolerance, extent, 0);
|
||||||
|
|
||||||
|
cnt = 0;
|
||||||
|
while (lon != this.minLon_ && cnt++ < maxLines) {
|
||||||
|
lon = Math.max(lon - interval, this.minLon_);
|
||||||
|
idx = this.addMeridian_(lon, squaredTolerance, extent, idx);
|
||||||
|
}
|
||||||
|
|
||||||
|
lon = goog.math.clamp(centerLon, this.minLon_, this.maxLon_);
|
||||||
|
|
||||||
|
cnt = 0;
|
||||||
|
while (lon != this.maxLon_ && cnt++ < maxLines) {
|
||||||
|
lon = Math.min(lon + interval, this.maxLon_);
|
||||||
|
idx = this.addMeridian_(lon, squaredTolerance, extent, idx);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.meridians_.length = idx;
|
||||||
|
|
||||||
|
// Create parallels
|
||||||
|
|
||||||
|
centerLat = Math.floor(centerLat / interval) * interval;
|
||||||
|
lat = goog.math.clamp(centerLat, this.minLat_, this.maxLat_);
|
||||||
|
|
||||||
|
idx = this.addParallel_(lat, squaredTolerance, extent, 0);
|
||||||
|
|
||||||
|
cnt = 0;
|
||||||
|
while (lat != this.minLat_ && cnt++ < maxLines) {
|
||||||
|
lat = Math.max(lat - interval, this.minLat_);
|
||||||
|
idx = this.addParallel_(lat, squaredTolerance, extent, idx);
|
||||||
|
}
|
||||||
|
|
||||||
|
lat = goog.math.clamp(centerLat, this.minLat_, this.maxLat_);
|
||||||
|
|
||||||
|
cnt = 0;
|
||||||
|
while (lat != this.maxLat_ && cnt++ < maxLines) {
|
||||||
|
lat = Math.min(lat + interval, this.maxLat_);
|
||||||
|
idx = this.addParallel_(lat, squaredTolerance, extent, idx);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.parallels_.length = idx;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} resolution Resolution.
|
||||||
|
* @return {number} The interval in degrees.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.getInterval_ = function(resolution) {
|
||||||
|
var centerLon = this.projectionCenterLonLat_[0];
|
||||||
|
var centerLat = this.projectionCenterLonLat_[1];
|
||||||
|
var interval = -1;
|
||||||
|
var i, ii, delta, dist;
|
||||||
|
var target = Math.pow(this.targetSize_ * resolution, 2);
|
||||||
|
/** @type {Array.<number>} **/
|
||||||
|
var p1 = [];
|
||||||
|
/** @type {Array.<number>} **/
|
||||||
|
var p2 = [];
|
||||||
|
for (i = 0, ii = ol.Graticule.intervals_.length; i < ii; ++i) {
|
||||||
|
delta = ol.Graticule.intervals_[i] / 2;
|
||||||
|
p1[0] = centerLon - delta;
|
||||||
|
p1[1] = centerLat - delta;
|
||||||
|
p2[0] = centerLon + delta;
|
||||||
|
p2[1] = centerLat + delta;
|
||||||
|
this.fromLonLatTransform_(p1, p1);
|
||||||
|
this.fromLonLatTransform_(p2, p2);
|
||||||
|
dist = Math.pow(p2[0] - p1[0], 2) + Math.pow(p2[1] - p1[1], 2);
|
||||||
|
if (dist <= target) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
interval = ol.Graticule.intervals_[i];
|
||||||
|
}
|
||||||
|
return interval;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {ol.Map} The map.
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.getMap = function() {
|
||||||
|
return this.map_;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} lon Longitude.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @return {ol.geom.LineString} The meridian line string.
|
||||||
|
* @param {number} index Index.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.getMeridian_ = function(lon, squaredTolerance, index) {
|
||||||
|
goog.asserts.assert(lon >= this.minLon_);
|
||||||
|
goog.asserts.assert(lon <= this.maxLon_);
|
||||||
|
var flatCoordinates = ol.geom.flat.geodesic.meridian(lon,
|
||||||
|
this.minLat_, this.maxLat_, this.projection_, squaredTolerance);
|
||||||
|
goog.asserts.assert(flatCoordinates.length > 0);
|
||||||
|
var lineString = goog.isDef(this.meridians_[index]) ?
|
||||||
|
this.meridians_[index] : new ol.geom.LineString(null);
|
||||||
|
lineString.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);
|
||||||
|
return lineString;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Array.<ol.geom.LineString>} The meridians.
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.getMeridians = function() {
|
||||||
|
return this.meridians_;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} lat Latitude.
|
||||||
|
* @param {number} squaredTolerance Squared tolerance.
|
||||||
|
* @return {ol.geom.LineString} The parallel line string.
|
||||||
|
* @param {number} index Index.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.getParallel_ = function(lat, squaredTolerance, index) {
|
||||||
|
goog.asserts.assert(lat >= this.minLat_);
|
||||||
|
goog.asserts.assert(lat <= this.maxLat_);
|
||||||
|
var flatCoordinates = ol.geom.flat.geodesic.parallel(lat,
|
||||||
|
this.minLon_, this.maxLon_, this.projection_, squaredTolerance);
|
||||||
|
goog.asserts.assert(flatCoordinates.length > 0);
|
||||||
|
var lineString = goog.isDef(this.parallels_[index]) ?
|
||||||
|
this.parallels_[index] : new ol.geom.LineString(null);
|
||||||
|
lineString.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);
|
||||||
|
return lineString;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @return {Array.<ol.geom.LineString>} The parallels.
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.getParallels = function() {
|
||||||
|
return this.parallels_;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {ol.render.Event} e Event.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.handlePostCompose_ = function(e) {
|
||||||
|
var vectorContext = e.vectorContext;
|
||||||
|
var frameState = e.frameState;
|
||||||
|
var extent = frameState.extent;
|
||||||
|
var viewState = frameState.viewState;
|
||||||
|
var center = viewState.center;
|
||||||
|
var projection = viewState.projection;
|
||||||
|
var resolution = viewState.resolution;
|
||||||
|
var pixelRatio = frameState.pixelRatio;
|
||||||
|
var squaredTolerance =
|
||||||
|
resolution * resolution / (4 * pixelRatio * pixelRatio);
|
||||||
|
|
||||||
|
var updateProjectionInfo = goog.isNull(this.projection_) ||
|
||||||
|
!ol.proj.equivalent(this.projection_, projection);
|
||||||
|
|
||||||
|
if (updateProjectionInfo) {
|
||||||
|
this.updateProjectionInfo_(projection);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.createGraticule_(extent, center, resolution, squaredTolerance);
|
||||||
|
|
||||||
|
// Draw the lines
|
||||||
|
vectorContext.setFillStrokeStyle(null, this.strokeStyle_);
|
||||||
|
var i, l, line;
|
||||||
|
for (i = 0, l = this.meridians_.length; i < l; ++i) {
|
||||||
|
line = this.meridians_[i];
|
||||||
|
vectorContext.drawLineStringGeometry(line, null);
|
||||||
|
}
|
||||||
|
for (i = 0, l = this.parallels_.length; i < l; ++i) {
|
||||||
|
line = this.parallels_[i];
|
||||||
|
vectorContext.drawLineStringGeometry(line, null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {ol.proj.Projection} projection Projection.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.updateProjectionInfo_ = function(projection) {
|
||||||
|
goog.asserts.assert(!goog.isNull(projection));
|
||||||
|
|
||||||
|
var extent = projection.getExtent();
|
||||||
|
var worldExtent = projection.getWorldExtent();
|
||||||
|
var maxLat = worldExtent[3];
|
||||||
|
var maxLon = worldExtent[2];
|
||||||
|
var minLat = worldExtent[1];
|
||||||
|
var minLon = worldExtent[0];
|
||||||
|
|
||||||
|
goog.asserts.assert(!goog.isNull(extent));
|
||||||
|
goog.asserts.assert(goog.isDef(maxLat));
|
||||||
|
goog.asserts.assert(goog.isDef(maxLon));
|
||||||
|
goog.asserts.assert(goog.isDef(minLat));
|
||||||
|
goog.asserts.assert(goog.isDef(minLon));
|
||||||
|
|
||||||
|
this.maxLat_ = maxLat;
|
||||||
|
this.maxLon_ = maxLon;
|
||||||
|
this.minLat_ = minLat;
|
||||||
|
this.minLon_ = minLon;
|
||||||
|
|
||||||
|
var epsg4326Projection = ol.proj.get('EPSG:4326');
|
||||||
|
|
||||||
|
this.fromLonLatTransform_ = ol.proj.getTransform(
|
||||||
|
epsg4326Projection, projection);
|
||||||
|
|
||||||
|
this.toLonLatTransform_ = ol.proj.getTransform(
|
||||||
|
projection, epsg4326Projection);
|
||||||
|
|
||||||
|
this.projectionCenterLonLat_ = this.toLonLatTransform_(
|
||||||
|
ol.extent.getCenter(extent));
|
||||||
|
|
||||||
|
this.projection_ = projection;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {ol.Map} map Map.
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
ol.Graticule.prototype.setMap = function(map) {
|
||||||
|
if (!goog.isNull(this.map_)) {
|
||||||
|
this.map_.un(ol.render.EventType.POSTCOMPOSE,
|
||||||
|
this.handlePostCompose_, this);
|
||||||
|
this.map_.render();
|
||||||
|
}
|
||||||
|
if (!goog.isNull(map)) {
|
||||||
|
map.on(ol.render.EventType.POSTCOMPOSE,
|
||||||
|
this.handlePostCompose_, this);
|
||||||
|
map.render();
|
||||||
|
}
|
||||||
|
this.map_ = map;
|
||||||
|
};
|
||||||
@@ -23,7 +23,8 @@ ol.proj.EPSG3857_ = function(code) {
|
|||||||
code: code,
|
code: code,
|
||||||
units: ol.proj.Units.METERS,
|
units: ol.proj.Units.METERS,
|
||||||
extent: ol.proj.EPSG3857.EXTENT,
|
extent: ol.proj.EPSG3857.EXTENT,
|
||||||
global: true
|
global: true,
|
||||||
|
worldExtent: ol.proj.EPSG3857.WORLD_EXTENT
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
goog.inherits(ol.proj.EPSG3857_, ol.proj.Projection);
|
goog.inherits(ol.proj.EPSG3857_, ol.proj.Projection);
|
||||||
@@ -61,6 +62,13 @@ ol.proj.EPSG3857.EXTENT = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @const
|
||||||
|
* @type {ol.Extent}
|
||||||
|
*/
|
||||||
|
ol.proj.EPSG3857.WORLD_EXTENT = [-180, -85, 180, 85];
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Lists several projection codes with the same meaning as EPSG:3857.
|
* Lists several projection codes with the same meaning as EPSG:3857.
|
||||||
*
|
*
|
||||||
|
|||||||
@@ -26,7 +26,8 @@ ol.proj.EPSG4326_ = function(code, opt_axisOrientation) {
|
|||||||
units: ol.proj.Units.DEGREES,
|
units: ol.proj.Units.DEGREES,
|
||||||
extent: ol.proj.EPSG4326.EXTENT,
|
extent: ol.proj.EPSG4326.EXTENT,
|
||||||
axisOrientation: opt_axisOrientation,
|
axisOrientation: opt_axisOrientation,
|
||||||
global: true
|
global: true,
|
||||||
|
worldExtent: ol.proj.EPSG4326.EXTENT
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
goog.inherits(ol.proj.EPSG4326_, ol.proj.Projection);
|
goog.inherits(ol.proj.EPSG4326_, ol.proj.Projection);
|
||||||
|
|||||||
@@ -86,6 +86,13 @@ ol.proj.Projection = function(options) {
|
|||||||
*/
|
*/
|
||||||
this.extent_ = goog.isDef(options.extent) ? options.extent : null;
|
this.extent_ = goog.isDef(options.extent) ? options.extent : null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @type {ol.Extent}
|
||||||
|
*/
|
||||||
|
this.worldExtent_ = goog.isDef(options.worldExtent) ?
|
||||||
|
options.worldExtent : null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
* @type {string}
|
* @type {string}
|
||||||
@@ -148,6 +155,16 @@ ol.proj.Projection.prototype.getMetersPerUnit = function() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the world extent for this projection.
|
||||||
|
* @return {ol.Extent} Extent.
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
ol.proj.Projection.prototype.getWorldExtent = function() {
|
||||||
|
return this.worldExtent_;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the axis orientation of this projection.
|
* Get the axis orientation of this projection.
|
||||||
* Example values are:
|
* Example values are:
|
||||||
@@ -198,6 +215,17 @@ ol.proj.Projection.prototype.setExtent = function(extent) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the world extent for this projection.
|
||||||
|
* @param {ol.Extent} worldExtent World extent
|
||||||
|
* [minlon, minlat, maxlon, maxlat].
|
||||||
|
* @api
|
||||||
|
*/
|
||||||
|
ol.proj.Projection.prototype.setWorldExtent = function(worldExtent) {
|
||||||
|
this.worldExtent_ = worldExtent;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the resolution of the point in degrees. For projections with degrees as
|
* Get the resolution of the point in degrees. For projections with degrees as
|
||||||
* the unit this will simply return the provided resolution. For other
|
* the unit this will simply return the provided resolution. For other
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
goog.provide('ol.test.Graticule');
|
||||||
|
|
||||||
|
describe('ol.Graticule', function() {
|
||||||
|
var graticule;
|
||||||
|
|
||||||
|
beforeEach(function() {
|
||||||
|
graticule = new ol.Graticule({
|
||||||
|
map: new ol.Map({})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#createGraticule', function() {
|
||||||
|
it('creates the graticule', function() {
|
||||||
|
var extent = [-25614353.926475704, -7827151.696402049,
|
||||||
|
25614353.926475704, 7827151.696402049];
|
||||||
|
var projection = ol.proj.get('EPSG:3857');
|
||||||
|
var resolution = 39135.75848201024;
|
||||||
|
var squaredTolerance = resolution * resolution / 4.0;
|
||||||
|
graticule.updateProjectionInfo_(projection);
|
||||||
|
graticule.createGraticule_(extent, [0, 0], resolution, squaredTolerance);
|
||||||
|
expect(graticule.getMeridians().length).to.be(13);
|
||||||
|
expect(graticule.getParallels().length).to.be(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
goog.require('ol.Graticule');
|
||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.proj');
|
||||||
Reference in New Issue
Block a user