Echarts 部分地图展示
2021/7/15 16:35:02
功能
最近要实现如下这样的功能
效果查看:
http://sqber.com/file/map/jingjidemo.html
实现思路
实现思路如下:
思路一
通过 Echarts 的地图功能来实现,在 Geo 属性 中添加两个地图,一个是世界地图,另一个就是我们要突出显示的地图。
当前我们要获取到对应的 GeoJSON 数据。比如第一个只显示部分省份的,就可以只用部分省份的 GeoJSON 数据。
GeoJSON 获取
https://github.com/echarts-maps
http://datav.aliyun.com/tools/atlas/index.html#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
然后调整两个地图的 中心点 和 缩放 级别,另两个地图重合显示。
设置 Roam 属性为 true,可以进行调整,调整好之后,通过控制台调用 getInfo 方法记录下中心点和缩放级别的信息。
上面的黄点信息是设置 series 来实现的,series 中的地图要使用高亮的地图,保证点的位置的准确性。
思路二
Geo 中引入一个地图,然后在 Series 中引入高亮的地图。
思路三
Geo 中只引入一个地图,通过 Region 属性高亮显示的区域。
这个比较麻烦,可能得把所有的高亮 Region 都得列举出来。且你要分别控制不同区域的鼠标移动上去的效果。
具体代码
思路一的具体实现:(另外两个不考虑了)
效果查看:
http://sqber.com/file/map/jingjidemo.html
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北京地图</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
position: absolute;
top:0;
right:0;
bottom: 0;
left:0;
}
</style>
</head>
<body style="">
<div id="container"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="worldGeo.json"></script>
<script src="lnglat.json"></script>
<script>
var myChart = echarts.init(document.getElementById('container'));
function getGeoJson() {
// var arr = [
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=510000', //四川
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=530000', //云南
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520000', //贵州
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=500000', //重庆
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420000', //湖北
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430000', //湖南
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=340000', // 安徽
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=360000', // 江西
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=310000', // 江西
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=320000', // 江西
// 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=330000', // 江西
// //'http://sqber.com/file/echarts/wordGeo',
// ]
var mapJson = { "type": "FeatureCollection", "features": [] }
worldGeo.features.map(fitem => mapJson.features.push(fitem))
// arr.map(item => {
// $.ajax({
// type: "GET",
// url: item,
// async: false,
// success: function (data) {
// data.features.map(fitem => mapJson.features.push(fitem))
// },
// error: function (msg) {
// console.error(msg);
// }
// })
// })
return mapJson
}
var mapJson = getGeoJson()
echarts.registerMap('world', mapJson);
function getGeoJson2() {
var arr = [
// 如果报错的话,把下面的 JSON 文件放在本地
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=510000', //四川
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=530000', //云南
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520000', //贵州
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=500000', //重庆
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420000', //湖北
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430000', //湖南
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=340000', // 安徽
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=360000', // 江西
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=310000', // 江西
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=320000', // 江西
'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=330000', // 江西
]
var mapJson = { "type": "FeatureCollection", "features": [] }
//worldGeo.features.map(fitem => mapJson.features.push(fitem))
arr.map(item => {
$.ajax({
type: "GET",
url: item,
async: false,
success: function (data) {
data.features.map(fitem => mapJson.features.push(fitem))
},
error: function (msg) {
console.error(msg);
}
})
})
return mapJson
}
var mapJson2 = getGeoJson2()
echarts.registerMap('hunhe2', mapJson2);
// 渐变色
var areaColor = {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#2381F3' // 0% 处的颜色
}, {
offset: 1, color: '#2C54CE' // 100% 处的颜色
}],
global: false // 缺省为 false
}
var option = {
tooltip: {
trigger: 'item',
formatter:function(params, ticket, callback){
if(params.data){
return params.name + " : " + params.data.value[2]
}
else{
return params.name
}
}
},
title: {
text: '',
x: "center",
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0f378f', // 0% 处的颜色
},
{
offset: 1,
color: '#00091a', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本,默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {},
},
geo: [
{
map: 'world',
label: {
show:false
},
silent:true,
roam: true,
center: [110.39276699313069,28.723695629153493],
zoom: 12.9687122980557,
itemStyle: {
normal: {
areaColor: '#06235F',
borderColor: '#0C4BAA',
borderWidth: 1,
},
emphasis: {
areaColor: '#FFAE00',
}
}
},
{
map: 'hunhe2',
label: {
show:true,
color:'white',
fontSize:20
},
silent:true,
roam: true,
center: [110.44997122677593, 28.753268447939853],
zoom: 0.9090909090909095,
itemStyle: {
normal: {
areaColor: areaColor,
borderColor: '#0C4BAA',
borderWidth: 1,
},
emphasis: {
areaColor: '#FFAE00',
}
}
},
],
series: [
// {
// name: '这是个地图',
// type: 'map',
// mapType: 'hunhe2',
// label: {
// normal: {
// textStyle: {
// fontSize: 15,
// fontWeight: 'bold',
// color: '#fff',
// },
// },
// },
// //aspectScale: 1,
// roam: true,
// center: [107.51392060163428,35.18339937096202],
// zoom: 1.610510000000001,
// itemStyle: {
// normal: {
// label: { show: false }, // 不显示地图上得省份名字
// color: 'yellow',
// borderWidth: 0.5, //区域边框宽度
// borderColor: '#36D2FF', //区域边框颜色
// areaColor: areaColor, //区域颜色
// },
// emphasis: {
// label: { show: true },
// borderWidth: 0.5,
// borderColor: '#4b0082',
// areaColor: '#ffdead',
// },
// },
// },
{
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 1, // 这里指定使用哪个地图
symbolSize: function (val, params) {
var zoom = 10
let result = val[2] / zoom
if (parseFloat(val[2]) === 0) {
result = 0.0000001 / zoom
}
result = Math.max(result, 5) // 最小是5
result = Math.min(55, result) // 最大时35
return result
},
data:[
{
name: '四川省',
value: [120.185, 30.274, 29999]
}
],
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
show: false
},
// label: {
// show: false,
// normal: {
// // "formatter": "{c}",
// formatter: function (item) {
// // console.log(item);
// // alert(item);
// // return item;
// return item.value[2]
// },
// position: 'right',
// show: true
// },
// emphasis:{
// label:true,
// formatter: function (item) {
// // console.log(item);
// // alert(item);
// // return item;
// return item.value[2]
// },
// }
// },
itemStyle: {
show : false,
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
}
myChart.setOption(option);
function getInfo(){
var centerInfo = myChart.getOption().geo[0].center
var zoomInfo = myChart.getOption().geo[0].zoom
var dataCenterInfo = myChart.getOption().geo[1].center
var dataZoomInfo = myChart.getOption().geo[1].zoom
console.log('backMap:' + centerInfo + " " + zoomInfo)
console.log('frontMap:' + dataCenterInfo + " " + dataZoomInfo)
}
</script>
</body>
</html>
完
扫码分享
版权说明
作者:SQBER
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
{0}
{5}
{1}
{2}回复
{4}
*昵称:
*邮箱:
个人站点:
*想说的话: