Basic concepts of OPENLAYERS3 Basic tutorial--ol3

Starting from this section, I will continue to update the relevant articles on OL3--OPENLAYERS3 basic tutorials, welcome to my blog, but also hope that my blog can bring you a little help.

Overview:

Openlayers 3 has fundamentally redesigned the Openlayers Network Map Library. Version 2, though widely used, has become increasingly unrealistic from the early stages of development of JavaScript. OL3 has been rewritten from the ground up using modern design patterns. Openlayers 3 also designed some of the major new features, such as displaying a three-dimensional map, or using WEBGL to quickly display large vector datasets, which will be added in a later release.

Basic concepts:

OL3 structure diagram

1. Map

The core component of Openlayers 3 is the map (ol. Map). It is rendered to the object target container (for example, a div element that is contained on a map's web page). The properties of all maps can be configured at construction time, or by using setter methods, such as settarget ().

<div id= "Map" style= "width:100%, height:400px" ></div><script>    var map = new ol. Map ({target: ' map '});</script>

2. View

ol. View is responsible for setting the center point of the map, zooming in, projecting, and so on.

A ol. The View instance contains a projection projection , which determines the center center   coordinate system and resolution units, If not specified (as in the following code snippet), the default projection is Ball Mercator (epsg:3857), which is the map unit in meters.

Enlarge zoom   option is a convenient way to specify the resolution of the map, the available zoom level is maxzoom   (default value is 28), zoomfactor   (default value is 2), maxresolution   (default by projection in 256x 256 pixels tile effective Chengdu to calculate) decided. Starting at zoom level 0, maxresolution   is in resolution, and subsequent zoom levels are through zoomfactor The calculates the resolution of the previous zoom level until the zoom level reaches maxzoom " Span style= "Color:rgb (51,51,51)" >  .

Map.setview (New ol. View ({    Center: [0, 0],    zoom:2}));

3. Source

Openlayers 3 uses the Ol.source.Source subclass to get remote data layers, including free and commercial map tile services such as OpenStreetMap, Bing, OGC Resources (WMS or WMTS), Vector data (geojson format, KML format ... such as

var osmsource = new Ol.source.OSM ();

4. Layer

A layer is a visual display of data in a resource, and Openlayers 3 contains three basic layer types ol.layer.Tile : ol.layer.Image , and ol.layer.Vector .

The ol.layer.Tile is used to display tile resources, which provide pre-rendering and consist of tile picture meshes organized by a specific zoom level of the individual rate.

The ol.layer.Image is used to display images that support rendering services, which can be used for any range and resolution.

The ol.layer.Vector is used to display vector data that is rendered on the client.

var osmlayer = new Ol.layer.Tile ({source:osmsource}); Map.addlayer (Osmlayer);

Summarize:

The above fragments can be combined into a map configuration of a self-contained view and layer:

<div id= "Map" style= "width:100%, height:400px" ></div><script>  new ol. Map ({    layers: [      new Ol.layer.Tile ({source:new Ol.source.OSM ()})    ],    view:new ol. View ({      Center: [0, 0],      zoom:2    }),    target: ' Map '  });</script>

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Basic concepts of OPENLAYERS3 Basic tutorial--ol3