用echarts绘制的相关地图，热力图层，点，背景等都可修改，demo平台首页地图：
注意事项：
项目中安装的echarts版本必须是4.9.0
"echarts": "^4.9.0",
"echarts-countries-js": "^1.0.5",
"echarts-gl": "^1.1.2",
展示的相关区县官方json文件的获取方法：
打开：
然后输入相关的市的展示，点击其他类型的下载或粘贴即可获取相对应的json
相关完整的组件代码：
<template>
<!-- 地图 -->
<div style="width: 100%; position: relative" :style="{ height: height }">
<div id="main" :style="{ height: height,width:width }"></div>
</div>
</template>
<script type="text/ecmascript-6">
let bdJson;
export default {
props:{
height:{
type:String,
default:'550px'
},
width:{
type:String,
default:'100%'
},
MapBtnNum:{
type:Number,
default:0
},
pointList:{ //相关标记点的数组
type:Array,
default:()=>[
{
name: '业委会一',
value: [117.253931,34.870574],
datas: 1354,
message:'这里展示的相关待定的信息',
img : 'image://data:image/png;base64,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'
},{
name: '业委会二',
value: [117.697883,34.695889],
datas: 1354,
message:'这里展示的相关待定的信息',
img : 'image://data:image/png;base64,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'
},{
name: '业委会三',
value: [117.487563,35.132384],
datas: 1354,
message:'这里展示的相关待定的信息',
img : 'image://data:image/png;base64,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'
}
]
},
heatList:{ //热力地图标记展示的数组
type:Array,
default:()=>[
{
name:'点一',
coor:[117.463632,35.11275],
value:10
},{
name:'点二',
coor:[117.464495,35.108587],
value:450
},{
name:'点三',
coor:[117.458566,35.110742],
value:110
},{
name:'点四',
coor:[117.457632,35.113784],
value:1100
},{
name:'点五',
coor:[117.572337,34.872095],
value:1100
}
]
},
mapAbout:{ //map的相关属性的设置
type:Object,
default:()=>{
return{
mapBg:require('../../../assets/indexNormal/mapBg.jpg'), //地图的覆盖图片
mapHoverBg:require('../../../assets/indexNormal/mapBg.jpg'),
visualMapMax:100, //这是热力地图展示的最大值,用来控制颜色的展示
inRangeColor:['#D14137','#E7CF1A','#22B536','#047ACF'], //这是展示的颜色,顺序依次为从大到小
geoAspectScale:0.75, //这里是贴图与背景展示的关系
geoLeft:'19%', //控制贴图的位置'
geoLayoutSize:'88%', //这个控制贴图大小
geoSilent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
geoRoam: true, //是否开启鼠标缩放和平移漫游
geoScaleMin:1.1,//滚轮缩放的最小值
geoScaleMax:2.2,//滚轮缩放的最大值
geoZoom:1.1, //这是底部背景的大小
mapAreaColor: '#0DD3E4', //这是底下偏移的柱子的颜色
mapShadowColor: 'RGBA(13, 211, 228, 0.9)', //外发光的颜色
mapShadowBlur: 20, //外发光的距离
mapShadowOffsetX: 0,
mapShadowOffsetY: 0,
mapBorderColor: 'rgba(0, 0, 0, 0.7)', //底下地图描边的颜色
mapBorderWidth: 0, //底下地图描边的大小
}
}
},
series:{ //series的相关树形设置
type:Object,
default:()=>{
return{
labelShow:true, //文字是否展示
labelColor:'#ffffff', //文字展示的颜色
labelHoverColor:'#ffffff', //鼠标滑过文字展示的颜色
mapBorderColor: '#2ab8ff', //这个是各个区域描边的线
mapBorderWidth: 1, //区域描边的大小
mapShadowColor: 'rgba(0, 0, 0, 0.5)', //描边的的shadow
mapShadowBlur: 0, //描边的的shadow的发光
mapShadowOffsetX: 0,
mapShadowOffsetY: 1,
mapHoverBorderColor: '#2ab8ff', //鼠标滑过的描边的颜色
mapHoverBorderWidth: 1, //鼠标滑过的描边的带线啊哦
mapHoverShadowColor: 'rgba(0, 255, 255, 0.7)', //鼠标滑过的阴影的颜色
mapHoverShadowBlur: 10, //鼠标滑过的阴影的发光的大小
mapHoverShadowOffsetX: 0,
mapHoverShadowOffsetY: 1,
zoom:1.06, //展示在屏幕上合适的大小
roam: true, //是否开启鼠标缩放和平移漫游
left:'19%', //调整展示距离
min:1.06, //最小
max:2.2, //最大
symbolSize: [20, 24], //点的大小
symbolOffset: [0, -20], //点移动的距离
}
}
},
},
data() {
return {
indexMap: '',
}
},
created(){
bdJson = require('../../../assets/json/bd.json')
},
methods: {
initMap() {
let that = this;
var myChart = that.$echarts.init(document.getElementById('main'));
that.indexMap = myChart
var bd = bdJson;
var mapname = bd;
var mapDate = this.pointList
//这是相关热力地图的数组数据start
var heatList = this.heatList
var geoCoordMap = {}
heatList.map(item => {
geoCoordMap[item.name] = item.coor // 根据自己需求可以拼接
})
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push(geoCoord.concat(data[i].value));
}
}
return res;
};
//热力图end
//标注的点的base64的图片
var domImg = document.createElement('img');
domImg.style.height = domImg.height = domImg.width = domImg.style.width = '500px';
domImg.src = that.mapAbout.mapBg
var domImgHover = document.createElement('img');
domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px';
domImgHover.src = that.mapAbout.mapHoverBg
myChart.showLoading('default', {
text: '加载中...',
maskColor: 'rgba(0,0,0,0)',
textColor: '#fff',
});
myChart.on('click', function (e) {
mapDate.forEach(item=>{
if(e.name == item.name){
//这里是点的标注的点击事件，根据实际情况来
// that.$emit('showInfo',item)
}
})
});
setTimeout(function () {
mapInit();
}, 1000);
var mapInit = () => {
that.$echarts.registerMap('bd', mapname);
that.indexMap.hideLoading();
that.indexMap.setOption({
//热力地图展示
visualMap: {
min: 0,
max: that.mapAbout.visualMapMax,
splitNumber: 4,
inRange: {
color: that.mapAbout.inRangeColor.reverse()
},
// textStyle: {
// color: '#fff'
// },
show:false,
},
//TODO geo 展示的点
geo: {
map: 'bd',
aspectScale: that.mapAbout.geoAspectScale,
left: that.mapAbout.geoLeft,
layoutSize: that.mapAbout.geoLayoutSize,
silent: that.mapAbout.geoSilent, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
roam: that.mapAbout.geoRoam, //是否开启鼠标缩放和平移漫游
scaleLimit:{ //滚轮缩放的极限控制
min:that.mapAbout.geoScaleMin,
max:that.mapAbout.geoScaleMax
},
z: 0,
zoom: that.mapAbout.geoZoom,
itemStyle: {
areaColor:that.mapAbout.mapAreaColor, //这是底下偏移的柱子的颜色
shadowColor: that.mapAbout.mapShadowColor, //外发光的颜色
shadowBlur: that.mapAbout.mapShadowBlur, //外发光的距离
shadowOffsetX: that.mapAbout.mapShadowOffsetX,
shadowOffsetY: that.mapAbout.mapShadowOffsetY,
borderColor: that.mapAbout.mapBorderColor, //底下地图描边的颜色
borderWidth: that.mapAbout.mapBorderWidth, //底下地图描边的大小
},
},
series: [
{
name:'覆盖图层',
type: 'map',
label: {
show: that.series.labelShow,
textStyle: {
color: that.series.labelColor,
},
emphasis: {
textStyle: {
color: that.series.labelHoverColor,
},
},
},
itemStyle: {
borderColor: that.series.mapBorderColor, //这个是各个区域描边的线
borderWidth: that.series.mapBorderWidth,
areaColor: {
image: domImg,
repeat: 'repeat',
},
shadowColor: that.series.mapShadowColor, //描边的的shadow
shadowBlur: that.series.mapShadowBlur,
shadowOffsetX: that.series.mapShadowOffsetX,
shadowOffsetY: that.series.mapShadowOffsetY,
emphasis: { //这是鼠标划上的高亮的显示的样式
areaColor: {
image: domImgHover,
repeat: 'repeat',
},
borderColor: that.series.mapHoverBorderColor,
borderWidth: that.series.mapHoverBorderWidth,
shadowColor: that.series.mapHoverShadowColor,
shadowBlur: that.series.mapHoverShadowBlur,
shadowOffsetX: that.series.mapHoverShadowOffsetX,
shadowOffsetY: that.series.mapHoverShadowOffsetY,
label: {
show: false,
},
},
},
zoom: that.series.zoom,
// silent: false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
roam: that.series.roam,
left:that.series.left,
scaleLimit:{
min:that.series.min,
max:that.series.max
},
map: 'bd',
},
//坐标点
{
name:'点标注',
coordinateSystem: 'geo',
itemStyle: {
color: 'rgba(0,0,0,1)',
},
// symbol: pointImg,
symbol: function (value, params) {
return params.data.img;
},
symbolSize: that.series.symbolSize,
symbolOffset: that.series.symbolOffset,
z: 9999,
data: mapDate,
type:'effectScatter', //动效展示
rippleEffect: {
scale: 3,
brushType: 'stroke',
},
},
{
name: '热力图层',
type: 'heatmap',
coordinateSystem: 'geo',
data: convertData(that.heatList),
z: 3,
silent: false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
roam: false,
},
],
});
};
//两层一起滚动拖拽
that.indexMap.on('georoam',function(params){
var option = that.indexMap.getOption();//获得option对象
if(params.zoom!=null&¶ms.zoom!=undefined){ //捕捉到缩放时
option.geo[0].zoom=option.series[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变
}else{//捕捉到拖曳时
if(option.geo[0].center!=null&&option.geo[0].center!=undefined){
option.series[0].center = option.geo[0].center
}else{
option.geo[0].center = option.series[0].center
}
}
that.indexMap.setOption(option);//设置option
});
},
},
mounted() {
var that = this
// 新建一个promise对象
let newPromise = new Promise((resolve) => {
resolve()
})
//然后异步执行echarts的初始化函数
newPromise.then(() => {
that.initMap()
})
},
}
</script>
<style scoped lang="scss">
.indexMapBack{
width: 70px;
height: 73px;
position: absolute;
top:20px;
left: 20px;
cursor: pointer;
}
.centerRight {
width: 260px;
height: 200px;
background: url("../../../assets/indexNormal/mapShow.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0px;
right: 0px;
.title {
font-size: 18px;
color: #ffffff;
text-align: center;
padding-top: 30px;
}
.message {
font-size: 14px;
color: #ccefff;
padding: 5px 10px 5px 15px;
span {
color: #ffc106;
}
}
.closeRight {
position: absolute;
top: -2px;
right: 7px;
font-size: 20px;
color: #ffffff;
cursor: pointer;
}
}
</style>
<style>
.anchorBL {
display: none;
}
</style>
