首先安装amap-jsapi-loader/echarts
npm i amap-jsapi-loader --save
npm i echarts
导入依赖
import * as echarts from "echarts";
import AMapLoader from '@amap/amap-jsapi-loader'
创建AMapKey,AMapKey是申请高德地图账号后,配置引用的key
你可以使用AmapLoader从高德地图加载API,然后在地图准备好后使用AmapMap组件进行展示
// 历史记录
const history = ref([
{
title: "全国",
adcode: 100000,
},
])
onMounted(async () => {
getJson(100000);
})
// 地图数据
const getJson = (val) => {
var MapJsons = [];
var MapJson = [];
//去拿地图json数据
getGeoJson(val).then((res) => {
// console.log(res)
//模拟的假数据
MapJsons = res.features?.map((item) => {
if (item.properties.name == '海南省') {
console.log(item, 'item')
item.geometry.coordinates = coordinates
}
return {
adcode: item.properties.adcode,
name: item.properties.name,
value: findValue(item.properties.name),
level: item.properties.level
};
});
MapJson = MapJsons?.sort(function (a, b) {
return a.value - b.value;
});
//模拟的假数据
//调用绘制地图方法
drawMap(res, MapJson);
console.log(history.value, '54')
});
};
// echarts
const drawMap = (map, json) => {
//拿到标签的dom
var mapChart = echarts.init(document.getElementById("map"));
echarts.registerMap("SC", map); //注册地图
//配置项
let mapOption = {
tooltip: {
trigger: "item",
formatter: (p) => {
let val = p.value;
if (p.name == "南海诸岛") return;
if (window.isNaN(val)) {
val = 0;
}
let txtCon =
"<div style='text-align:left'>" +
// p.name
// +
"图表展示title:" +
val + "(个)" +
"</div>";
return txtCon;
},
},
visualMap: {
show: false, // 控制滑动条
min: 0,
max: 30,
right: "0%",
bottom: "0%",
calculable: true,
inRange: {
color: ['#1E62AC', "#fc9700", '#ffde00', '#fc9700', '#00eaff'],
// color: ['#dddddd', '#fc9700', '#ffde00', '#ffde00', '#00eaff']
},
textStyle: {
color: "#24CFF4",
},
},
series: [
{
name: "SC",
type: "map",
map: "SC",
zoom: 1.2, //当前视角的缩放比例
// center: [105.191, 36.582], // 地图中心
roam: true, //是否开启平游或缩放
// scaleLimit: {
// //滚轮缩放的极限控制
// min: 1,
// max: 20,
// },
label: {
normal: {
show: true,
color: "rgb(249, 249, 249)", //省份标签字体颜色
},
emphasis: {
show: true,
color: "#f75a00", //鼠标放上去字体颜色
},
},
itemStyle: {
//省突起来的效果
normal: {
areaColor: "#24CFF4",
borderColor: "#53D9FF",
borderWidth: 1,
shadowBlur: 15,
shadowColor: "rgb(58,115,192)",
shadowOffsetX: 0,
shadowOffsetY: 0,
},
emphasis: {
areaColor: "#8dd7fc",
borderWidth: 1.6,
shadowBlur: 25,
},
},
data: json,
},
],
};
window.addEventListener("resize", () => {
mapChart.resize();
});
//加载进去,后面的true为了重新绘制
mapChart.setOption(mapOption, true);
//点击事件
mapChart.on("click", (params) => {
// console.log(params)
if (history.value[history.value.length - 1].adcode == params.data.adcode) {
} else {
if (params.data.level == 'district') {
return false
}
index.value++
let obj = {
title: params.data.name,
adcode: params.data.adcode,
level: params.data.level
};
console.log(params.data.level)
if (params.data.level == 'province') {
req.province = params.data.name
getOnhand()
} else if (params.data.level == 'city') {
req.province = null
req.city = params.data.name
getOnhand()
}
//存储点击下钻的数据,方便回到上级
history.value.push(obj);
//调用获取json
getJson(params.data.adcode);
}
})
// console.log(history.value)
// 右键返回
// mapChart.on("contextmenu", params => {
// console.log(params, history.value)
// if (history.value.length - 1 > 0) {
// history.value.splice(-1)
// let code = history.value[history.value.length - 1].adcode
// console.log(code)
// getJson(code)
// // params.event.preventDefault();
// }
// });
};
const getGeoJson = (adcode, geoJson = []) => {
return new Promise((resolve, reject) => {
AMapLoader.load({
key: '申请好的Web端开发者Key', // 申请好的Web端开发者Key,首次调用 load 时必填
// version: '1.4.4',// 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
AMapUI: {
// version: '1.1', // AMapUI 缺省 1.1
plugins: [], // 需要加载的 AMapUI ui插件
},
}).then(() => {
new AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
var districtExplorer = new DistrictExplorer();
districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
if (error) {
console.error(error);
reject(error, 'error 191');
return;
}
let Json = areaNode.getSubFeatures();
let mapJson = {
features: [],
};
if (Json.length === 0) {
Json = geoJson.features.filter(
(item) => item.properties.adcode == adcode
);
}
mapJson.features = Json;
resolve(mapJson);
})
})
}).catch(err => {
console.log(err)
})
})
}