devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE3使用OpenLayer无偏差加载百度地图_vue openlayers加载百度地图

作者：菜鸟追梦旅行 | 2024-02-27 20:30:46

赞

踩

vue openlayers加载百度地图

一、环境配置

安装百度地图

vue3命令

npm install vue-baidu-map-3x --save --force

vue2命令

npm install vue-baidu-map --save --force

安装openlayers

npm install ol --save --force

二、获取百度地图ak

参考文章：vue3使用百度地图(详)-CSDN博客

三、代码

1、main.js

下面的  ak  对应百度地图中申请的 ak。

  1. import {createApp} from 'vue'
  2. import App from './App.vue'
  3. import BaiduMap from "vue-baidu-map-3x";
  4.  
  5. const app = createApp(App)
  6. app.use(BaiduMap, {ak: 'N6xGBXTyDimGbbbbFfyZY6eCWDTGGiG'})
  7. app.mount('#app')

 单独测试百度地图：

  1. <template>
  2.   <baidu-map
  3.       class="map"
  4.       :center="mapCenter"
  5.       :zoom="mapZoom"
  6.       :scroll-wheel-zoom="true"
  7.       @ready="onMapReady">
  8.   </baidu-map>
  9. </template>
  10.  
  11. <script>
  12. export default {
  13.   name: "BaiduMapTest",
  14.   data() {
  15.     return {
  16.       mapCenter: {lng: 116.405706, lat: 39.915599},
  17.       mapZoom: 15,
  18.       map: null,
  19.     }
  20.   },
  21.   methods: {
  22.     /**
  23.      * @Event 方法
  24.      * @description: 获取地图实例，并添加事件监听器
  25.      * */
  26.     onMapReady(map) {
  27.       this.map = map.map;
  28.     },
  29.   }
  30. }
  31. </script>
  32.  
  33. <style scoped>
  34.  
  35. .map {
  36.   width: 100%;
  37.   height: 100vh;
  38. }
  39. </style>

测试结果：

2、MapOpenlayers.vue

