leaflet 默認使用的坐標系是 EPSG:3857，百度地圖：使用百度坐標系高德地圖：火星坐標系（GcJ02）關(guān)于使用openlayers6和leaflet同時加載高德和百度的問題記錄（leafl

看見就非常 2020-08-18

展開全文

先說leaflet,
leaflet 默認使用的坐標系是 EPSG:3857，百度地圖：使用百度坐標系
高德地圖：火星坐標系（GcJ02）
leaflet是默認支持GcJ02的，而且leaflet提供了這個插件L.tileLayer.chinaProvider ，可以引入高德、谷歌、天地圖，不用經(jīng)過轉(zhuǎn)化。但是百度坐標就需要進行額外的轉(zhuǎn)化:代碼如下（本人只是個代碼搬運工~~）

/** * 百度地圖底圖調(diào)用插件 * @author 火星科技 木遙原創(chuàng)(qq:346819890) *///請引入 proj4.js 和 proj4leaflet.jsL.CRS.Baidu = new L.Proj.CRS(  "EPSG:900913",  "+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs",  {    resolutions: (function() {      level = 19;      var res = [];      res[0] = Math.pow(2, 18);      for (var i = 1; i < level; i++) {        res[i] = Math.pow(2, 18 - i);      }      return res;    })(),    origin: [0, 0],    bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])  });L.tileLayer.baidu = function(option) {  option = option || {};  var layer;  var subdomains = "0123456789";  switch (option.layer) {    //單圖層    case "vec":    default:      //'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&b=0&limit=60&scaler=1&udt=20170525'      layer = L.tileLayer(        "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=" +          (option.bigfont ? "ph" : "pl") +          "&scaler=1&p=1",        {          name: option.name,          subdomains: subdomains,          tms: true        }      );      break;    case "img_d":      layer = L.tileLayer(        "http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",        {          name: option.name,          subdomains: subdomains,          tms: true        }      );      break;    case "img_z":      layer = L.tileLayer(        "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=" +          (option.bigfont ? "sh" : "sl") +          "&v=020",        {          name: option.name,          subdomains: subdomains,          tms: true        }      );      break;    case "custom": //Custom 各種自定義樣式      //可選值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish      option.customid = option.customid || "midnight";      layer = L.tileLayer(        "http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=" +          option.customid,        {          name: option.name,          subdomains: "012",          tms: true        }      );      break;    case "time": //實時路況      var time = new Date().getTime();      layer = L.tileLayer(        "http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=" +          time +          "&label=web2D&v=017",        {          name: option.name,          subdomains: subdomains,          tms: true        }      );      break;    //合并    case "img":      layer = L.layerGroup([        L.tileLayer.baidu({          name: "底圖",          layer: "img_d",          bigfont: option.bigfont        }),        L.tileLayer.baidu({          name: "注記",          layer: "img_z",          bigfont: option.bigfont        })      ]);      break;  }  return layer;};

html中使用

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />    <title>地圖</title>    <style>        html,        body,        #map {            padding: 0;            margin: 0;            height: 100%;            width: 100%;        }    </style>    <link rel="stylesheet" href="https:///leaflet@1.6.0/dist/leaflet.css" />    <script src="https:///leaflet@1.6.0/dist/leaflet.js"></script><!-- 加載百度地圖使用插件 -->  <script src="https://cdn./proj4js/2.4.3/proj4.js"></script>    <script src="https://cdn./proj4leaflet/1.0.1/proj4leaflet.min.js"></script>    <script src="./tileLayer.baidu.js"></script></head><body>    <div id="map" class="map">    </div>    <script type="text/javascript">            //注意將map的crs賦值 crs: L.CRS.Baidu 詳情請閱讀示例頁面             var map = L.map('map', {                crs: L.CRS.Baidu,                minZoom: 3,                maxZoom: 18,                attributionControl: false,                center: [31.834912, 117.220102],                zoom: 12            });//控制地圖底圖            L.control.layers({                "百度地圖": L.tileLayer.baidu({ layer: 'vec' }).addTo(map),                "百度衛(wèi)星": L.tileLayer.baidu({ layer: 'img' }),                "百度地圖-大字體": L.tileLayer.baidu({ layer: 'vec', bigfont: true }),                "百度衛(wèi)星-大字體": L.tileLayer.baidu({ layer: 'img', bigfont: true }),                "自定義樣式-黑色地圖": L.tileLayer.baidu({ layer: 'custom', customid: 'dark' }),                "自定義樣式-藍色地圖": L.tileLayer.baidu({ layer: 'custom', customid: 'midnight' }) //自定義樣式地圖，customid可選值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish            }, {                "實時交通信息": L.tileLayer.baidu({ layer: 'time' })            }, { position: "topright" }).addTo(map);       </script></body>

這樣就實現(xiàn)了百度地圖的加載

高德加載如下：

var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {        maxZoom: 18,        minZoom: 5    });    var map = L.map("map", {        crs: L.CRS.EPSG3857,//這里坐標系一定要改成3857的！??！        center: [31.59, 120.29],        zoom: 12,        layers: [Gaode],        zoomControl: false    });

總結(jié)一下：我本來是想在一個地圖里面通過切換圖層的方式切換高德和百度，但是由于坐標系的原因，我想到的方法是在進行圖層切換的時候修改一下地圖的坐標系，但是我翻閱了leaflet的文檔沒有找到動態(tài)修改CRS的方法，如果有哪位大神看到了這個帖子，如果可以實現(xiàn)同時切換高德和百度，請告知方法，感謝感謝。