1.1.7 • Published 3 years ago

ol-grid v1.1.7

Weekly downloads
547
License
MIT
Repository
github
Last release
3 years ago

ol-grid

Licence Release Last commit

Dynamic grid implementation for OpenLayers 6.

Renders a regular grid of points within the current view extents. Intended for use as part of advanced snapping controls.

image

Getting started

All-in-one example

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <script src="https://github.com/symbioquine/ol-grid/releases/download/v1.1.7/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>

Via NPM

npm i ol-grid
import Grid from 'ol-grid';

...

map.addInteraction(new olGrid());

API

Table of Contents

Options

Type: Object

Properties

  • originCoordinate ol.Coordinate? origin coordinate for the grid
  • rotationAnchorCoordinate ol.Coordinate? coordinate describing the rotation of the grid
  • xGridSize number? 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.
  • yGridSize number? 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.
  • maxPointsPerSide number? the max number of points per side. Controls the maximum number of points to be drawn on the screen at one time.
  • style ol.style.StyleLike? grid point style

Grid

Extends Interaction

Parameters

getGridFeature

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.

setOriginPoint

Set the origin coordinate for the grid.

Parameters
  • originCoordinate ol.Coordinate Coordinate.

setRotationControlPoint

Set the rotation anchor coordinate used to control how the rid is rotated.

Parameters
  • rotationAnchorCoordinate ol.Coordinate Coordinate.

setXGridSize

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.

Parameters
  • xGridSize number number in map units.

setYGridSize

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.

Parameters
  • yGridSize number number in map units.

setMaxPointsPerSide

Set the max number of points per side. Controls the maximum number of points to be drawn on the screen at one time.

Parameters
  • maxPointsPerSide number number of points per side.

setStyle

Set the style of the grid points.

Parameters
  • style ol.style.StyleLike of the grid points.

setMap

Parameters
  • map ol.PluggableMap Map.

changed

Type: Interaction.InteractionOptions

Development

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.

@zalastax/nolb-ol@everything-registry/sub-chunk-2373@farmos.org/farmos-map
1.1.7

3 years ago

1.1.6

5 years ago

1.1.4

5 years ago