百度舆图 osm舆图 leaflet echarts webapck的组合使用时的踩坑纪录

2024年5月22日 238次阅读 来源: 大侯

webpack+百度舆图

建立 script标签举行加载

export function MP(ak){ 
    return new Promise(function (resolve, reject){   
        window.onload = function () {     
          resolve(BMap)   
        }   
        var script = document.createElement("script");    
        script.type = "text/javascript";   
        script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";   
        script.onerror = reject;   
        document.head.appendChild(script); 
    });
 }

运用：

import {MP} from './map.js'; 
MP("your ak").then(BMap => {
    // do something
}）

webpack+百度舆图+echart

须要
1 百度舆图
2 echart
3 bmap.min.js 增加扩大，用于让百度舆图支撑echart https://github.com/apache/inc…

webpack+osm舆图+leaflet

可能会碰见两个题目：
1 舆图图片错位 遗忘加载leaflet.css
2 webpack 中运用leaflet 的一个重要题目是默许图标的加载题目，详见
https://segmentfault.com/q/10…

别的也能够斟酌运用动态建立<script>标签的要领，相似百度舆图加载

webpack+百度舆图+leaflet

由于leaflet自身支撑的是WGS84的坐标系 ，而百度舆图在中国运用的是百度坐标系，所以假如要在百度舆图中运用leaflet的话，一是须要画图数据变更为百度舆图的BD09坐标系，二是须要对leaflet增加扩大，使其在举行经纬度坐标转化时运用百度舆图的映照体系

解决方案： http://tiven.wang/articles/us…

以上题目的代码示例 https://gitlab.com/dahou/maps

    原文作者：大侯
    原文地址: https://segmentfault.com/a/1190000018327244
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