一、图层

1.1、瓦片图层

1.1.1 WMS图层
1.1.2 WMTS图层
1.1.3 在线图层
1.1.4 XYZ瓦片图层

1.2、矢量图层

1.2.1 WFS图层
1.2.2 矢量图层展示
1.2.3 矢量特征处理
1.2.4 矢量特征绘制
1.2.5 矢量特征选取、操作、更新
1.2.6 矢量特征动画

1.3、标注和聚合图层

1.4、Raster图层

1.5、其他图层

1.6、图层控制

二、地图

2.1、地图控件

2.2、地图交互

2.3、地图覆盖

2.4、地图事件

2.5、地图视角

2.6、地图定位

2.7、投影坐标系

三、第三方集成

四、其他


一、图层

1.1、瓦片图层

1.1.1 [WMS图层(#wms-layer)
  • Tiled WMS (wms-tiled.html)
    Example of a tiled WMS layer.
    WMS can be used as a Tile layer, as shown here, or as an Image layer, as shown in the Single Image WMS example example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography.
  • Tiled WMS Wrapping (wms-tiled-wrap-180.html)
    Example of a tiled WMS layer that wraps across the 180° meridian.
    By default, WMS tiles are reused across the 180° meridian. This behavior can be disabled by setting the wrapX option to false.
  • Custom Tiled WMS (wms-custom-proj.html)
    Example of using custom coordinate transform functions.
    With addCoordinateTransforms(), custom coordinate transform functions can be added to configured projections.
  • WMS 512x256 Tiles (wms-custom-tilegrid-512x256.html)
    Example of a WMS layer with 512x256px tiles.
    WMS can serve arbitrary tile sizes. This example uses a custom tile grid with non-square tiles.
  • WMS Capabilities Parsing (wms-capabilities.html)/
    Example of parsing a WMS GetCapabilities response./
    This example shows the contents of the result object from parsing a WMS capabilities response.
  • WMS GetFeatureInfo (Image Layer) (getfeatureinfo-image.html)
    Using an image WMS source with GetFeatureInfo requests
    This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent pixel on the map.
  • WMS GetFeatureInfo (Tile Layer) (getfeatureinfo-tile.html)
    Issuing GetFeatureInfo requests with a WMS tiled source
    This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent pixel on the map.
  • WMS GetFeatureInfo (Layers) (getfeatureinfo-layers.html)
    Shows how to fetch features per layer name in a single WMS GetFeatureInfo request
    Demonstrates the use of the layers option in the ol/format/WMSGetFeatureInfo format object, which allows features returned by a single WMS GetFeatureInfo request that asks for more than one layer to be read by layer name.
  • WMS without Projection (wms-no-proj.html)
    Example of two WMS layers using the projection EPSG:21781, which is unknown to the client.
    As long as no coordinate transformations are required, OpenLayers works fine with projections that are only configured with a code and units.
  • Single Image WMS (wms-image.html)
    Example of a single image WMS layer.
    WMS can be used as an Image layer, as shown here, or as a Tile layer, as shown in the Tiled WMS example example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography.
  • WMS Time (wms-time.html)
    Example of smooth tile transitions when changing the time dimension of a tiled WMS layer.
    Demonstrates smooth reloading of layers when changing the time dimension continuously. Data shown: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity.
1.1.2 WMTS图层
  • WMTS (wmts.html)
    Example of a WMTS source.
    This example shows how to manually create the configuration for accessing a WMTS. The WMTS Layer from capabilities example shows how to create the configuration from a GetCapabilities response.
  • WMTS Layer from Capabilities (wmts-layer-from-capabilities.html)
    Example of a WMTS source created from a WMTS capabilities document.
    This example shows how to create the configuration for accessing a WMTS from a GetCapabilities response. The WMTS example shows how to create the configuration manually.
  • WMTS Capabilities Parsing (wmts-capabilities.html)
    Example of parsing a WMTS GetCapabilities response.
    This example shows the contents of the result object from parsing a WMTS capabilities response.
  • WMTS Tile Transitions (wmts-dimensions.html)
    Example of smooth tile transitions when changing the dimension of a WMTS layer.
    Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from SCALGO, underlying data from CGIAR-CSI SRTM) where cells that are flooded if the sea-level rises to more than x m are colored blue. The user selects the sea-level dimension using a slider.
  • IGN WMTS (wmts-ign.html)
    Demonstrates displaying IGN (France) WMTS layers.
    In this example an IGN WMTS layer is displayed. For more information on IGN's WMTS service see the IGN Géoportail API web page and Descriptif technique des web services du Géoportail (french).
  • High DPI WMTS (wmts-hidpi.html)
    Example of a WMTS based HiDPI layer.
    The WMTS source has a tilePixelRatio option. A HiDPI capable WMTS could provide tiles with 512x512 pixel tiles, but use them in a 256x256 pixel tile grid. In this case tilePixelRatio needs to be set to 2.
1.1.3 在线图层
  • Bing Maps (bing-maps.html)
    Example of a Bing Maps layer.
    When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set maxZoom to 19 in the options passed to ol/source/BingMaps.
  • CartoDB source example (cartodb.html)
    Example of a cartodb map.
    A simple example with an anonymous cartodb map
  • OSM Map (simple.html)
    Example of a simple map.
    A simple map with an OSM source.
  • Stamen Tiles (stamen.html)
    Example of a Stamen tile source.
    Two layers are composed: the watercolor base layer with the terrain labels.
  • HERE Map Tile API (here-maps.html)
    Example of a map with map tiles from HERE.
    HERE Map Tile API used with ol/source/XYZ.
    Be sure to respect the HERE Service Terms when using their tile API.
  • Tiled Arcgis MapServer (arcgis-tiled.html)
    Example of a tiled ArcGIS layer.
    This example shows how to use an ArcGIS REST MapService as tiles. This source type supports Map and Image Services. For cached ArcGIS services, better performance is available by using ol/source/XYZ instead.
  • Image ArcGIS MapServer (arcgis-image.html)
    Example of an image ArcGIS layer.
    This example shows how to use a dynamic ArcGIS REST MapService. This source type supports Map and Image Services. For dyamic ArcGIS services.
  • ArcGIS REST Feature Service (vector-esri.html)
    Example of using an ArcGIS REST Feature Service with a Tile strategy.
    This example loads new features from ArcGIS REST Feature Service when the view extent changes.\
  • Editable ArcGIS REST Feature Service (vector-esri-edit.html)
    Example of using an ArcGIS REST Feature Service in an editing application.
    This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
  • Mapbox Vector Tiles (mapbox-vector-tiles.html)
    Example of a Mapbox vector tiles map.
    A simple vector tiles map. Note: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
1.1.4 XYZ瓦片图层
  • XYZ (xyz.html)
    Example of a XYZ source.
    The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates.
  • XYZ Esri (xyz-esri.html)
    Example of a XYZ source using Esri tiles.
    ArcGIS REST tile services are supported by ol/source/XYZ.
  • XYZ Retina Tiles (xyz-retina.html)
    Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.
    The XYZ source accepts a tilePixelRatio option. The tiles were prepared from a GeoTIFF file with MapTiler.
  • ArcGIS REST with 512x512 Tiles (xyz-esri-4326-512.html)
    Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.
    ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by ol/source/XYZ. A custom tile url function is used to handle zoom level offsets.

1.2、矢量图层

1.2.1 WFS图层
  • WFS (vector-wfs.html)
    Example of using WFS with a BBOX strategy.
    This example loads new features from GeoServer WFS when the view extent changes.
  • WFS - GetFeature (vector-wfs-getfeature.html)
    Example of making a WFS GetFeature request with a filter.
    This example generates a GetFeature request which uses a PropertyIsEqualTo and a PropertyIsLike filter, and then posts the request to load the features that match the query.
1.2.2 矢量图层展示
  • Earthquakes with custom symbols (earthquake-custom-symbol.html)
    Demonstrates the use of toCanvas to create custom icon symbols.
    This example parses a KML file and renders the features as a vector layer. The layer is given a style that renders earthquake locations with a custom lightning symbol and a size relative to their magnitude.
  • Earthquakes Heatmap (heatmap-earthquakes.html)
    Demonstrates the use of a heatmap layer.
    This example parses a KML file and renders the features as a ol/layer/Heatmap layer.
  • Earthquake Clusters (earthquake-clusters.html)
    Demonstrates the use of style geometries to render source features of a cluster.
    This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.
    To achieve this, we make heavy use of style functions.
  • Earthquakes in KML (kml-earthquakes.html)
    Demonstrates the use of a Shape symbolizer to render earthquake locations.
    This example parses a KML file and renders the features as a vector layer. The layer is given a style that renders earthquake locations with a size relative to their magnitude.
  • GeoJSON (geojson.html)
    Example of GeoJSON features.
    Example of GeoJSON features.
  • TileJSON (tilejson.html)
    Example of a TileJSON layer.
  • TopoJSON (topojson.html)
    Demonstrates rendering of features from a TopoJSON topology.
    This example uses a vector layer with ol/format/TopoJSON for rendering features from TopoJSON.
  • Image Vector Layer (image-vector-layer.html)
    Example of an image vector layer.
    This example uses ol/layer/Vector with renderMode: 'image'. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.
  • GPX Data (gpx.html)
    Example of using the GPX source.
    Example of using the GPX source.
  • IGC Data (igc.html)
    Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
    The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from OpenCycleMap.
  • KML (kml.html)
    Rendering KML with a vector source.
    This example uses the ol/format/KML to parse KML for rendering with a vector source.
  • Timezones in KML (kml-timezones.html)
    Demonstrates rendering timezones from KML.
    This example parses a KML file and renders the features as a vector layer. The layer is given a ol/style/Style that fills timezones yellow with an opacity calculated based on the current offset to local noon.
  • WKT (wkt.html)
    Example of using the WKT parser.
    Create features from geometries in WKT (Well Known Text) format.
  • Custom Polygon Styles (polygon-styles.html)
    Showing the vertices of a polygon with a custom style geometry.
    In this example two different styles are created for the polygons:
    The first style is for the polygons themselves.
    The second style is to draw the vertices of the polygons.
  • Regular Shapes (regularshape.html)
    Example of some Regular Shape styles.
  • Tissot Indicatrix (tissot.html)
    Draw Tissot's indicatrices on maps.
  • Synthetic Lines (synthetic-lines.html)
    Synthetic lines example.
  • Synthetic Points (synthetic-points.html)
    Synthetic points example.
  • Vector Layer (vector-layer.html)
    Example of a countries vector layer with country information.
    The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click.
  • OSM XML (vector-osm.html)
    Example of using the OSM XML source.
    OSM XML vector data is loaded dynamically from a the Overpass API using a bbox strategy. Note that panning and zooming will eventually lead to "Too many requests" errors from the Overpass API.
  • Fractal Rendering (fractal.html)
    Example of a fractal.
    This example demonstrates how features with many vertices can be efficiently rendered.
  • Icon Symbolizer (icon.html)
    Example using an icon to symbolize a point.
    Example using an icon to symbolize a point.
  • OSM Vector Tiles (osm-vector-tiles.html)
    Using OpenStreetMap vector tiles.
    A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's layerName option to determine the layer ("water", "roads", "buildings") for styling. Note: [ol/format/MVT] is an even more efficient format for vector tiles.
1.2.3 矢量特征处理
  • Smoothing lines using Chaikins algorithm (chaikin.html)
    This uses Chaikins algorithm to smooth drawn lines.
    This example uses the npm package chaikin-smooth which implements Chaikins algorithm to smooth drawn lines. Start by drawing on the map. Once you finish a drawing, the feature's geometry will be smoothed as configured via the form elements.
  • Icon Colors (icon-color.html)
    Example assigning a custom color to an icon.
    Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file. Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the ol/style/Icon must be configured with crossOrigin: 'anonymous'.
  • Styling feature with CanvasGradient or CanvasPattern (canvas-gradient-pattern.html)
    Example showing the countries vector layer styled with patterns and gradients.
    This example creates a CanvasPattern and a CanvasGradient. The countries are loaded from a GeoJSON file. A style function determines for each country whether to use a fill with the CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles). Note: For seamless repeat patterns, image width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
