1.用到的一些依赖性及安装包
1.这里我有使用到mobx全局状态管理，如果有想使用的小伙伴可以去官网看看
mobx 状态管理
安装: npm install mobx --save
(注意：使用mobx还要安装两个依赖项及配置)：
npm install babel-plugin-transform-decorators-legacy --save-dev
npm install @babel/plugin-proposal-decorators --save-dev
2.配置
package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
},
2.地图创建
@observable mapStyle = 'midnight' //地图主题，切换主题时暂存到local
let map = new BMap.Map("demoMap",{ // 创建地图
minZoom: 4, // 地图允许展示最小级别
maxZoom: 19, // 地图允许张氏最大级别
enableMapClick: false //是否开启底图可点功能
});
map.centerAndZoom(new BMap.Point(116.404, 39.915),this.mapZoom); // 初始化地图坐标
map.centerAndZoom('北京',this.mapZoom); //初始化城市 必须跟point 对应
map.enableScrollWheelZoom(true); // 开启鼠标鼠标滚轮缩放
map.enableDragging(); // 开启拖拽功能
// 设置地图样式。
if(this.mapStyle && this.mapStyle.length > 10) { // 如果切换的是自定义地图，设置样式的方法特殊
map.setMapStyleV2({ styleId: this.mapStyle })
} else { // 如果切换的是其他样式：午夜蓝、黑夜、卫星、默认
map.setMapStyle({ style: this.mapStyle }) // 设置地图样式
}
if(this.mapStyle == 'special') { // 如果选择的是卫星图
map.setMapType(BMAP_HYBRID_MAP) // 此地图类型展示卫星视图
}
// 数据循环
arr.forEach((item ,index)=> { // 循环数据 获取坐标 放到绘制里面
getBoundary(item)
})
// 创建覆盖物
function getBoundary(citys) {
let bdary = new BMap.Boundary(); // 创建一个区域的边界
bdary.get(citys.city, function(rs){
let count = rs.boundaries.length;
if(count > 0) { // length 大于 0 的时候说明里面又坐标点
for( var i = 0; i < count; i++ ){
// new BMap.Polygon 多边形覆盖物
let ply = new BMap.Polygon(rs.boundaries[i],{
strokeWeight: 1, // 边线的宽度
strokeColor: '#5dbac0', // 边线border的颜色
strokeOpacity: 0.4 , // 边线透明度
fillColor: '#5dbac0', // 填充颜色
fillOpacity: 0.4 // 填充颜色透明度
});
// size 宽度和高度创建一个矩形区域大小对象
let icon = new BMap.Icon(mapCenterPoint, new BMap.Size(20, 20)); //定位中心点的Icon样式
let marker = new BMap.Marker(convertMapPoint(citys.centerPoint),{
icon
}) // 创建一个图像标注实例。point参数指定了图像标注所在的地理位置
// 添加弹窗
let msg = `<div id="fullViewMapInfo" class="full-view-map-info">
<h1>${citys.city}</h1>
<p>${citys.score}</p>
</div>`
let mapInfoBox = new BMapLib.InfoBox(map,msg,{
offset: new BMap.Size(10, 30), // 偏移量
boxStyle:{ // 定义样式
},
closeIconUrl: closeImg, // 关闭按钮的url地址
enableAutoPan: false, // 是否启动平移功能
})
marker.name = ply.name = citys.city;
if(ply.name == that.nowCityName ){ // 判断多边形覆盖物城市是否为选中的高亮城市
ply.setStrokeColor('#fff'); // 折线的颜色
ply.setStrokeOpacity(1); // 设置透明度
ply.setStrokeWeight(2); // 边线的宽度
}
if(map && map.addOverlay){
let flag = true;
that.markerArr.forEach(item => {
if(ply.name == item.name ) {
flag = false;
}
})
if(flag) {
that.markerArr.push(marker);
map.addOverlay(marker); // 每个覆盖物添加icon图标
}
map.addOverlay(ply); // 将覆盖物添加到地图上，一个覆盖物实例只能添加一次
}
let cityObj = {};
cityObj.city = citys.city;
cityObj.ply = ply;
let isArr = [];
isArr.push(cityObj);
let isArr2 = that.plyArr.concat(isArr);
that.plyArr = isArr2;
ply.addEventListener('click',function(e) { // 多边形添加监听函数
mapInfoBox.open(e.point); // 打开
});
marker.addEventListener('click', function(e){ // 点图添加事件监听函数
that.highLight(e.target.name,true);
})
}
}
}
}
map.clearOverlays(); // 清除地图上所有的覆盖物
3.改变地图缩放功能
@action changeMapZoom = (opt) => {
if(opt == 'add'){ // 当点击增加按钮的时候 缩放等级放大一级 与否缩小
this.mapZoom += 1;
if(this.mapZoom > 19){
this.mapZoom = 19;
}
this.map.setZoom(this.mapZoom); // 将视图切换到指定的缩放等级，中心点坐标不变
} else {
this.mapZoom -= 1;
if(this.mapZoom < 4 ){
this.mapZoom = 4;
}
this.map.setZoom(this.mapZoom);
}
}
4.根据鼠标滚轮改变地图缩放
// id 是地图的id zoom是当前地图的缩放级别
mapWheel = (id, zoom) => {
document.querySelector(id).onmousewheel = (e) => {
if(e.wheelDelta > 0) {
zoom = map.getZoom() + 1;
if (zoom > 19) { // 最高 缩放为19 当超出19 也默认为19
zoom = 19
}
}
if (e.wheelDelta < 0) {
zoom = map.getZoom() - 1
if zoom < 4) {
zoom = 4
}
}
}
}