ask：为什么能无偏差？
ans：定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。网上很多相关资料在用OpenLayers加载百度地图离线瓦片时都认为投影就是EPSG:3857(也就是Web墨卡托投影)。事实上这是错误的，因此无法做到无偏移加载。百度地图有自己独特的投影体系，必须在OpenLayers中自定义百度投影，才能实现无偏移加载。百度投影实现的核心文件为bd09.js，在迈高图官网可以找到查看这个文件。
ask：为什么不能使用XYZ？
ans：加载百度地图离线瓦片不能用ol.source.XYZ，ol.source.XYZ针对谷歌地图（注意：是谷歌地图）而设计，而百度地图与谷歌地图使用了不同的投影、分辨率和瓦片网格。因此这里使用ol.source.TileImage来自行指定投影、分辨率、瓦片网格。
（注：XYZ: 用于具有URL模板中定义的一组XYZ格式的URL的tile数据）
  1. <template>
  2.   <div id="app">
  3.     <div id="map" style="width: 100%;height: 1000px"></div>
  4.   </div>
  5. </template>
  6. <script>
  7. import { Map, View } from 'ol'// 地图实例方法、视图方法
  8. import Tile from 'ol/layer/Tile'// 瓦片渲染方法
  9. import 'ol/ol.css'
  10. import {onMounted, ref} from "vue";
  11. import {TileGrid} from "ol/tilegrid";
  12. import {TileImage} from "ol/source";
  13. import {addCoordinateTransforms, addProjection, Projection, transform} from "ol/proj";
  14. import {lngLatToMercator, mercatorToLngLat} from "@/utils/bd09";
  15. export default {
  16.   name: "map_openlayers",
  17.   setup () {
  18.     const map = ref()
  19.     const initMap = () => {
  20.       /*定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。
  21.     网上很多相关资料在用OpenLayers加载百度地图离线瓦片时都认为投影就是EPSG:3857(也就是Web墨卡托投影)。
  22.     事实上这是错误的，因此无法做到无偏移加载。
  23.     百度地图有自己独特的投影体系，必须在OpenLayers中自定义百度投影，才能实现无偏移加载。
  24.     百度投影实现的核心文件为bd09.js，在迈高图官网可以找到查看这个文件。*/
  25.       let projBD09 = new Projection({
  26.         code: 'BD:09',
  27.         extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
  28.         units: 'm',
  29.         axisOrientation: 'neu',
  30.         global: false
  31.       });
  32.  
  33.       addProjection(projBD09);
  34.       addCoordinateTransforms("EPSG:4326", "BD:09",
  35.           function (coordinate) {
  36.             // eslint-disable-next-line no-undef
  37.             return lngLatToMercator(coordinate);
  38.           },
  39.           function (coordinate) {
  40.             // eslint-disable-next-line no-undef
  41.             return mercatorToLngLat(coordinate);
  42.           }
  43.       );
  44.  
  45.       /*定义百度地图分辨率与瓦片网格*/
  46.       let resolutions = [];
  47.       for (let i = 0; i <= 18; i++) {
  48.         resolutions[i] = Math.pow(2, 18 - i);
  49.       }
  50.  
  51.       let tilegrid = new TileGrid({
  52.         origin: [0, 0],
  53.         resolutions: resolutions
  54.       });
  55.  
  56.       /*加载百度地图离线瓦片不能用ol.source.XYZ，ol.source.XYZ针对谷歌地图（注意：是谷歌地图）而设计，
  57.       而百度地图与谷歌地图使用了不同的投影、分辨率和瓦片网格。因此这里使用ol.source.TileImage来自行指定
  58.       投影、分辨率、瓦片网格。*/
  59.       let baidu_source = new TileImage({
  60.         projection: "BD:09",//投影类型
  61.         tileGrid: tilegrid,
  62.         tileUrlFunction: function (tileCoord) {
  63.           if (!tileCoord) return "";
  64.           let z = tileCoord[0];
  65.           let x = tileCoord[1];
  66.           let y = tileCoord[2];
  67.           // 对编号xy处理
  68.           let baiduX;
  69.           baiduX = x < 0 ? x : "M" + -x;
  70.           let baiduY;
  71.           baiduY = -y;
  72.           return (
  73.               "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
  74.               baiduX +
  75.               "&y=" +
  76.               baiduY +
  77.               "&z=" +
  78.               z +
  79.               "&styles=pl&udt=20151021&scaler=1&p=1"
  80.           );
  81.         },
  82.       });
  83.  
  84.       let baidu_layer  = new Tile({
  85.         source: baidu_source
  86.       });
  87.  
  88.       new Map({
  89.         layers: [baidu_layer],
  90.         view: new View({
  91.           //https://api.map.baidu.com/lbsapi/getpoint/index.html
  92.           //(利用百度的坐标拾取器获取坐标，在下面设置中心坐标点的经纬度并转换)
  93.           center: transform([116.405706,39.915599], 'EPSG:4326', 'BD:09'),
  94.           projection: 'BD:09',
  95.           zoom: 10
  96.         }),
  97.         target: 'map'
  98.       });
  99.     }
  100.  
  101.     onMounted(() => {
  102.       initMap()
  103.     })
  104.     return {
  105.       initMap,
  106.       map
  107.     }
  108.   }
  109. }
  110. </script>
  111.  
  112. <style scoped>
  113.  
  114. </style>