1.2.4 矢量特征绘制
  • Draw Features (draw-features.html)
    Example of using the ol/interaction/Draw interaction.
    Example of using the Draw interaction. Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines, polygons, and circles, hold the Shift key.
  • Freehand Drawing (draw-freehand.html)
    Example using the ol/interaction/Draw interaction in freehand mode.
    This example demonstrates the ol/interaction/Draw in freehand mode. During freehand drawing, points are added while dragging. Set freehand: true to enable freehand mode. Note that freehand mode can be conditionally enabled by using the freehandCondition option. For example to toggle freehand mode with the Shift key, use freehandCondition: shiftKeyOnly.
  • Draw Shapes (draw-shapes.html)
    Using the ol/interaction/Draw to create regular shapes
    This demonstrates the use of the geometryFunction option for the ol/interaction/Draw. Select a shape type from the dropdown above to start drawing. To activate freehand drawing, hold the Shift key. Square drawing is achieved by using type: 'Circle' type with a geometryFunction that creates a 4-sided regular polygon instead of a circle. Box drawing uses type: 'Circle' with a geometryFunction that creates a box-shaped polygon instead of a circle. Star drawing uses a custom geometry function that coverts a circle into a start using the center and radius provided by the draw interaction.
  • LineString Arrows (line-arrows.html)
    Example of drawing arrows for each line string segment.
    Example of drawing arrows for each line string segment.
