What is openlayers?
Openlayers is an open source client JavaScript class library used to create interactive Web Maps. The created maps can be viewed in almost all browsers. Because it is a client class library, it does not need special server software or configuration, or even can be used without downloading anything. Openlayers was initially developed by metacarta. Now it has become a developer and HelperCommunityMature and popular frameworks.
Download openlayers
Openlayers Official Website: http://openlayers.org/
1. Open the official website and you can see that the latest version of openlayersis 2.12. click .zip to download it directly.
2.decompress the downloaded. ZIP file to the OpenLayers-2.12.
3. Open the OpenLayers-2.12 folder and you will see a lot of folders and files, but we only care about one file: openlayers. js and two folders:/IMG and/theme.
4. Create a folder (I name it code) and copy the files and folders we care about to the new folder. After the folder is copied, the structure of the new folder is as follows:
Create the first map
1. Create a New index.html file in the codefolder.
2. In index.html, add the followingCode:
1:<!Doctype Html>
2:<Html Lang= 'Zh-cn'>
3:<Head>
4:<Meta Charset= 'Utf-8' />
5:<Title>My openlayers Map</Title>
6:<Script Type= 'Text/JavaScript' SRC= 'Openlayers. js'> </Script>
7:<SCRIPT type ='Text/JavaScript'>
8:VaRMap;
9:FunctionInit (){
10:Map =NewOpenlayers. Map ('Map',{}); 11:VaRWMS =NewOpenlayers. layer. WMS (
12:'Openlayers wms',
13:'Http: // vmap0.tiles.osgeo.org/wms/vmap0',
14:{
15:Layers:'Basic'
16:},
17:{}
18:);
19:Map. addlayer (WMS );
20:If(! Map. getcenter ()){
21:Map. zoomtomaxextent ();
22:}
23:}
24:</Script>
25:</Head>
26:<Body Onload= 'Init ();'>
27:<Div ID= 'Map' Style= 'Width: 500px; Height: 500px ;'>
28:</Div>
29:</Body>
30:</Html>
3. Open it in the browser and you will see the map shown in:
Code Description
1. Row 3 contains the openlayers library openlayers. js.
2. 27th ~ Line 28: Create a div with a width and height of 500px to display the map.
3. define a global variable map in row 8th.
4. line 2, from openlayers. map class creates a map object, new openlayers. 'map' in map ('map' ,{}); is the ID of the DIV used to display the map.
11th rows: Create a layer object from the Child WMS of the layer class. Note: In openlayers, each map must have at least one layer.
12th rows, the first input parameter,'Openlayers wms' is the name of the layer.
13th rows, second parameter. The URL is the WMS service address.
14th ~ Line 16, the third parameter, is an anonymous object.
19th rows add layers to the map.
10. Row 20th is used to determine whether a central point exists.
11. 21st rows are the largest display map.
As mentioned aboveArticle.
Openlayers Learning Resources
1. The first is the official website of openlayers: http://openlayers.org/. here you can find the API document to help you a lot.
2. We recommend a book: openlayers 2.10 Beginners Guide, which can be searched from Google. It is not provided here. I am reading this book.Source codeAddress: http://github.com/openlayers/openlayers
3. the following URL is provided:
Http://openlayers.org/blog/
Http://openlayers.turbolinux.org/
Http://baiyinzc.com/index? Post = 296 this is a paper: openlayers-based Bohai Bay Information System Design
In addition, I also found on the internet that there is openlayers Visual Studio smart sensing plug-in, address: http://jozefizso.github.com/openlayers/
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
