UNPKG

openlayers

Version:

Build tools and sources for developing OpenLayers based mapping applications

533 lines (445 loc) 14.2 kB
goog.provide('ol.Graticule'); goog.require('ol'); goog.require('ol.extent'); goog.require('ol.geom.GeometryLayout'); goog.require('ol.geom.LineString'); goog.require('ol.geom.flat.geodesic'); goog.require('ol.math'); goog.require('ol.proj'); goog.require('ol.render.Event'); goog.require('ol.style.Stroke'); /** * Render a grid for a coordinate system on a map. * @constructor * @param {olx.GraticuleOptions=} opt_options Options. * @api */ ol.Graticule = function(opt_options) { var 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.maxLatP_ = Infinity; /** * @type {number} * @private */ this.maxLonP_ = Infinity; /** * @type {number} * @private */ this.minLatP_ = -Infinity; /** * @type {number} * @private */ this.minLonP_ = -Infinity; /** * @type {number} * @private */ this.targetSize_ = options.targetSize !== undefined ? options.targetSize : 100; /** * @type {number} * @private */ this.maxLines_ = options.maxLines !== undefined ? options.maxLines : 100; ol.DEBUG && console.assert(this.maxLines_ > 0, 'this.maxLines_ should be more than 0'); /** * @type {Array.<ol.geom.LineString>} * @private */ this.meridians_ = []; /** * @type {Array.<ol.geom.LineString>} * @private */ this.parallels_ = []; /** * @type {ol.style.Stroke} * @private */ this.strokeStyle_ = options.strokeStyle !== undefined ? options.strokeStyle : ol.Graticule.DEFAULT_STROKE_STYLE_; /** * @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(options.map !== undefined ? options.map : null); }; /** * @type {ol.style.Stroke} * @private * @const */ ol.Graticule.DEFAULT_STROKE_STYLE_ = new ol.style.Stroke({ color: 'rgba(0,0,0,0.2)' }); /** * 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} minLat Minimal latitude. * @param {number} maxLat Maximal latitude. * @param {number} squaredTolerance Squared tolerance. * @param {ol.Extent} extent Extent. * @param {number} index Index. * @return {number} Index. * @private */ ol.Graticule.prototype.addMeridian_ = function(lon, minLat, maxLat, squaredTolerance, extent, index) { var lineString = this.getMeridian_(lon, minLat, maxLat, squaredTolerance, index); if (ol.extent.intersects(lineString.getExtent(), extent)) { this.meridians_[index++] = lineString; } return index; }; /** * @param {number} lat Latitude. * @param {number} minLon Minimal longitude. * @param {number} maxLon Maximal longitude. * @param {number} squaredTolerance Squared tolerance. * @param {ol.Extent} extent Extent. * @param {number} index Index. * @return {number} Index. * @private */ ol.Graticule.prototype.addParallel_ = function(lat, minLon, maxLon, squaredTolerance, extent, index) { var lineString = this.getParallel_(lat, minLon, maxLon, 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; var validExtent = [ Math.max(extent[0], this.minLonP_), Math.max(extent[1], this.minLatP_), Math.min(extent[2], this.maxLonP_), Math.min(extent[3], this.maxLatP_) ]; validExtent = ol.proj.transformExtent(validExtent, this.projection_, 'EPSG:4326'); var maxLat = validExtent[3]; var maxLon = validExtent[2]; var minLat = validExtent[1]; var minLon = validExtent[0]; // Create meridians centerLon = Math.floor(centerLon / interval) * interval; lon = ol.math.clamp(centerLon, this.minLon_, this.maxLon_); idx = this.addMeridian_(lon, minLat, maxLat, squaredTolerance, extent, 0); cnt = 0; while (lon != this.minLon_ && cnt++ < maxLines) { lon = Math.max(lon - interval, this.minLon_); idx = this.addMeridian_(lon, minLat, maxLat, squaredTolerance, extent, idx); } lon = ol.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, minLat, maxLat, squaredTolerance, extent, idx); } this.meridians_.length = idx; // Create parallels centerLat = Math.floor(centerLat / interval) * interval; lat = ol.math.clamp(centerLat, this.minLat_, this.maxLat_); idx = this.addParallel_(lat, minLon, maxLon, squaredTolerance, extent, 0); cnt = 0; while (lat != this.minLat_ && cnt++ < maxLines) { lat = Math.max(lat - interval, this.minLat_); idx = this.addParallel_(lat, minLon, maxLon, squaredTolerance, extent, idx); } lat = ol.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, minLon, maxLon, 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; }; /** * Get the map associated with this graticule. * @return {ol.Map} The map. * @api */ ol.Graticule.prototype.getMap = function() { return this.map_; }; /** * @param {number} lon Longitude. * @param {number} minLat Minimal latitude. * @param {number} maxLat Maximal latitude. * @param {number} squaredTolerance Squared tolerance. * @return {ol.geom.LineString} The meridian line string. * @param {number} index Index. * @private */ ol.Graticule.prototype.getMeridian_ = function(lon, minLat, maxLat, squaredTolerance, index) { ol.DEBUG && console.assert(lon >= this.minLon_, 'lon should be larger than or equal to this.minLon_'); ol.DEBUG && console.assert(lon <= this.maxLon_, 'lon should be smaller than or equal to this.maxLon_'); var flatCoordinates = ol.geom.flat.geodesic.meridian(lon, minLat, maxLat, this.projection_, squaredTolerance); ol.DEBUG && console.assert(flatCoordinates.length > 0, 'flatCoordinates cannot be empty'); var lineString = this.meridians_[index] !== undefined ? this.meridians_[index] : new ol.geom.LineString(null); lineString.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates); return lineString; }; /** * Get the list of meridians. Meridians are lines of equal longitude. * @return {Array.<ol.geom.LineString>} The meridians. * @api */ ol.Graticule.prototype.getMeridians = function() { return this.meridians_; }; /** * @param {number} lat Latitude. * @param {number} minLon Minimal longitude. * @param {number} maxLon Maximal longitude. * @param {number} squaredTolerance Squared tolerance. * @return {ol.geom.LineString} The parallel line string. * @param {number} index Index. * @private */ ol.Graticule.prototype.getParallel_ = function(lat, minLon, maxLon, squaredTolerance, index) { ol.DEBUG && console.assert(lat >= this.minLat_, 'lat should be larger than or equal to this.minLat_'); ol.DEBUG && console.assert(lat <= this.maxLat_, 'lat should be smaller than or equal to this.maxLat_'); var flatCoordinates = ol.geom.flat.geodesic.parallel(lat, this.minLon_, this.maxLon_, this.projection_, squaredTolerance); ol.DEBUG && console.assert(flatCoordinates.length > 0, 'flatCoordinates cannot be empty'); var lineString = this.parallels_[index] !== undefined ? this.parallels_[index] : new ol.geom.LineString(null); lineString.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates); return lineString; }; /** * Get the list of parallels. Pallels are lines of equal latitude. * @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 = !this.projection_ || !ol.proj.equivalent(this.projection_, projection); if (updateProjectionInfo) { this.updateProjectionInfo_(projection); } //Fix the extent if wrapped. //(note: this is the same extent as vectorContext.extent_) var offsetX = 0; if (projection.canWrapX()) { var projectionExtent = projection.getExtent(); var worldWidth = ol.extent.getWidth(projectionExtent); var x = frameState.focus[0]; if (x < projectionExtent[0] || x > projectionExtent[2]) { var worldsAway = Math.ceil((projectionExtent[0] - x) / worldWidth); offsetX = worldWidth * worldsAway; extent = [ extent[0] + offsetX, extent[1], extent[2] + offsetX, extent[3] ]; } } 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.drawLineString(line, null); } for (i = 0, l = this.parallels_.length; i < l; ++i) { line = this.parallels_[i]; vectorContext.drawLineString(line, null); } }; /** * @param {ol.proj.Projection} projection Projection. * @private */ ol.Graticule.prototype.updateProjectionInfo_ = function(projection) { var epsg4326Projection = ol.proj.get('EPSG:4326'); var extent = projection.getExtent(); var worldExtent = projection.getWorldExtent(); var worldExtentP = ol.proj.transformExtent(worldExtent, epsg4326Projection, projection); var maxLat = worldExtent[3]; var maxLon = worldExtent[2]; var minLat = worldExtent[1]; var minLon = worldExtent[0]; var maxLatP = worldExtentP[3]; var maxLonP = worldExtentP[2]; var minLatP = worldExtentP[1]; var minLonP = worldExtentP[0]; ol.DEBUG && console.assert(maxLat !== undefined, 'maxLat should be defined'); ol.DEBUG && console.assert(maxLon !== undefined, 'maxLon should be defined'); ol.DEBUG && console.assert(minLat !== undefined, 'minLat should be defined'); ol.DEBUG && console.assert(minLon !== undefined, 'minLon should be defined'); ol.DEBUG && console.assert(maxLatP !== undefined, 'projected maxLat should be defined'); ol.DEBUG && console.assert(maxLonP !== undefined, 'projected maxLon should be defined'); ol.DEBUG && console.assert(minLatP !== undefined, 'projected minLat should be defined'); ol.DEBUG && console.assert(minLonP !== undefined, 'projected minLon should be defined'); this.maxLat_ = maxLat; this.maxLon_ = maxLon; this.minLat_ = minLat; this.minLon_ = minLon; this.maxLatP_ = maxLatP; this.maxLonP_ = maxLonP; this.minLatP_ = minLatP; this.minLonP_ = minLonP; 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; }; /** * Set the map for this graticule. The graticule will be rendered on the * provided map. * @param {ol.Map} map Map. * @api */ ol.Graticule.prototype.setMap = function(map) { if (this.map_) { this.map_.un(ol.render.Event.Type.POSTCOMPOSE, this.handlePostCompose_, this); this.map_.render(); } if (map) { map.on(ol.render.Event.Type.POSTCOMPOSE, this.handlePostCompose_, this); map.render(); } this.map_ = map; };