1.2.5 矢量特征选取、操作、更新
  • Drag-and-Drop Image Vector (drag-and-drop-image-vector.html)
    Example of using the drag-and-drop interaction with image vector rendering.
    Example of using the drag-and-drop interaction with an ol/layer/Vector with renderMode: 'image'. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
  • Drag-and-Drop (drag-and-drop.html)
    Example of using the drag-and-drop interaction.
    Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map.
    There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
  • Draw and Modify Features (draw-and-modify-features.html)
    Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
    Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
  • Icon Pixel Operations (icon-negative.html)
    Canvas pixel operations on a point icon.
    Example using an icon to symbolize a point. Click on the icon to select it, and it will be rendered using its negative image.
  • Hit Tolerance (hit-tolerance.html)
    Example using the hitTolerance parameter.
    By default, the map.forEachFeatureAtPixel() function only considers features that are directly under the provided pixel. This can make it difficult to interact with features on touch devices. To consider features within some distance of the provided pixel, use the hitTolerance option. For example, map.forEachFeatureAtPixel(pixel, callback, {hitTolerance: 3}) will call the callback with all features that are within three pixels of the provided pixel.
  • Modify Features (modify-features.html)
    Editing features with the modify interaction.
    This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing. Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (Shift+Click to select multiple features).
  • Select Features (select-features.html)
    Example of using the Select interaction.
    Choose between Single-click, Click, Hover and Alt+Click as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.
    Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.
    In this example, a listener is registered for the Select interaction's select event in order to update the selection status above.
  • Vector Tile Selection (vector-tile-selection.html)
    Select features from vector tiles.
    Click a rendered vector-tile feature to highlight it on the map. Click on an empty spot (ocean) to reset the selection. By changing the action type to "Multi Select" you can select multiple features at a time.
  • Editable ArcGIS REST Feature Service (vector-esri-edit.html)
    Example of using an ArcGIS REST Feature Service in an editing application.
    This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
  • Modify Features Test (modify-test.html)
    Example for testing feature modification.
    Example for testing feature modification.
  • Vector Labels (vector-labels.html)
    Example of GeoJSON features with labels.
    This example showcases a number of options that can be set on text styles. When "Text/Wrap" is chosen (for example for the line features), the label is wrapped by inserting the character \n, which will create a multi-line label. The "Open Sans" web font will be loaded on demand, to show dynamic font loading.
