vue+iview+typescript+echarts+百度地图【echarts与百度地图的混合使用】遇到的问题

  版本说明： vue：2.6+，iview：3.4+， vuex：3.0+，   

 1、echarts的引入：npm install --save ， vue页面中：import echarts from 'echarts'；

 2、百度地图的引入：首先在百度地图API官网申请key，然后在index.html中引入：

接着在vue.config.js中的module.exports={}中添加一下代码，若不添加会出问题，BMap is undefined：

configureWebpack: {
  externals: {
    "BMap": "BMap",
  },
},

最后在使用百度地图的vue文件中引入：import BMap from 'BMap'; （可有可无）  require('echarts/extension/bmap/bmap');（必须有）。

 3、初始化echarts

html：（class="bdMap"设置地图的宽高，没有宽高地图不显示）

ts：
const mapDom = document.getElementById('bdMap') as HTMLCanvasElement;
let myMap;
if (mapDom) {
  myMap = echarts.init(mapDom);
}
let option = {
  bmap: {
    roam: true, // 用户是否可以拖拽和缩放地图
    opt: {
      enableMapClick: false,
    },
    mapStyle: { // 设置地图的样式
      styleJson: [
      ]
    },
  },
  series: [],
};
myMap.setOption(option, true);

 4、在地图上画区域

let bmap = myMap.getModel().getComponent('bmap').getBMap(); // 获取bmap的实例

bmap.centerAndZoom(new BMap.Point(121.482249, 31.223212), 15); // 设置地图初始化时的中心点及缩放级别

let polygon = new BMap.Polygon(point, {strokeWeight: 2, strokeColor: '#ff0000'});  // 建立多边形覆盖物  

bmap.addOverlay(polygon);  // 画区域时 如果坐标点是多个数组 则遍历数组并将polygon一一添加到map中

注：如果在每次进入地图的时候，需要重新绘制区域【比如地图需要根据选择的内容不同展示不同的区域】

let overlayList = bmap.getOverlays(); // 获取到地图上所有覆盖物

for (let lay = 0, layLen = overlayList.length; lay < layLen; lay++) {  // 遍历这些覆盖物并根据条件移除覆盖物

    if (overlayList[lay].zo) {  // 判断这些覆盖物是polygon区域  也可以判断Label(content且content不为'shadow')、Marker(Bc) 【可根据自己爱好选择判断条件】

        bmap.removeOverlay(overlay[lay]); // 清除符合条件的覆盖物，不建议将所有的覆盖物一起清除，因为会将地图默认的覆盖物清除，其他的功能会受影响

    }

}

不建议直接使用clearOverlay() ， 因为将所有的覆盖物清除，可能会影响地图的层级关系，在拖拽的时候报错，尽管可以正常使用。

5、给地图添加点击功能，对Marker点击需要弹出对应的信息，因此需要区分点击的是地图还是Marker。点击事件e.overlay是null的时候，点击的是地图；点击事件e.overlay是undefined的时候，点击的是Marker。

以上是最近遇到过的问题及使用过的功能。

6、在地图上点击时判断是否在已有的区域内

使用BMapLib 类，先在vue.config.js中的module.exports={}中添加一下代码，便于使用此类：

configureWebpack: {
  externals: {
    "BMap": "BMap",
    "BMapLib": "BMapLib",
  },
},

在页面中使用：

BMapLib.GeoUtils.isPointInPolygon(point, polygon) 返回true（在目标区域内）或false（不在目标区域内），point为点击的点，polygon为目标区域