preface

A few days ago, I made use of Echarts + Baidu Map to make the portal home page of the system. I met a demand for a schematic diagram of the influence area of the industry city to be superimposed on the map. After reviewing the documentation, I found that Baidu Map API does provide a method for stacking custom layers. For details, please refer to the Map class of Baidu Map API

Its core class is TileLayer, which is detailed as follows:

At the same time, baidu Map API official website also provides an example: add tsinghua campus micro map

However, the examples provided by the official website simply cannot meet my requirements. After consulting relevant documents, I found that Baidu Map supports WMS layer service. Here, THANKS to CodingSir’s blog, I have got a lot of inspiration. Baidu Map API overlay custom layer (1)

Implementation approach

Introduction of Echarts – based Degrees map

<script type="text/javascript" src="https://www.echartsjs.com/zh/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://echartsjs.com/examples/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://echartsjs.com/examples/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/extension/bmap.min.js"></script> <script Type = "text/javascript SRC =" http://api.map.baidu.com/api?v=3.0&ak= "(your ak) > < / script >Copy the code

Coordinate transformation

As we all know, only when layers in the same coordinate system are superimposed, there will be no error. So to overlay the WMS layer service, we still need to do the coordinate transformation.

My WMS layer service is in Baidu Mercator projection coordinate system, so I just need to convert the data to Baidu geographic coordinate system to realize the overlay of the map. The code for the transformation is:

// Baidu Mercator coordinates - "baidu latitude and longitude coordinates
new BMap.Pixel(minx, miny);
Copy the code

WMS service overlay standard

Web Mapping services (WMS) make maps using data with geospatial location information. A map is defined as a visual representation of geographic data. This specification defines three operations:

  • GetCapabitities returns service-level metadata, which is a description of the service information content and requirements parameters;
  • GetMap returns a map image with well-defined geospatial references and size parameters;
  • GetFeatureInfo (optional) returns information about specific elements that appear on the map.

I used the GetMap operation. The parameters of GetMap can be found on the GeoServer website (WMS Service Overlay standard) as follows:

The key code

function addWMSLayer() {
    // Get baidu Map instance
    var map = echarts.init(document.getElementById("echarts")).getModel().getComponent('bmap').getBMap();
    // Initialize the map slice
    var tileLayer = new BMap.TileLayer({ isTransparentPng: true });
    // Baidu map slicing scheme
    var resolutions = [262144.131072.65536.32768.16384.8192.4096.2048.1024.512.256.128.64.32.16.8.4.2.1];
    // Get the slice address
    tileLayer.getTilesUrl = function (tileCoord, zoom) {
        var x = tileCoord.x;
        var y = tileCoord.y;

        var res = resolutions[zoom];
        var tileWidth = 256;
        var minx = x * tileWidth * res;
        var miny = y * tileWidth * res;
        var maxx = (x + 1) * tileWidth * res;
        var maxy = (y + 1) * tileWidth * res;
        
        var bottomLeft = new BMap.Pixel(minx, miny); // Lower left corner coordinates
        var topRight = new BMap.Pixel(maxx, maxy); // Upper right corner coordinates
        var projection2 = map.getMapType().getProjection();
        var bottomLefXY = projection2.pointToLngLat(bottomLeft); // Baidu Mercator coordinates - "baidu latitude and longitude coordinates
        var topRightXY = projection2.pointToLngLat(topRight); // Baidu Mercator coordinates - "baidu latitude and longitude coordinates
        var bbox = [bottomLefXY.lng, bottomLefXY.lat, topRightXY.lng, topRightXY.lat]; // Calculate bbox

        // Set the URL according to the rules of the GeoServer WMS service
        var url = wmsTileLayer(your wms serverURL) + "? Request = GetMap&version = 1.3.0 & styles = & transparent = true&format = image/png32 & the layers = 0 & CRS = CRS: 84 & WIDTH = 256 & HEIGHT = 256 & BBOX =" + bbox.join(', ');
        return url;
    };
    map.addTileLayer(tileLayer);
}
Copy the code

Results show

Note:
Transparent =true if the parameter is not set, baidu map base will be overwritten by the WMS service layer.Copy the code

conclusion

In this function realization process, actually still have a lot of bumpy.

First, my professional ability is not solid enough, and MY understanding of geographical coordinates is not thorough enough.

Second, because of my poor English level, IT is too hard to understand English documents.

So it’s really important to learn English well!!

It is my first time to write an article. If I am not good enough, please give me more advice. If you think the article is useful to you, please give me a thumbs-up