1.2.6 矢量特征动画
  • Marker Animation (feature-move-animation.html)
    Demonstrates how to move a feature along a line.
    This example shows how to use postcompose and vectorContext to animate a (marker) feature along a line. In this example an encoded polyline is being used.
  • Flight Animation (flight-animation.html)
    Demonstrates how to animate flights with ´postcompose´.
    This example shows how to use postcompose and vectorContext to animate flights. A great circle arc between two airports is calculated using arc.js and then the flight paths are animated with postcompose. The flight data is provided by OpenFlights (a simplified data set from the Mapbox.js documentation is used).
  • Custom Animation (feature-animation.html)
    Demonstrates how to animate features.
    This example shows how to use postcompose and vectorContext to animate features. Here we choose to do a flash animation each time a feature is added to the layer.

1.3、标注和聚合图层

1.4、Raster图层

  • Raster Source (raster.html)
    Demonstrates pixelwise operations with a raster source.
    This example uses a ol/source/Raster to generate data based on another source. The raster source accepts any number of input sources (tile or image based) and runs a pipeline of operations on the input pixels. The return from the final operation is used as the data for the output source.
    In this case, a single tiled source of imagery is used as input. For each pixel, the Vegetation Greenness Index (VGI) is calculated from the input pixels. A second operation colors those pixels based on a threshold value (values above the threshold are green and those below are transparent).
  • Region Growing (region-growing.html)
    Grow a region from a seed pixel
    Click a region on the map. The computed region will be red.
    This example uses a ol/source/Raster to generate data based on another source. The raster source accepts any number of input sources (tile or image based) and runs a pipeline of operations on the input data. The return from the final operation is used as the data for the output source.
    In this case, a single tiled source of imagery data is used as input. The region is calculated in a single "image" operation using the "seed" pixel provided by the user clicking on the map. The "threshold" value determines whether a given contiguous pixel belongs to the "region" - the difference between a candidate pixel's RGB values and the seed values must be below the threshold.
    This example also shows how an additional function can be made available to the operation.
  • Sea Level (sea-level.html)
    Render sea level at different elevations
    This example uses a ol/source/Raster with Mapbox Terrain-RGB tiles to "flood" areas below the elevation shown on the sea level slider.
  • Shaded Relief (shaded-relief.html)
    Calculate shaded relief from elevation data
    This example uses a ol/source/Raster to generate data based on another source. The raster source accepts any number of input sources (tile or image based) and runs a pipeline of operations on the input data. The return from the final operation is used as the data for the output source.
    In this case, a single tiled source of elevation data is used as input. The shaded relief is calculated in a single "image" operation. By setting operationType: 'image' on the raster source, operations are called with an ImageData object for each of the input sources. Operations are also called with a general purpose data object. In this example, the sun elevation and azimuth data from the inputs above are assigned to this data object and accessed in the shading operation. The shading operation returns an array of ImageData objects. When the raster source is used by an image layer, the first ImageData object returned by the last operation in the pipeline is used for rendering.

