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为目标区域

你可能感兴趣的:(vue学习,JavaScript学习,vue.js,typescript,echarts,bmap)