记录
html - 定义地图 - 第一层地图
<div style="width: 100%; height: 100%" ref="chartsDOM"></div>
script lang="ts" setup
value - 可作为做坐标点的高度，可以为相同高度的数字
projectData - 可添加多个数据，但是value必须和geoCoordMap里的数字相同
import * as echarts from "echarts";
import "echarts-gl";
const mapData: any = reactive({
geoCoordMap: { 南宁:12 },
projectData: [ { name:'南宁',value:12,center:[lat,lng] } ],
});
//基于准备好的dom，初始化echarts实例
const chartsDOM: any = ref();
var myChart: any;
let echartNull: any = null;
//处理坐标点的展示样式
const convertData = (data: any) => {
const res = [];
for (let i = 0; i < data.length; i++) {
const geoCoord = mapData.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
projectName: data[i],
tooltip: {
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: "#000",
decoration: "none",
},
formatter: function (param: any) {
var tipHtml = "";
tipHtml =
'<div style="width:240px;height:100%;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
'<div class="tooltip_title">' +
'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
"</i>" +
'<span class="tooltip_title_name f_16 f_bold">' +
param.data.projectName.content +
"</span>" +
"</div>" +
"</div>";
return tipHtml;
},
},
label: {
show: true,
position: "top", //label的偏移位置
distance: -40, //label的偏移距离
formatter(param: any) { //判断label类型背景色
if (param.data.projectName.color_type == "黄色") {
return "{bg_yellow|" + param.data.projectName.weather_type + "}";
} else if (param.data.projectName.color_type == "橙色") {
return "{bg_org|" + param.data.projectName.weather_type + "}";
} else if (param.data.projectName.color_type == "红色") {
return "{bg_red|" + param.data.projectName.weather_type + "}";
} else if (param.data.projectName.color_type == "蓝色") {
return "{bg_blue|" + param.data.projectName.weather_type + "}";
}
},
backgroundColor: "rgba(7, 28, 38, 0.7)",
borderWidth: 2,
borderRadius: 4,
fontSize: 12,
rich: {
bg_yellow: {
height: 24,
width: 80,
align: "center",
padding: [14, 8, 8, 30],
fontSize: 14,
color: "#feff02",
backgroundColor: { //背景图片
image: bg_yellow,
},
},
bg_org: {
height: 24,
width: 80,
align: "center",
padding: [14, 8, 8, 30],
fontSize: 16,
color: "#ff9001",
backgroundColor: {
image: bg_org,
},
},
bg_red: {
height: 24,
width: 80,
align: "center",
padding: [14, 8, 8, 30],
fontSize: 16,
color: "red",
backgroundColor: {
image: bg_red,
},
},
bg_blue: {
height: 24,
width: 80,
align: "center",
padding: [14, 8, 8, 30],
fontSize: 16,
color: "#2a5afd",
backgroundColor: {
image: bg_blue,
},
},
},
},
emphasis: {},//hover样式
},
});
}
}
}
// init地图
// data为地图数据，可在[datav下载](https://datav.aliyun.com/portal/school/atlas/area_selector)
const initChart = (data: any) => {
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose(); //销毁
}
myChart = echarts.init(chartsDOM.value, echartNull, { locale: "ZH" });
echarts.registerMap("GX", data);
var option = {
tooltip: {}, // 配置提示框，有这个配置项即可
geo3D: {
map: "GX",
roam: true,
show: false,
top: "-100px",
left: "-45px",
zoom: 60,
boxWidth: 80,
regionHeight: 4, // 三维高度
label: {
show: true,
position: "top",
color: "#ffffff", //地图初始化区域字体颜色
fontSize: 14,
lineHeight: 22,
},
itemStyle: {
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: "rgba(58, 115, 192,.2)", // 地图板块的颜色
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: "rgb(147, 235, 248)", // 图形描边的颜色。[ default: #333 ]
},
viewControl: {
// 用于鼠标的旋转，缩放等视角控制。
projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
distance: 90, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
alpha: 50, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]
animation: true, // 是否开启动画。[ default: true ]
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
},
emphasis: {
itemStyle: {
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: "rgba(58, 115, 192,.6)", // 地图板块的颜色
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: "rgb(147, 235, 248)", // 图形描边的颜色。[ default: #333 ]
},
},
// 指定区域高亮
regions: [
// {
// name: "南宁市",
// itemStyle: {
// color: "green",
// },
// },
],
},
series: [
{
map: "GX",
type: "map3D",
name: "广西",
top: "-100px",
silent:true,//禁止点击
left: "-45px",
zoom: 2,//层级
boxWidth: 80,
regionHeight: 4, // 三维高度
itemStyle: {
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: "rgba(58, 115, 192,.2)", // 地图板块的颜色
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: "rgb(147, 235, 248)", // 图形描边的颜色。[ default: #333 ]
},
label: {
show: true,
position: "top",
color: "#ffffff", //地图初始化区域字体颜色
fontSize: 14,
lineHeight: 22,
},
emphasis: {
itemStyle: {
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: "rgba(58, 115, 192,.6)", // 地图板块的颜色
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: "rgb(147, 235, 248)", // 图形描边的颜色。[ default: #333 ]
},
},
viewControl: {
// 用于鼠标的旋转，缩放等视角控制。
projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
distance: 90, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
alpha: 50, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]
animation: true, // 是否开启动画。[ default: true ]
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
},
},
{// 散点图
type: "scatter3D",
name: "scatter3D",
coordinateSystem: "geo3D",//绑定geo3D地图
zlevel: 99,
symbolSize: [4, 28],//散点大小
itemStyle: {
color: "#409EFF",
opacity: 1,
},
data: convertData(mapData.projectData),
},
{// 柱状图
type: "bar3D",
coordinateSystem: "geo3D",
bevelSmoothness: 20,
zlevel: 99,
data: convertData(mapData.projectData),
//柱体的样式
itemStyle: {
color: "#f3c205",
opacity: 0.8,
borderWidth: 1,
borderColor: "#f3c205",
},
//标签
label: {
show: true,
position: "top",
distance: -1,
formatter(params: any) {
return "{bar_bg|" + params.data.name + "}";
},
color: "#f3c205",
fontWeight: "bold",
backgroundColor: "rgba(7, 28, 38, 1)",
padding: [10, 4],
borderColor: "#f3c205",
borderWidth: 2,
borderRadius: 4,
fontSize: 14,
rich: {},
},
barSize: 0.5,
// 高亮
emphasis: {
itemStyle: {
color: "#51e528",
opacity: 1,
borderWidth: 2,
borderColor: "#f3c205",
},
label: {
show: true,
position: "top",
distance: -1,
formatter(params: any) {
return "{bar_bg|" + params.data.name + "}";
},
color: "#51e528",
fontWeight: "bold",
backgroundColor: "rgba(7, 28, 38, 1)",
padding: [10, 4],
borderColor: "#51e528",
borderWidth: 2,
borderRadius: 4,
fontSize: 14,
rich: {},
},
},
//动画
animation: true,
animationDurationUpdate: 500,
animationEasingUpdate: "cubicOut",
},
],
};
window.onresize = function () {
myChart.resize();
};
// 地图点击
myChart.on("click", (clickparams: any) => {
emitter.emit("county", hfdm_val.value);
}
}
第二层地图
<div style="width: 100%; height: 100%" ref="countyChartsDom"></div>
//基于准备好的dom，初始化echarts实例
const countyChartsDom: any = ref();
var countyChart: any;
let countyEchartNull: any = null;
const emit = defineEmits(["getPage"]);
const mapData: any = reactive({
geoCoordMap: {},
projectData: [],
});
第三层地图 - 高德地图
<div id="map" style="width: 100%; height: 100%"></div>
import AMapLoader from "@amap/amap-jsapi-loader";
import gcoord from "gcoord";
const initMap = () => {
AMapLoader.load({
key: "111111", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.GeoJSON", "AMap.Geocoder"], //插件列表
Loca: {
// 是否加载 Loca， 缺省不加载
version: "2.0", // Loca 版本，缺省 1.3.2
},
}).then((AMap: any) => {
map = new AMap.Map("map", {
zoom: 15,
viewMode: "2D",
center: [map_data.map_lat, map_data.map_lng], //初始中心点
layers: [
new AMap.TileLayer.Satellite(), // 高德默认标准图层，开启卫星地图
],
pitch: 20, //角度
mapStyle: "amap://styles/ab15045c8176944dc2d68a598a657f99",
showBuildingBlock: true,
resizeEnable: true,
showLabel: true,
pitchEnable: true,
});
var wms = new AMap.TileLayer.WMTS({
url: "http://t0.tianditu.gov.cn/img_w/wmts",
blend: false,
tileSize: 256,
params: {
Layer: "img",
Version: "1.0.0",
Format: "tiles",
TileMatrixSet: "w",
STYLE: "default",
tk: "a9119bb4a8328509da398f4b20edcd76",
},
});
map.setLayers([new AMap.TileLayer.Satellite()]); // 调用wmts服务更换目标底图
wms.setMap(map);
wms.show();
var geojson = new AMap.GeoJSON({
geoJSON: map_data.map_polygon,
// 还可以自定义getMarker和getPolyline
getPolygon: function (geojson: any, lnglats: any) {
var path = lnglats;
var polygon = new AMap.Polygon({
path: path,
fillOpacity: 0.4,
strokeColor: "rgb(255,0,0)",
fillColor: "rgb(0,255,0)",
});
map.add(polygon);
},
});
for (let index = 0; index < map_data.marker_data.length; index++) {
var result = gcoord.transform(
map_data.marker_data[index].coordinate, // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.WGS84 // 目标坐标系
);
var marker = new AMap.Marker({
position: result, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: map_data.marker_data[index].coordinate,
extData: {
shebei: map_data.marker_data[index],
},
});
map.add(marker);
}
});
};