1.5、其他图层

  • Static Image (static-image.html)
    Example of a static image layer.
    This example uses a static image as a layer source. The map view is configured with a custom projection that translates image coordinates directly into map coordinates.
  • Symbols with WebGL (symbol-atlas-webgl.html)
    Using symbols in an atlas with WebGL.
    When using symbol styles with WebGL, OpenLayers would render the symbol on a temporary image and would create a WebGL texture for each image. For a better performance, it is recommended to use atlas images (similar to image sprites with CSS), so that the number of textures is reduced. OpenLayers provides an AtlasManager, which when passed to the constructor of a symbol style, will create atlases for the symbols.
  • Zoomify (zoomify.html)
    Example of a Zoomify source.
    Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. Internet Imaging Protocol (IIP) with JTL extension is also handled.
  • UTFGrid (utfgrid.html)
    This example shows how to read data from a UTFGrid source.
    Tiles made with TileMill. Hosting on MapBox.com or with open-source TileServer.

1.6、图层控制

  • Limited Layer Extent (layer-extent.html)
    Restricting layer rendering to a limited extent.
    This example uses the layer.setExtent() method to modify the extent of the overlay layer. Use the controls above to limit rendering based on an extent (approximate country bounds).
  • Layer Clipping (layer-clipping.html)
    Layer clipping example
    Layer clipping example
  • Layer Clipping with WebGL (layer-clipping-webgl.html)
    Layer WebGL clipping example.
    This example shows how to use the precompose and postcompose rendering hooks to clip layers using WebGL.
  • Layer Spy (layer-spy.html)
    View a portion of one layer over another
    Layer rendering can be manipulated in precompose and postcompose event listeners. These listeners get an event with a reference to the Canvas rendering context. In this example, the precompose listener sets a clipping mask around the most recent mouse position, giving you a spyglass effect for viewing one layer over another.
    Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.
  • Layer Z-Index (layer-z-index.html)
    Example of ordering layers using Z-index.
    There are are two managed layers (square and triangle) and one unmanaged layer (star).
    The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top.
  • Layer Swipe (layer-swipe.html)
    Example of a Layer swipe map.
    Example of a Layer swipe map.
  • Layer Min/Max Resolution (min-max-resolution.html)
    Show/hide layers depending on current view resolution.
    Zoom in twice: the MapBox layer should hide and the OSM layer should be shown.
    If you continue to zoom in, you'll see the OSM layer also disappear.
    The rendering of the layers are here controlled using minResolution and maxResolution options.
  • Reusable Source (reusable-source.html)
    Updating a tile source by changing the URL.
    You can call source.setUrl() to update the URL for a tile source. Note that when you change the URL for a tile source, existing tiles will not be replaced until new tiles are loaded. If you are interested instead in clearing currently rendered tiles, you can call the source.refresh() method. Alternatively, you can use two separate sources if you want to remove rendered tiles and start over loading new tiles.
  • Semi-Transparent Layer (semi-transparent-layer.html)
    Example of a map with a semi-transparent layer.
    This example will display a tiled MaxBox layer semi-transparently over an OSM background.
  • Tile Transitions (tile-transitions.html)
    Custom configuration for opacity transitions on tiles.
    By default tiles are rendered with an opacity transition - fading in over 250 ms. To disable this behavior, set the transition option of the tile source to 0.
  • Preload Tiles (preload.html)
    Example of tile preloading.
    The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.
  • Blend Modes (blend-modes.html)
    Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
    This example shows how to change the canvas compositing / blending mode in post- and precompose event handlers. The Canvas 2D API provides the property globalCompositeOperation with which one can influence which composition operation will be used when drawing on the canvas. The various options are well described on the MDN documentation page.
    In this example three circles on the corners of an equilateral triangle are drawn with red, green or blue styles respectively. By setting the globalCompositeOperation you can change how these colors turn out when they are combined on the map.
    You can select an operation in the select-field and you can also control which layers will be affected by the chosen operation through the layer checkboxes.
  • Color Manipulation (color-manipulation.html)
    Demonstrates color manipulation with a raster source.
    A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
  • Layer Groups (layer-group.html)
    Example of a map with layer group.
    Example of a map with layer group.
  • Lazy Source (lazy-source.html)
    Example of setting a layer source after construction.
    Typically, the source for a layer is provided to the layer constructor. If you need to set a layer source after construction, this can be done with the layer.setSource() method.
    The layer in the map above is constructed with no source. Use the links below to set/unset the layer source. A layer is not rendered until its source is set.
  • Advanced Mapbox Vector Tiles (mapbox-vector-tiles-advanced.html)
    Example of a Mapbox vector tiles map with custom tile grid.
    A vector tiles map which reuses the same source tiles for subsequent zoom levels to save bandwidth on mobile devices. Note: No map will be visible when the access token has expired.

