基於Echarts的百度地圖疊加arcgis server的WMS圖層服務

Befend發表於2020-03-26
Echarts地圖Server

前言

前陣子利用echarts+百度地圖做系統的門戶首頁，遇到一個要地圖上疊加產業城影響範圍示意圖的需求。查閱文件之後，發現百度地圖API確實提供了疊加自定義圖層的方法，詳情請看： 百度地圖API的Map類

其核心類是TileLayer，詳細內容如下：

基於Echarts的百度地圖疊加arcgis server的WMS圖層服務

同時，百度地圖API官網也提供了示例: 新增清華校園微觀圖

但是官網提供的示例根本無法滿足我的要求，後面查閱相關文件才發現，百度地圖是支援WMS圖層服務的，在此，感謝CodingSir大佬的博文，給了我不少的啟發。連結地址：baidu地圖API疊加自定義圖層（一）

實現思路

引入基於Echarts的百度地圖

<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>
複製程式碼

座標轉換

我們都知道，只有同一座標系的圖層疊加，才不會有誤差。所以要疊加WMS圖層服務，我們還是需要進行座標轉換的。

我的WMS圖層服務是百度墨卡託投影座標系的，因此我只需要把資料轉換為百度地理座標系即可實現地圖的疊加。轉化的程式碼是：

//百度墨卡託座標-》百度經緯度座標
new BMap.Pixel(minx, miny);
複製程式碼

WMS服務疊加標準

Web地圖服務（WMS）利用具有地理空間位置資訊的資料製作地圖。其中將地圖定義為地理資料可視的表現。
這個規範定義了三個操作：

  • GetCapabitities返回服務級後設資料，它是對服務資訊內容和要求引數的一種描述；
  • GetMap返回一個地圖影像，其地理空間參考和大小引數是明確定義了的；
  • GetFeatureInfo（可選）返回顯示在地圖上的某些特殊要素的資訊。

我採用的是GetMap操作，關於GetMap引數，可以從GeoServer官網上查閱 ( WMS服務疊加標準 )，詳細內容如下：

基於Echarts的百度地圖疊加arcgis server的WMS圖層服務

關鍵程式碼

function addWMSLayer() {
    // 獲取百度地圖例項
    var map = echarts.init(document.getElementById("echarts")).getModel().getComponent('bmap').getBMap();
    // 初始化地圖切片
    var tileLayer = new BMap.TileLayer({ isTransparentPng: true });
    // 百度地圖切片方案
    var resolutions = [262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1];
    // 獲取切片地址
    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); // 左下角座標
        var topRight = new BMap.Pixel(maxx, maxy); // 右上角座標
        var projection2 = map.getMapType().getProjection();
        var bottomLefXY = projection2.pointToLngLat(bottomLeft); //百度墨卡託座標-》百度經緯度座標
        var topRightXY = projection2.pointToLngLat(topRight); //百度墨卡託座標-》百度經緯度座標
        var bbox = [bottomLefXY.lng, bottomLefXY.lat, topRightXY.lng, topRightXY.lat]; //計算出bbox

        //根據geoserver WMS服務的規則設定URL
        var url = wmsTileLayer(your wms serverURL) + "?request=GetMap&version=1.3.0&styles=&transparent=true&format=image/png32&layers=0&CRS=CRS:84&WIDTH=256&HEIGHT=256&BBOX=" + bbox.join(',');
        return url;
    };
    map.addTileLayer(tileLayer);
}
複製程式碼

效果展示

基於Echarts的百度地圖疊加arcgis server的WMS圖層服務
其實底圖是百度地圖的，現在看到的效果是由於在返回url時，沒有設定transparent=true這個引數，導致底圖背景不透明。wms圖層服務已經刪除了，所以大家看不到預期的效果，將就著看看吧。

總結

在本次的功能實現過程中，其實還是有諸多坎坷的。

第一是因為我專業能力還不夠紮實，對地理座標關係的理解不夠透徹；

第二是因為我的渣渣英語水平，導致在理解英文文件過於費力。

所以，學好英語真的好重要的呀！！！

本人第一次寫文章，寫的不好的地方，還請大家多多指教，如果你覺得文章對你有用，點個贊就好啦~

相關文章