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

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

百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录相关推荐

cesium给地图添加比例尺学习踩坑记录
cesium给地图添加比例尺学习踩坑记录因项目需要在cesium地图中展示比例尺,本来应该是很简单的事,但却碰到了一个引用文件的坑,特此记录: *1.引用依赖文件相信需要用到cesium比例尺组件 ...
高德逆地理编码接口返回数据格式不统一以及百度逆地理编码接口返回数据解析失败的踩坑记录
最近有个需求是定位后根据定位的经纬度获取当前地址的详细信息,例如获取街道名称,街道号,乡镇街道编码,区域编码等信息. 于是乎找到了高德的逆地理编码接口,看了看正好符合我的需求.然而使用起来并不顺利! ...
Android高德地图踩坑记录-内存泄漏问题
1.问题现象最近做项目优化,在查找app可能存在的内存泄漏地方,项目中有用到高德地图SDK,有一个页面有展示地图,每次退出该页面的时候,LeakCanary老是提示有内存泄漏,泄漏的大概信息如下: ...
Echarts中 vab-chart 以全局组件使用时，获取Echarts实例，使用this.myChart.setOption （）
Echarts 以全局组件使用时,获取Echarts实例,使用this.myChart.setOption (),用于解决二次查询销毁上一次的图表代码图代码 legendselect(params ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...
无偏移谷歌瓦片地址_[转]OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)
开源与成熟商业的瓦片地图服务(TMS 2 WMTS),都有如下共同的特性,基本成为了标准: (1) 坐标系:WGS84 (2) 投影:墨卡托投影(Marcator,正轴等角圆柱投影) ------ ...
OSM地图本地发布(一)-----概述
目录一.前言二.开源GIS介绍 1.前端GIS框架 2.后端技术 3.空间数据库 4.地图服务器 4.GIS软件三.技术选型四.文章目录 1.OSM本地发布(一)-----概述 2.OSM本地 ...
在百度地图中叠加CAD图及GIS数据展示踩坑记
前言在之前的几篇博客中分别介绍了在Cesium中实现与CAD的DWG图叠加显示分析 https://www.cnblogs.com/vjmap/p/16541751.html . 高德地图与CAD ...
2019百度地图离线地图制作
根据项目内网需求需要制作一个离线地图,因为外网访问不了在线地图api,因此这里使用了百度的离线地图,当时网上也找过,资源很少,需要改源文件,但很多是16年的帖子了,一改就错,因为百度更新了... 所以 ...