The open-source openlayers framework is very good !!!

Using openlayers to develop a WebGIS Client
Openlayers is an open-source JS framework used to implement Map Browsing effects and basic zoom and Pan functions in your browser. The map sources supported by openlayers include WMS, GoogleMap, kamap, and msvirtualearth. You can also use simple images as the source. openlayers provides many options.

To use openlayers, you can go to its official website http://www.openlayers.org to download his package, decompress it and see some of the directories and files. Copy the openlayer under the Dist directory. JS, lib directory under the root directory, and IMG directory under the root directory to the scripts directory of your website (of course, this is just an example. You can calculate the directory structure of your website by yourself, you only need to ensure that openlayers. JS,/lib,/IMG can be in the same directory ).

Click it to create an index.html page to view the map. Import openlayers. js and the JS you are about to create. The content requires a DIV, whose ID is called area. You need to write some CSS limitation # the width and height of area. If you are willing to add a border, it is also a good choice.

To put it bluntly, we must first create an instance of the openlayer. map object:
VaR map = new openlayers. Map ("area ");
The parameters can be passed by ID or elementobject, which is more convenient.

Next, add a layer to the map. Generally, use the subclass of openlayers. layer to initialize the layer.
Openlayers provides the following layers extensions:

• Openlayers. layer. Image
• Openlayers. layer. httprequest
• Openlayers. layer. Grid
• Openlayers. layer. WMS
• Openlayers. layer. kamap
• Openlayers. layer. eventpane
• Openlayers. layer. Google
• Openlayers. layer. virtualearth
• Openlayers. layer. Markers
• Openlayers. layer. Text
• Openlayers. layer. georss
• Openlayers. layer. Boxes
• Openlayers. layer. TMS

The image class encapsulates an actual image as the image's previous content
The httprequest class can receive a dynamically generated image. You can send parameters to the server through parameters of the httprequest class.
The grid class is a subclass of the httprequest class and provides more detailed methods.
The WMS class is used to connect to the WMS server to obtain images.
The kamap class is used to connect to the mapserver.
The eventpane class is used as a layer for receiving user operations.
Google class is used to get images from Google. It still requires you to get the API key from Google and include
Virtualearth layer used to operate virtualearth
The markers class is used to generate a layer for receiving and displaying users' local tags.
The text class is used to receive CSV files.
The georss class is a subclass of the marker class. It is used to encapsulate and receive georss and create marker in layers.
Boxes is also a subclass of the marker class. You can use Div as a marker instead of an image.
Map of TMS used to receive TMS servers

After creating a layer, you can use the addlayer (layer) method of map to insert it and execute the zoomtomaxextent () method of map to display the map properly.

Openlayers also provides a variety of control classes to add some tools for map browsing, inherited from the openlayers. control class.

• Openlayers. Control. layerswitcher
• Openlayers. Control. mousedefaults
• Openlayers. Control. mouseposition
• Openlayers. Control. mousjavaslbar
• Openlayers. Control. overviewmap
• Openlayers. Control. panzoom
• Openlayers. Control. panzoombar
• Openlayers. Control. permalink
• Openlayers. Control. Scale

Examples of these classes will add some toolbar or buttons on the "window" of map browsing to increase interaction and functionality.

Openlayers encapsulates Common Data Structures

Openlayers. lonlat

Openlayers. Size

Openlayers. Pixel

Openlayers. bounds for ease of operation.

In addition, the openlayers. util class can customize the color of the image box and the default image in the image box when the image is loaded incorrectly, which is very convenient. Openlayers's Ajax class encapsulates the process of creating an xhr object and can be used for simple Ajax operations.