3、bd09.js

  1. var MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83,
  2.     1678043.12, 0
  3. ];
  4. var LLBAND = [75, 60, 45, 30, 15, 0];
  5. var MC2LL = [
  6.     [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843, -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2],
  7.     [-7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826, -59.36935905485877,
  8.         47.40033549296737, -16.50741931063887,
  9.         2.28786674699375, 10260144.86
  10.     ],
  11.     [-3.030883460898826e-8, 0.00000898305509983578,
  12.         0.30071316287616, 59.74293618442277,
  13.         7.357984074871, -25.38371002664745,
  14.         13.45380521110908, -3.29883767235584,
  15.         0.32710905363475, 6856817.37
  16.     ],
  17.     [-1.981981304930552e-8, 0.000008983055099779535,
  18.         0.03278182852591, 40.31678527705744,
  19.         0.65659298677277, -4.44255534477492,
  20.         0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06
  21.     ],
  22.     [3.09191371068437e-9, 0.000008983055096812155,
  23.         0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4
  24.     ],
  25.     [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]
  26. ];
  27.  
  28. var LL2MC = [
  29.     [-0.0015702102444, 111320.7020616939,
  30.         1704480524535203, -10338987376042340,
  31.         26112667856603880, -35149669176653700,
  32.         26595700718403920, -10725012454188240,
  33.         1800819912950474, 82.5
  34.     ],
  35.     [0.0008277824516172526, 111320.7020463578,
  36.         647795574.6671607, -4082003173.641316,
  37.         10774905663.51142, -15171875531.51559,
  38.         12053065338.62167, -5124939663.577472,
  39.         913311935.9512032, 67.5
  40.     ],
  41.     [0.00337398766765, 111320.7020202162,
  42.         4481351.045890365, -23393751.19931662,
  43.         79682215.47186455, -115964993.2797253,
  44.         97236711.15602145, -43661946.33752821,
  45.         8477230.501135234, 52.5
  46.     ],
  47.     [0.00220636496208, 111320.7020209128,
  48.         51751.86112841131, 3796837.749470245,
  49.         992013.7397791013, -1221952.21711287,
  50.         1340652.697009075, -620943.6990984312,
  51.         144416.9293806241, 37.5
  52.     ],
  53.     [-0.0003441963504368392, 111320.7020576856,
  54.         278.2353980772752, 2485758.690035394,
  55.         6070.750963243378, 54821.18345352118,
  56.         9540.606633304236, -2710.55326746645,
  57.         1405.483844121726, 22.5
  58.     ],
  59.     [-0.0003218135878613132, 111320.7020701615,
  60.         0.00369383431289, 823725.6402795718,
  61.         0.46104986909093, 2351.343141331292,
  62.         1.58060784298199, 8.77738589078284,
  63.         0.37238884252424, 7.45
  64.     ]
  65. ];
  66.  
  67. // eslint-disable-next-line no-unused-vars
  68. export function lngLatToMercator(T) {
  69.     var c = new cd(T[0], T[1]);
  70.     var r = convertLL2MC(c);
  71.     return [r.lng, r.lat];
  72. }
  73.  
  74. // eslint-disable-next-line no-unused-vars
  75. export function mercatorToLngLat(T) {
  76.     var c = new cd(T[0], T[1]);
  77.     var r = convertMC2LL(c);
  78.     return [r.lng, r.lat];
  79. }
  80.  
  81. function convertLL2MC(T) {
  82.     var cL, cN;
  83.     T.lng = getLoop(T.lng, -180, 180);
  84.     T.lat = getRange(T.lat, -74, 74);
  85.     cL = new cd(T.lng, T.lat);
  86.     for(var cM = 0; cM < LLBAND.length; cM++) {
  87.         if(cL.lat >= LLBAND[cM]) {
  88.             cN = LL2MC[cM];
  89.             break
  90.         }
  91.     }
  92.     if(!cN) {
  93.         for(var cM = LLBAND.length - 1; cM >= 0; cM--) {
  94.             if(cL.lat <= -LLBAND[cM]) {
  95.                 cN = LL2MC[cM];
  96.                 break
  97.             }
  98.         }
  99.     }
  100.     var cO = convertor(T, cN);
  101.     var T = new cd(cO.lng.toFixed(2), cO.lat.toFixed(2));
  102.     return T
  103. }
  104.  
  105. function convertMC2LL(cL) {
  106.     var cM, cO;
  107.     cM = new cd(Math.abs(cL.lng), Math.abs(cL.lat));
  108.     for(var cN = 0; cN < MCBAND.length; cN++) {
  109.         if(cM.lat >= MCBAND[cN]) {
  110.             cO = MC2LL[cN];
  111.             break
  112.         }
  113.     }
  114.     var T = convertor(cL, cO);
  115.     var cL = new cd(T.lng.toFixed(6), T.lat.toFixed(6));
  116.     return cL
  117. }
  118.  
  119. function getRange(cM, cL, T) {
  120.     if(cL != null) {
  121.         cM = Math.max(cM, cL)
  122.     }
  123.     if(T != null) {
  124.         cM = Math.min(cM, T)
  125.     }
  126.     return cM
  127. }
  128.  
  129. function getLoop(cM, cL, T) {
  130.     while(cM > T) {
  131.         cM -= T - cL
  132.     }
  133.     while(cM < cL) {
  134.         cM += T - cL
  135.     }
  136.     return cM
  137. }
  138.  
  139. function convertor(cM, cN) {
  140.     if(!cM || !cN) {
  141.         return
  142.     }
  143.     var T = cN[0] + cN[1] * Math.abs(cM.lng);
  144.     var cL = Math.abs(cM.lat) / cN[9];
  145.     var cO = cN[2] + cN[3] * cL + cN[4] * cL * cL + cN[5] * cL *
  146.         cL * cL + cN[6] * cL * cL * cL * cL + cN[7] * cL *
  147.         cL * cL * cL * cL + cN[8] * cL * cL * cL * cL *
  148.         cL * cL;
  149.     T *= (cM.lng < 0 ? -1 : 1);
  150.     cO *= (cM.lat < 0 ? -1 : 1);
  151.     return new cd(T, cO)
  152. }
  153.  
  154. function cd(T, cL) {
  155.     if(isNaN(T)) {
  156.         T = bV(T);
  157.         T = isNaN(T) ? 0 : T
  158.     }
  159.     if(b3(T)) {
  160.         T = parseFloat(T)
  161.     }
  162.     if(isNaN(cL)) {
  163.         cL = bV(cL);
  164.         cL = isNaN(cL) ? 0 : cL
  165.     }
  166.     if(b3(cL)) {
  167.         cL = parseFloat(cL)
  168.     }
  169.     this.lng = T;
  170.     this.lat = cL
  171. }
  172. cd.isInRange = function(T) {
  173.     return T && T.lng <= 180 && T.lng >= -180 && T.lat <= 74 &&
  174.         T.lat >= -74
  175. };
  176. cd.prototype.equals = function(T) {
  177.     return T && lat == T.lat && lng == T.lng
  178. };
  179.  
  180. function bV(cN) {
  181.     var cL = "";
  182.     var cU, cS, cQ = "";
  183.     var cT, cR, cP, cO = "";
  184.     var cM = 0;
  185.     var T = /[^A-Za-z0-9\+\/\=]/g;
  186.     if(!cN || T.exec(cN)) {
  187.         return cN
  188.     }
  189.     cN = cN.replace(/[^A-Za-z0-9\+\/\=]/g, "");
  190.     do {
  191.         cT = cf.indexOf(cN.charAt(cM++));
  192.         cR = cf.indexOf(cN.charAt(cM++));
  193.         cP = cf.indexOf(cN.charAt(cM++));
  194.         cO = cf.indexOf(cN.charAt(cM++));
  195.         cU = (cT << 2) | (cR >> 4);
  196.         cS = ((cR & 15) << 4) | (cP >> 2);
  197.         cQ = ((cP & 3) << 6) | cO;
  198.         cL = cL + String.fromCharCode(cU);
  199.         if(cP != 64) {
  200.             cL = cL + String.fromCharCode(cS)
  201.         }
  202.         if(cO != 64) {
  203.             cL = cL + String.fromCharCode(cQ)
  204.         }
  205.         cU = cS = cQ = "";
  206.         cT = cR = cP = cO = ""
  207.     } while (cM < cN.length);
  208.     return cL
  209. }
  210.  
  211. function b3(T) {
  212.     return typeof T == "string"
  213. }

