Openlayers 3 Load Day map

To use the Openlayers 3 load day map, first to understand the principle of the map published, and follow the release specifications, in the previous article we mentioned the use of Openlayers 3 load Baidu Map, we mentioned that the general network map in order to speed up access, all using cache tile map Way, Day map is no exception, and the principle is very similar, but its slice of the index organization is still some different, although all are slices, but the origin of the original coordinates of the slice is inconsistent, Baidu map is the bottom left corner of the screen, and the sky map is the upper left corner of the screen (and Google Maps consistent), and the coordinate system in which it is located is the spherical Mercator projection coordinate system (epsg:3857).

For map slices published in this form, there is a corresponding data source (Ol.source) class in Openlayers 3 – the ol.source.TileImage previous openlayers 3 load Baidu Map, which is the class used. Of course, we use this class, loading day map is also possible, but the way the world map is published and the way the slices are organized in line with Google Maps, in Openlayers 3 for the loading of Google Maps specifically written class- ol.source.XYZ , this class is ol.source.TileImage a special case, inherited ol.source.TileImage , which XYZ corresponds to the x y-coordinate of the slice and the current zoom level z, respectively.

Note: The code section is based on the previous article, openlayers 3 load Baidu map.

Determine the service address

There are 8 service addresses for the day map, with subdomains from T0 to T7, as shown in the following table. Get the method and the previous article to get Baidu Map service address is the same, F12 view the browser's communication information:

• http://t0.tianditu.com/DataServer?
• http://t1.tianditu.com/DataServer?
• http://t2.tianditu.com/DataServer?
• http://t3.tianditu.com/DataServer?
• http://t4.tianditu.com/DataServer?
• http://t5.tianditu.com/DataServer?
• http://t6.tianditu.com/DataServer?
• http://t7.tianditu.com/DataServer?

Load Network

We look at the URL of a road network slice: Http://t4.tianditu.com/DataServer? T=VEC_C&X=3233&Y=673&L=12, a total of four parameters, T=vec_c represents the requested network data, X represents the x-coordinate of the slice, y represents the y-coordinate of the slice, and Z indicates the zoom level at which the slice is located. We use the ol.source.XYZ load slice and initialize the obtained data with a tile layer ol.layer.Tile :

var tian_di_tu_road_layer = new ol.layer.Tile({    "天地图路网",    source: new ol.source.XYZ({        "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"    })});map.addLayer(tian_di_tu_road_layer);

We can see that ol.source.XYZ there is a URL parameter that represents the template for the slice address: http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z} When using Openlayers, the user's actions are converted to the corresponding x, Y, z values and assigned to the address template so that the required slices can be requested based on the user's operation.

After loading, found that only the road network pictures, and no road segment name annotation layer, we did nothing wrong, just the day map is the road network layer and annotation layer separately published, we also have to request the annotation layer separately, and then overlay on the road network above, will see and Baidu map effect:

Figure 1 Day Map Network Slice

We can imagine that the annotation layer should be a picture in PNG format that is transparent except for the text, and then we'll load the annotation layer:

Figure 2 Day Map annotation layer Slice

Loading annotation Layers

Using the same method, loading the annotation layer, you can see that in its URL parameter, only the T parameter has changed, and Cva_w indicates that the requested slice type is a slice of the annotation layer:

var=new ol.layer.Tile({    "天地图文字标注",    new ol.source.XYZ({        ‘http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}‘    })});map.addLayer(tian_di_tu_annotation);

By loading the road network and annotation layers, we can see the effect:

Figure 3 Day Map Call result

Loading satellite imagery

Day map In addition to road network data and annotation data, there are satellite image slicing data, so we can use the same method to load satellite imagery, similarly, the URL parameter of the T parameter value img_w indicates the requested data type is a satellite image slice. The code is as follows:

var=new ol.layer.Tile({    "天地图卫星影像",    new ol.source.XYZ({        ‘http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}‘    })});map.addLayer(tian_di_tu_satellite_layer);

Figure 4 Day map satellite image slicing

Summarize

From the results, the day map does not offset the map, which is much better than the Baidu map. Day map is intended to serve the public, so its data can be used for free calls, but also open the data service interface, but its service document is too simple, no lbs or GIS-related knowledge of the person, the document is equivalent to No, even if it is know a bit of professional knowledge, but also to tinker for a long time.

In short, we call the world map data as a basemap is still very appropriate, do not bear the legal responsibility, because it is open, can be used for free.

OK, just write here, what's the problem, you can leave a message under the article.

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

Openlayers 3 Load Day map