二、地图

2.1、地图控件

  • Attributions (attributions.html)
    Example of a attributions visibily change on map resize, to collapse them on small maps.
    When the map gets too small because of a resize, the attribution will be collapsed. This is because the collapsible option is set to true if the width of the map gets smaller than 600 pixels.
  • Map Export (export-map.html)
    Example of exporting a map as a PNG image.
    Example of exporting a map as a PNG image. This example requires a browser that supports canvas.toBlob().
  • Export PDF example (export-pdf.html)
    Example of exporting a map as a PDF.
    Example of exporting a map as a PDF using the jsPDF library.
  • Mouse Position (mouse-position.html)
    Example of a mouse position control, outside the map.
    Example of a mouse position control, outside the map.
  • Overview Map Control (overviewmap.html)
    Example of OverviewMap control.
    This example demonstrates the use of the OverviewMap control.
  • Navigation Controls (navigation-controls.html)
    Shows how to add navigation controls.
    This example shows how to use the ol/control/ZoomToExtent control.
    The following navigation controls are added to the map:
    ol/control/Zoom (added by default)
    ol/control/ZoomToExtent
  • Scale Line (scale-line.html)
    Example of a scale line.
  • Custom Tooltips (button-title.html)
    This example shows how to customize the buttons tooltips with Bootstrap.
    This example shows how to customize the buttons tooltips with Bootstrap.
  • Custom Controls (custom-controls.html)
    Shows how to create custom controls.
    This example creates a "rotate to north" button.
  • Full Screen Control (full-screen.html)
    Example of a full screen control.
    Click the control in the top right corner to go full screen. Click it again to exit full screen.
    If there is no button on the map, your browser does not support the Full Screen API.
  • Full Screen Control with extended source element (full-screen-source.html)
    Example of a full screen control with a source option definition.
    Click the control in the top right corner to go full screen. Click it again to exit full screen.
    If there is no button on the map, your browser does not support the Full Screen API.
  • Full Screen Drag, Rotate, and Zoom (full-screen-drag-rotate-and-zoom.html)
    Example of drag rotate and zoom control with full screen effect.
    Hold down Shift+Drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the Shift+Drag thing again.
    If there is no button on the map, your browser does not support the Full Screen API.
  • Measure (measure.html)
    Using a draw interaction to measure lengths and areas.
    The getLength() and getArea() functions calculate spherical lengths and areas for geometries. Lengths are calculated by assuming great circle segments between geometry coordinates. Areas are calculated as if edges of polygons were great circle segments.
    Note that the geometry.getLength() and geometry.getArea() methods return measures of projected (planar) geometries. These can be very different than on-the-ground measures in certain situations — in northern and southern latitudes using Web Mercator for example. For better results, use the functions in the ol/sphere module.
  • Custom Overview Map (overviewmap-custom.html)
    Example of OverviewMap control with advanced customization.
    This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.
  • Vector Tile Info (vector-tile-info.html)
    Getting feature information from vector tiles.
    Move your pointer over rendered features to display feature properties.
  • Zoom Sliders (zoomslider.html)
    Example of various ZoomSlider controls.
    This example shows how to add a zoom slider to a map and how to customize it.

