Dynamic grid implementation for OpenLayers.
Renders a regular grid of points within the current view extents. Intended for use as part of advanced snapping controls.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v10.4.0/ol/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v10.4.0/ol/dist/ol.js"></script>
<script src="https://github.com/symbioquine/ol-grid/releases/download/v2.0.0/ol-grid.umd.js"></script>
<title>OpenLayers ol-grid example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 20
})
});
map.addInteraction(new olGrid({ originCoordinate: [5, 0], rotationAnchorCoordinate: [1, 1], xGridSize: 5, yGridSize: 10, }));
</script>
</body>
</html>npm i ol-gridimport Grid from 'ol-grid';
...
map.addInteraction(new olGrid());Type: Object
originCoordinateol.Coordinate? origin coordinate for the gridrotationAnchorCoordinateol.Coordinate? coordinate describing the rotation of the gridxGridSizenumber? the x grid size. If the origin point and rotation anchor point have the same latitude, then this sets the horizontal (width) of the grid cells.yGridSizenumber? the y grid size. If the origin point and rotation anchor point have the same latitude, then this sets the vertical (height) of the grid cells.maxPointsPerSidenumber? the max number of points per side. Controls the maximum number of points to be drawn on the screen at one time.styleol.style.StyleLike? grid point style
Extends Interaction
opt_optionsOptions? Options.
Get a feature containing the current grid points. Callers should not modify the feature or its geometry, but may use it to modify the behavior of the map - such as adding it to a Snap interaction. The feature geometry is empty when the grid is not active.
Returns Feature grid feature with a single MultiPoint geometry.
Set the origin coordinate for the grid.
originCoordinateol.Coordinate Coordinate.
Set the rotation anchor coordinate used to control how the rid is rotated.
rotationAnchorCoordinateol.Coordinate Coordinate.
Set the x grid size. If the origin point and rotation anchor point have the same latitude, then this sets the horizontal (width) of the grid cells.
xGridSizenumber number in map units.
Set the y grid size. If the origin point and rotation anchor point have the same latitude, then this sets the vertical (height) of the grid cells.
yGridSizenumber number in map units.
Set the max number of points per side. Controls the maximum number of points to be drawn on the screen at one time.
maxPointsPerSidenumber number of points per side.
Set the style of the grid points.
styleol.style.StyleLike of the grid points.
mapol.PluggableMap Map.
Type: Interaction.InteractionOptions
npm install - Install JavaScript dependencies in ./node_modules and create
package-lock.json.
npm run dev - Start a Webpack development server at https://localhost:8080
which will live-update as code is changed during development.
npm run build - Generate the final build artifacts.