Openlayers is a powerful JavaScript package that can be downloaded for free from its official website. Openlayers provides many powerful web page Map Display and operation functions, and can display different source layers in the same map. It supports various third-party map APIs (such as Google, Yahoo, bing, OSW, Baidu, and map world). Of course, Ol also supports some map services (WMS, WFS, etc.) released by your own server (such as geoserver ).
Download the ol package and decompress openlayers in the folder. copy JS files, theme folders, and IMG folders and place them in the same directory of Your webpage files (or other locations that can be called by your webpage ). Then you can create an HTML file for map display.
Let's take a look at the sample code:
1 <!DOCTYPE html> 2Note the following points:
1. 6th the behavior references the label statement of the downloaded openlayers. js package. The src attribute indicates the position of the openlayers package, which is the relative path. Of course, you can also refer to the absolute path or the path of the official website (to connect to the internet). The method for referencing the path of the official website of OL is as follows:
<script type=‘text/javascirpt‘ src=‘http://openlayers.org/api/OpenLayers.js‘></script>2. Note the concept of MAP and layer in Ol. Map is a container used to display maps. layer is a layer from the server. Each map can be loaded with 0, 1, or multiple layers. Because Javascript is an object-oriented language, the map and layer mentioned above are classes and objects must be declared for instantiation. Layer has many subclasses. each subclass represents a type of layer, such as openlayers in this example. layer. WMS is used to display the layer of the WMS service, and other sub-classes such as openlayers. layer. google (used to display Google maps), openlayers. layer. vector (used to display vector layers) and so on. The specific attributes of these classes and the required parameters for initialization can be queried through the openlayers documentation. In this example, openlayers. layer. the WMS constructor has four parameters: the WMS layer name and the URL requesting WMS services (some request parameters can be added) this is an anonymous object that contains multiple key-value pairs (the key-value pairs in this object will be passed as parameters to the server) and WMS layer's own attribute settings (also an anonymous object consisting of key-value pairs ). In this example, the initialization process of the WMS layer is as follows:
1 var wms = new OpenLayers.Layer.WMS(2 ‘wmsL‘,3 ‘http://vmap0.tiles.osgeo.org/wms/vmap0‘,4 {layers: ‘basic‘},5 {IsBaseLayer: ‘true‘}6 );The first parameter is the layer name, the second parameter is the server URL, and the third parameter is the parameter sent to the server (in this example, there is only one parameter, which indicates that the requested layer is called Basic and there can be many, see the API documentation). The fourth parameter is some properties of the layer on the client. In this example, this graph is a base layer.
3. I just mentioned that multiple layers can be added to map in openlayers. How can I add multiple layers? In this example, the addlayer method of the map class is used. In addition to this method, the declared layer can be used as its parameter during map initialization:
var map =new OpenLayers.Map(‘map_element‘,{layers:[Layer1,Layer2,...]});4. note that the first parameter of the map constructor is to display the ID of the HTML tag of the map in the future (normally, the DIV tag is used to display the map ), the second parameter is an anonymous object that contains the map attribute.
Well, pay attention to this for a simple ol web page.
References: openlayers 2.10Beginner's Guide
Brief Introduction to openlayers and simple examples
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