2.2、地图交互

  • Drag, Rotate, and Zoom (drag-rotate-and-zoom.html)
    A single interaction to drag, rotate, and zoom.
    Shift+Drag to rotate and zoom the map around its center.
  • Extent Interaction (extent-interaction.html)
    Using an Extent interaction to draw an extent.
    This example shows how to use an Extent interaction to draw a modifiable extent.
    Use Shift+Drag to draw an extent. Shift+Drag on the corners or edges of the extent to resize it. Shift+Click off the extent to remove it.
  • Custom Interactions (custom-interactions.html)
    Example of a custom interaction.
    This example demonstrates creating a custom interaction by subclassing ol/interaction/Pointer. Note that the built in interaction ol/interaction/Translate might be a better option for moving features.
  • Interaction Options (interaction-options.html)
    Shows interaction options for custom scroll and zoom behavior.
    This example uses a custom ol/interaction/defaults configuration:
    By default, wheel/trackpad zoom and drag panning is always active, which can be unexpected on pages with a lot of scrollable content and an embedded map. To perform wheel/trackpad zoom and drag-pan actions only when the map has the focus, set onFocusOnly: true as option. This requires a map div with a tabindex attribute set.
    By default, pinch-zoom and wheel/trackpad zoom interactions can leave the map at fractional zoom levels. If instead you want to constrain wheel/trackpad zooming to integer zoom levels, set constrainResolution: true.
  • Pinch Zoom (pinch-zoom.html)
    Restrict pinch zooming to integer zoom levels.
    By default, the ol/interaction/PinchZoom can leave the map at fractional zoom levels. If instead you want to constrain pinch zooming to integer zoom levels, set constrainResolution: true when constructing the interaction.
  • Snap Interaction (snap.html)
    Example of using the snap interaction together with draw and modify interactions.
    Example of using the snap interaction together with draw and modify interactions. The snap interaction must be added last, as it needs to be the first to handle the pointermove event.
  • Translate Features (translate-features.html)
    Example of a translate features interaction.
    This example demonstrates how the translate and select interactions can be used together. Zoom in to an area of interest and click to select a feature. Then drag the feature around to move it elsewhere on the map.
  • Box Selection (box-selection.html)
    Using a DragBox interaction to select features.
    This example shows how to use a DragBox interaction to select features. Selected features are added to the feature overlay of a select interaction (ol/interaction/Select) for highlighting.
    Use Ctrl+Drag (Command+Drag on Mac) to draw boxes.

2.3、地图覆盖

  • Map Graticule (graticule.html)
    This example shows how to add a graticule overlay to a map.
    This example shows how to add a graticule overlay to a map.
  • Overlay (overlay.html)
    Demonstrates overlays.
    The popups are created using Popovers from Bootstrap.
  • Popup (popup.html)
    Uses an overlay to create a popup.
    Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an ol/Overlay is created with the popup container. A listener is registered for the map's click event to display the popup, and another listener is set as the click handler for the close button to hide the popup.

2.4、地图事件

  • Image Filters
    (image-filter.html)

    Apply a filter to imagery
    Layer rendering can be manipulated in precompose and postcompose event listeners. These listeners get an event with a reference to the Canvas rendering context. In this example, the postcompose listener applies a filter to the image data.
  • Magnify (magnify.html)
    Show a magnified version of imager under the pointer
    This example makes use of the postcompose event listener to oversample imagery in a circle around the pointer location. Listeners for this event have access to the Canvas context and can manipulate image data.
    Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the magnified circle size.
  • Moveend Event (moveend.html)
    Use of the moveend event.
    In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.
  • Image Load Events (image-load-events.html)
    Example using image load events.
    Image sources fire events related to image loading. You can listen for imageloadstart, imageloadend, and imageloaderror type events to monitor image loading progress. This example registers listeners for these events and renders an image loading progress bar at the bottom of the map.
  • Tile Load Events (tile-load-events.html)
    Example using tile load events.
    Image tile sources fire events related to tile loading. You can listen for tileloadstart, tileloadend, and tileloaderror type events to monitor tile loading progress. This example registers listeners for these events and renders a tile loading progress bar at the bottom of the map.

