Category : Software application
Abstract: What is Map? 1.Map is the core component of OpenLayers, which is used to initialize map objects. 2.To initialize a map, you need...
What is Map?
1.Map is the core component of OpenLayers, which is used to initialize map objects.
2.To initialize a map,
you need a view (view),
one or more layers (layer),
and a target for map loading (HTML), tag (target).
Parameters
controlsadded to the map. Defaults. By default, loaddefaultsunderol/control, default control group.pixelRatioThe ratio between physical pixels on the device and device independent pixels (drop).interactionsInteractive events added to the map.By default, loaddefaultsunderol/control, default control group.keyboardEventTargetThe element that listens for keyboard events. This determines the trigger time of interaction betweenKeyboardPanandKeyboardZoom. For example, if you set this option to thedocumentkeyboard, the interaction will always be triggered. If this option is not specified, the element on which the library listens for keyboard events is the map target (that is, the div provided by the user for the map). If it is not adocument, you need to focus on the target element to emit key events, which requires that the target element has thetabindexattribute.layersIf no layer is defined, it will also be loaded and blank layers will be displayed. Layers are loaded in order, and they need to be placed at the back if they want to be on the top.maxTilesLoadingThe maximum number of tiles loaded at the same time, the default is 16.moveToleranceThe minimum distance (in pixels) that the cursor must move to be detected as a map movement event, not a click. Increasing this value makes it easier to click the map.overlaysBy default, no coverings are added.targetThe container of the map, the element itself or theidelement. It must be specified, if it is not specified, the map cannot be loaded.viewIt needs to be specified during construction or through the method (setView), otherwise the layer will not be loaded.
Use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style type="text/css">
.map {
Height: 500px
Width: 100%
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
<body>
<div id="map" class="map"></div>
</body>
<script>
Var map = new ol.Map ({
Target: 'map'
})
// layer
Var layerTile = new ol.layer.Tile ({
Source: new ol.source.XYZ ({
Url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
})
// View
Var view = new ol.View ({
Zoom: 4
})
Map.setView (view)
Map.setLayerGroup (layerTile)
</script>
</html>
Views, layers and controls can all be added to the map through the function, and the data in the map can also be obtained through the function.
Common properties of Map
LayerGroupLayer group of the layer in the map.Size DOMThe size of the map (in pixels).TargetMap container.ViewView.ControlControl group of the map.InteractionInteraction event group.
Common methods of Map
AddControl (control)Add a control.AddInteraction (interaction)Add interaction.AddLayer (layer)Add a layer.AddOverlay (overlay)Add a cover.DispatchEvent (event)Dispatch an event and call all listeners listening for this type of event.On (type, listener)Listen to some type of event.GetOverlays()Get all covers.RemoveOverlay (overlay)Delete the specified overlay.
Summary
In OpenLayers development, map represents a map instance.
We can use it to manage the display of layers.
Whether to add controls to the map,
in short, subsequent layer development needs to use it to manage.
Label :
OpenLayers
Comment list
(0)