需求
开发大屏地图可视化展示时想要只展示中国区域地图，其他部分透明，使用自定义图片作为背景
解决方法：自定义地图
主要是将陆地和水系透明度设置为0，需要先设置为单一颜色，再调整透明度为0，否则可能出现无法调整透明度的问题。
import MapData from './map';
initMap = () => {
const { businessMapProjectDTOS, provinceLocationAndProjectNumbers } = this.state.mapData;
// 定义行政区域
let disCountry = new AMap.DistrictLayer.Country({
zIndex: 10,
SOC: 'CHN',
depth: 1,
styles: {
'nation-stroke': '#00F6FF',
'coastline-stroke': '#00F6FF',
'province-stroke': '#00F6FF',
'fill': (props) => {
return this.getColorByDGP(props.adcode_pro)
}
}
})
// 定义地图，使用自定义样式
this.map = new AMap.Map('container', {
mapStyle: 'amap://styles/a2ebd486f0f7ff0e51174dc437bee53c', // 自定义地图样式
resizeEnable: true, //是否监控地图容器尺寸变化
layers: [disCountry], //地图图层数组
zooms: [3, 10], // 缩放级别范围
center: [106.122082, 33.719192],
zoom: 4.5,
isHotspot: false, // 是否开启地图热点和标注的hover效果
defaultCursor: 'pointer', // 默认鼠标样式
viewMode: '2D', // 默认为2D，可选3D
});
this.map.on('complete', () => {
var layer = new AMap.LabelsLayer({
collision: false, // 开启标注避让，默认为开启，v1.4.15 新增属性
animation: true, // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
zIndex: 51
});
// 行政区名字labelsMarker
for (let i = 0; i < MapData.LabelsData.length; i++) {
var labelsMarker = new AMap.LabelMarker(MapData.LabelsData[i]);
layer.add(labelsMarker);
}
this.map.add(layer);
// 打图标和文字
for (let i = 0; i < businessMapProjectDTOS.length; i++) {
this.iconMarks[i] = new AMap.Marker({
position: [businessMapProjectDTOS[i].longitude, businessMapProjectDTOS[i].latitude],
anchor: 'center', //设置锚点
offset: new AMap.Pixel(0, 0), //设置偏移量
zIndex: 3,
content: `<img class="marker-icon" src=${importantIcon}>`,
});
this.nameMarkers[i] = new AMap.Marker({
position: [businessMapProjectDTOS[i].longitude, businessMapProjectDTOS[i].latitude],
anchor: 'center', //设置锚点
offset: new AMap.Pixel(-10, -55), //设置偏移量
zIndex: 4,
content: `
<div class="marker-label">
<span>${businessMapProjectDTOS[i].projectAbbreviation}</span>
</div>`,
map: this.map,
});
// 给文字标添加点击事件
AMap.event.addListener(this.nameMarkers[i], 'click', (e) => {
this.setState({
detailObj: businessMapProjectDTOS[i]
})
})
AMap.event.addListener(this.iconMarks[i], 'click', (e) => {
this.setState({
detailObj: businessMapProjectDTOS[i]
})
})
}
this.map.add(this.iconMarks);
this.map.add(this.nameMarkers);
})
}
getColorByDGP = (adcode) => {
let colors = []
if (!colors[adcode]) {
if (adcode === 110000 || adcode === 120000 || adcode === 130000 || adcode === 310000 || adcode === 320000 || adcode === 330000 || adcode === 340000 || adcode === 440000 || adcode === 500000 || adcode === 510000) {
colors[adcode] = 'rgba(199,246,177,.8)';
} else {
colors[adcode] = 'rgba(3, 140, 230, 0.7)';
}
}
return colors[adcode];
}
map.js
var districts = [
{
citycode: [],
adcode: '440000',
name: '广东',
center: '113.280637,23.125178',
level: 'province',
districts: [],
projectNum: 2
},
{
citycode: [],
adcode: '410000',
name: '河南',
center: '113.665412,34.757975',
level: 'province',
districts: [],
projectNum: 2
},
{
citycode: [],
adcode: '150000',
name: '内蒙古',
center: '111.670801,40.818311',
level: 'province',
districts: [],
projectNum: 15
},
{
citycode: [],
adcode: '230000',
name: '黑龙江',
center: '126.642464,45.756967',
level: 'province',
districts: [],
projectNum: 12
},
{
citycode: [],
adcode: '650000',
name: '新疆',
center: '87.617733,43.792818',
level: 'province',
districts: [],
projectNum: 8
},
{
citycode: [],
adcode: '420000',
name: '湖北',
center: '114.298572,30.584355',
level: 'province',
districts: [],
projectNum: 2
},
{
citycode: [],
adcode: '210000',
name: '辽宁',
center: '123.429096,41.796767',
level: 'province',
districts: [],
projectNum: 30
},
{
citycode: [],
adcode: '370000',
name: '山东',
center: '117.000923,36.675807',
level: 'province',
districts: [],
projectNum: 10
},
{
citycode: [],
adcode: '610000',
name: '陕西',
center: '108.948024,34.263161',
level: 'province',
districts: [],
projectNum: 9
},
{
citycode: '021',
adcode: '310000',
name: '上海',
center: '121.472644,31.231706',
level: 'province',
districts: [],
projectNum: 7
},
{
citycode: [],
adcode: '520000',
name: '贵州',
center: '106.713478,26.578343',
level: 'province',
districts: [],
projectNum: 5
},
{
citycode: '023',
adcode: '500000',
name: '重庆',
center: '106.504962,29.533155',
level: 'province',
districts: [],
projectNum: 6
},
{
citycode: [],
adcode: '540000',
name: '西藏',
center: '91.132212,29.660361',
level: 'province',
districts: [],
projectNum: 17
},
{
citycode: [],
adcode: '340000',
name: '安徽',
center: '117.283042,31.86119',
level: 'province',
districts: [],
projectNum: 15
},
{
citycode: [],
adcode: '350000',
name: '福建',
center: '119.306239,26.075302',
level: 'province',
districts: [],
projectNum: 8
},
{
citycode: [],
adcode: '430000',
name: '湖南',
center: '112.982279,28.19409',
level: 'province',
districts: [],
projectNum: 21
},
{
citycode: [],
adcode: '460000',
name: '海南',
center: '110.33119,20.031971',
level: 'province',
districts: [],
projectNum: 13
},
{
citycode: [],
adcode: '320000',
name: '江苏',
center: '118.767413,32.041544',
level: 'province',
districts: [],
projectNum: 21
},
{
citycode: [],
adcode: '630000',
name: '青海',
center: '101.778916,36.623178',
level: 'province',
districts: [],
projectNum: 34
},
{
citycode: [],
adcode: '450000',
name: '广西',
center: '108.320004,22.82402',
level: 'province',
districts: [],
projectNum: 32
},
{
citycode: [],
adcode: '640000',
name: '宁夏',
center: '106.278179,38.46637',
level: 'province',
districts: [],
projectNum: 30
},
{
citycode: [],
adcode: '360000',
name: '江西',
center: '115.892151,28.676493',
level: 'province',
districts: [],
projectNum: 28
},
{
citycode: [],
adcode: '330000',
name: '浙江',
center: '120.153576,30.287459',
level: 'province',
districts: [],
projectNum: 26
},
{
citycode: [],
adcode: '130000',
name: '河北',
center: '114.502461,38.045474',
level: 'province',
districts: [],
projectNum: 24
},
{
citycode: '1853',
adcode: '820000',
name: '澳门',
center: '113.54909,22.198951',
level: 'province',
districts: [],
projectNum: 22
},
{
citycode: '1886',
adcode: '710000',
name: '台湾',
center: '121.509062,25.044332',
level: 'province',
districts: [],
projectNum: 20
},
{
citycode: '1852',
adcode: '810000',
name: '香港',
center: '114.173355,22.320048',
level: 'province',
districts: [],
projectNum: 18
},
{
citycode: [],
adcode: '620000',
name: '甘肃',
center: '103.823557,36.058039',
level: 'province',
districts: [],
projectNum: 16
},
{
citycode: [],
adcode: '510000',
name: '四川',
center: '104.065735,30.659462',
level: 'province',
districts: [],
projectNum: 14
},
{
citycode: [],
adcode: '220000',
name: '吉林',
center: '125.3245,43.886841',
level: 'province',
districts: [],
projectNum: 12
},
{
citycode: '022',
adcode: '120000',
name: '天津',
center: '117.190182,39.125596',
level: 'province',
districts: [],
projectNum: 10
},
{
citycode: [],
adcode: '530000',
name: '云南',
center: '102.712251,25.040609',
level: 'province',
districts: [],
projectNum: 8
},
{
citycode: '010',
adcode: '110000',
name: '北京',
center: '116.405285,39.904989',
level: 'province',
districts: [],
projectNum: 5
},
{
citycode: [],
adcode: '140000',
name: '山西',
center: '112.549248,37.857014',
level: 'province',
districts: [],
projectNum: 2
}
];
var LabelsData = [];
const directions = {
'北京':'top',
'河北':'right',
'宁夏':'bottom',
'浙江':'bottom',
'上海':'right',
'青海': 'left',
'黑龙江':'top',
'江苏':'right',
'安徽':'top',
'重庆':'right',
'湖南':'left',
'澳门':'bottom',
'香港':'right',
'台湾':'bottom',
'内蒙古':'top',
};
for (let i = 0; i < districts.length; i++) {
let config = {
name: '',
position: [116.12, 39.11],
zooms: [4, 13],
zIndex: 1,
opacity: 1,
text: {
content: '',
direction: 'center',
offset: [0, 0],
zooms: [3, 20],
style: {
fontSize: 12,
fontWeight: 'normal',
fillColor: '#fff',
}
}
};
let district = districts[i];
let name = district.name;
config.text.content = name;
config.position = district.center.split(',');
if (directions[name]) {
config.text.direction = directions[name];
}
LabelsData.push(config);
}
export default { LabelsData, districts };