2.5、地图视角

  • View Min-Zoom (min-zoom.html)
    Demonstrates how the view's minimum zoom level can be changed.
    The minZoom option for a view limits how far out you can zoom. This property can be updated by calling view.setMinZoom(newMinZoom). In this example, the minimum zoom level is set so that you only see one world at a time. Resize your browser window to change the threshold.
  • View Rotation (rotation.html)
    Example of a rotated map.
    Use Alt+Shift+Drag to rotate the map.
  • View Animation(animation.html)
    Demonstrates animated pan, zoom, and rotation.
    This example shows how to use the view.animate() method to run one or more animations.
  • Constrained Zoom (zoom-constrained.html)
    Example of a zoom constrained view.
    This map has a view that is constrained between zoom levels 9 and 13. This is done using the minZoom and maxZoom view options.
  • Accessible Map (accessible.html)
    Example of an accessible map.
    This page's map element has its tabindex attribute set to "0", that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the map element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
    Clicking on the "Zoom in" and "Zoom out" buttons below the map zooms the map in and out. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.
  • Advanced View Positioning (center.html)
    This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
    This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. The map above has top, right, bottom, and left padding applied inside the viewport. The view's fit method is used to fit a geometry in the view with the same padding. The view's centerOn method is used to position a coordinate (Lausanne) at a specific pixel location (the center of the black box).
  • Shared Views (side-by-side.html)
    Two maps with different renderers share view properties
    Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers.

2.6、地图定位

2.7、投影坐标系

三、第三方集成

  • d3集成(d3.html)
    Example of using OpenLayers and d3 together.
    The example loads TopoJSON geometries and uses d3 (d3.geo.path) to render these geometries to a canvas element that is then used as the image of an OpenLayers image layer.
  • 设备方向(device-orientation.html)
    Listen to DeviceOrientation events.
    This example shows how to track changes in device orientation. gyronorm.js library is used to access and normalize the events from the browser.
  • geojson-vt integration (geojson-vt.html)
    Slice GeoJSON into vector tiles on the fly in the browser.
    Example of integration with geojson-vt library.
  • JSTS Integration (jsts.html)
    Example on how to use JSTS with OpenLayers.
    Example showing the integration of JSTS with OpenLayers.
  • topolis integration (topolis.html)
    Example on how to use topolis with OpenLayers.
    Example showing the integration of topolis with OpenLayers, enabling creating and editing topological geometry. Standard interaction draws edges, snapping to existing edges. Delete an edge by drawing a new edge crossing the one to delete.
  • turf.js (turf.html)
    Example on how to use turf.js with OpenLayers.
    Example showing the integration of turf.js with OpenLayers. The turf.js function along is used to display a marker every 200 meters along a street.
  • Single Image WMS with Proj4js (wms-image-custom-proj.html)
    Example of integrating Proj4js for coordinate transforms.
    With Proj4js integration, OpenLayers can transform coordinates between arbitrary projections.
  • Export PDF example (export-pdf.html)
    Example of exporting a map as a PDF.
    Example of exporting a map as a PDF using the jsPDF library.

四、其他

  • Canvas瓦片(canvas-tiles.html)
    Renders tiles with coordinates for debugging.
    The black grid tiles are generated on the client with an HTML5 canvas. The displayed tile coordinates are OpenLayers tile coordinates. These increase from bottom to top, but standard XYZ tiling scheme coordinates increase from top to bottom. To calculate the y for a standard XYZ tile coordinate, use -y
  • 动态数据(dynamic-data.html)
    Example of dynamic data.
    Example of dynamic data.
  • Icon Sprites with WebGL (icon-sprite-webgl.html)
    Icon sprite with WebGL
    In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.
  • Full-Screen Mobile (mobile-full-screen.html)
    Example of a full screen map.
  • Permalink (permalink.html)
    Example on how to create permalinks.
    In this example the HTML 5 History API is used to update the browser URL with the current zoom-level, center and rotation when the map is moved. Note that the History API is not supported in all browsers, one might consider to use a a polyfill.
  • Render geometries to a canvas (render-geometry.html)
    Example of rendering geometries to an arbitrary canvas.
    This example shows how to render geometries to an arbitrary canvas.
  • Teleporting Maps (teleport.html)
    Example of moving a map from one target to another.
    Click on the teleport button the map to move the map from one target to another.