- 在index.html里加入代码，防止403错误
<meta name="referrer" content="no-referrer" />
- data赋值，图表和option初始化
myChart: undefined,
// 初始化绘制全国地图配置
option: {
backgroundColor: "transparent", // 设置背景色透明
// 必须设置
tooltip: {
show: false,
},
// 地图阴影配置
},
3.mounted监测初始化地图，地图标记点和获取图表
mounted() {
this.initMap();
this.getMap();
this.myChart = window.echarts.init(document.getElementById("centerMap"));
},
4.初始化地图
async initMap() {
document.getElementById("back").style.display = "none";
await axios
.get(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`)
.then((res) => {
// 获取所有省份
let shengAll = this.getChildMap(res.data);
// 注册大地图
window.echarts.registerMap("china", res.data);
// 绘制地图
this.renderMap("china", shengAll);
// 绑定点击地图区域事件
this.myChart.on("click", this.clickMap);
});
},
- 点击地图，判断地图类型显示地图
/* 地区区域点击事件 */
clickMap(params) {
document.getElementById("back").style.display = "block";
const name = params.name;
const adcode = this.getAdcodeFromGeoJSON(name);
const geoLevel = this.getAdcodeFromGeoLevel(name);
if (geoLevel == "province" || geoLevel == "city") {
if (name == "台湾省") {
this.$message.warning("已经是最后一层地图了");
} else {
axios
.get(
`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`
)
.then((res) => {
// 注册省级地图
window.echarts.registerMap(params.name, res.data);
// 获取当前省下所有市
let shiAll = this.getChildMap(res.data);
this.renderMap(params.name, shiAll);
});
}
} else {
this.$message.warning("没有更小的地图了");
// this.renderMap("china");
}
},
- 从 GeoJSON 数据中获取 adcode和该地图类型
// 从 GeoJSON 数据中获取 adcode
getAdcodeFromGeoJSON(name) {
const geoJSON = window.echarts.getMap(this.option.geo.map).geoJSON;
for (let feature of geoJSON.features) {
if (feature.properties.name === name) {
return feature.properties.adcode;
}
}
return null;
},
//从 GeoJSON 数据中获取哪个类型的地图
getAdcodeFromGeoLevel(name) {
const geoLevel = window.echarts.getMap(this.option.geo.map).geoJSON;
for (let feature of geoLevel.features) {
if (feature.properties.name === name) {
return feature.properties.level;
}
}
return null;
}
- 获取下级所有地名
/* 获取下级所有地名 */
getChildMap(data) {
let childMapAll = [];
// value为鼠标悬停地名显示的数据
for (var i = 0; i < data.features.length; i++) {
childMapAll.push({
name: data.features[i].properties.name,
value: 0,
});
}
return childMapAll;
},
- 修改echarts配置重新渲染地图，实现上下共同缩放和拖动
/* 修改echarts配置重新渲染地图
map:地图名
data:[{name:'',value:0}] value为鼠标悬停地名显示的数据
*/
renderMap(map, data) {
// 标题
this.option.geo = {
map: map,
// 这里必须定义，不然后面series里面不生效
tooltip: {
show: false,
},
label: {
show: false,
},
zoom: 1.03,
silent: true, // 不响应鼠标时间
show: true,
roam: false, // 地图缩放和平移
aspectScale: 0.75,
layoutSize: "108%",
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 0.5,
color: {
type: "linear-gradient",
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [
{
offset: 0,
color: "#009DA1", // 0% 处的颜色
},
{
offset: 1,
color: "#005B9E", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},
opacity: 0.5,
},
emphasis: {
areaColor: "#2a333d",
},
},
// 地图区域的多边形 图形样式 阴影效果
// z值小的图形会被z值大的图形覆盖
top: "18%",
left: "center",
// 去除南海诸岛阴影 series map里面没有此属性
regions: [
{
name: "南海诸岛",
selected: false,
emphasis: {
disabled: true,
},
itemStyle: {
areaColor: "#00000000",
borderColor: "#00000000",
},
},
],
z: 1,
};
this.option.series = [
// 地图配置
{
type: "map",
map: map,
zoom: 1,
tooltip: {
show: false,
},
label: {
show: true, // 显示省份名称
color: "#04CFF5",
align: "center",
},
top: "18%",
left: "center",
aspectScale: 0.75,
layoutSize: "108%",
roam: false, // 地图缩放和平移
itemStyle: {
borderColor: "#0FA3F0", // 省分界线颜色 阴影效果的
borderWidth: 1,
areaColor: "#065CAE",
opacity: 1,
},
// 去除选中状态
select: {
disabled: true,
},
emphasis: {
// 聚焦后颜色
disabled: false, // 开启高亮
label: {
align: "center",
color: "#04CFF5",
},
itemStyle: {
color: "#ffffff",
areaColor: "#0a8bd8", // 阴影效果 鼠标移动上去的颜色
},
},
z: 2,
},
// 点
{
name: "companyPoint",
type: "effectScatter",
coordinateSystem: "geo",
showEffectOn: "render",
// zlevel: 2, // zlevel用于 Canvas 分层 相同的绘制在同一个canvas上
rippleEffect: {
number: 3, // 波纹数量
period: 4, // 动画周期 数值越大，波动越慢
scale: 3.5, // 动画中波纹的最大缩放比例
brushType: "stroke", // 波纹的绘制方式 stroke fill
},
label: {
show: false,
position: "right",
formatter: "{b}",
color: "#97e9e1",
fontSize: 14,
},
symbol: "circle",
symbolSize: 10,
tooltip: {
show: true,
padding: 0,
borderWidth: 0,
backgroundColor: "rgba(17, 132, 87,0.8)",
textStyle: {
fontSize: 14,
color: "#fff",
},
formatter: function (params) {
// console.log(params, 222);
var data = params.data;
return (
" " +
"所属用户：" +
data.name +
"<br>" +
" " +
"设备编号：" +
data.deviceId +
"<br>" +
" " +
"位置描述：" +
data.location +
" " +
"<br>" +
" " +
"数据时间：" +
data.dataTime
);
},
},
z: 4,
},
];
// 重新渲染echarts
if (map == "china") {
this.option.geo.layoutCenter = ["50%", "65%"];
this.option.series[0].layoutCenter = ["50%", "65%"];
this.option.geo.roam = false;
this.option.series[0].roam = false; // 地图缩放和平移
} else {
this.option.geo.layoutCenter = ["50%", "50%"];
this.option.series[0].layoutCenter = ["50%", "50%"];
this.option.geo.roam = true;
this.option.series[0].roam = true; // 地图缩放和平移
this.myChart.on("georoam", (params) => {
var option = this.myChart.getOption(); //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
this.myChart.getZr().on("mousewheel", (event) => {
var zoom = option.geo[0].zoom;
var zooms = option.series[0].zoom;
var newZoom = event.wheelDelta > 0 ? zoom * 2 : zoom / 2;
var newZooms = event.wheelDelta > 0 ? zooms * 2 : zooms / 2;
newZoom = Math.max(1, Math.min(200, newZoom)); // 限制缩放级别
newZooms = Math.max(1, Math.min(200, newZooms)); // 限制缩放级别
this.myChart.setOption(
{
geo: {
zoom: newZoom,
},
series: [
{
zoom: newZooms,
},
],
},
{ lazyUpdate: true }// 是否延迟更新
);
});
} else {
//捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
this.myChart.setOption(option, { lazyUpdate: true }); //设置option// 是否延迟更新
}
});
}
this.option.series[1].data = this.provinceData; // 假设数据加载到data变量中
// // 更新图表数据
this.myChart.setOption(this.option, true); // 第二个参数为true表示不合并之前的option，而是完全替换
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