运行结果截图

如需要定位的话，添加以下方法：

  1. function searchPoint(_point) {
  2.         _point = tobdMap(_point.split(","));//如果传入的是火星坐标系的话，要转成百度坐标系
  3.         var point = new ol.Feature({geometry:
  4.         new ol.geom.Point(ol.proj.fromLonLat(_point, 'BD:09'))})// 将经纬度转成BD:09投影，此投影需引入bd09.js
  5.         point.setStyle(new ol.style.Style({
  6.                 image:new ol.style.Icon({
  7.                 anchor: [0.5, 1],
  8.         src:
  9.         basePath + "/img/localpoint.png"
  10.         })
  11.  
  12.     }));
  13.  
  14.         pointSource.clear();
  15.         pointSource.addFeature(point);
  16.         map.setView(new ol.View({
  17.                 center:ol.proj.transform(_point, 'EPSG:4326', 'EPSG:3857'),
  18.                 zoom:8,
  19.                 maxZoom:19
  20.     }));
  21.  };
  22.  
  23. //火星坐标系转百度坐标系
  24. function tobdMap(coordinate) {
  25. 	    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  26. 	    let x = coordinate[0];
  27. 	    let y =  coordinate[1];
  28. 	    let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
  29. 	    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
  30. 	    let lngs = z * Math.cos(theta) + 0.0065;
  31. 	    let lats = z * Math.sin(theta) + 0.006;
  32. 	    let zb=[];
  33. 	    zb[0]=lngs;
  34. 	    zb[1]=lats;
  35. 	    return zb;
  36. 	 }

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号