// 设置地图与geo的互相联动
chartInstance.on("georoam", function (params: any) {
const option = chartInstance.getOption() as any;
// 定义边界限制
const bounds = {
left: 70, // 最西边界
right: 140, // 最东边界
top: 55, // 最北边界
bottom: 15 // 最南边界
};
if (params.componentType === "series") {
// 获取当前地图的中心点和缩放级别
const currentCenter = option.series[0].center || [104, 35];
const currentZoom = option.series[0].zoom || 1.0;
// 检查边界并调整中心点
let [lng, lat] = currentCenter;
// 根据缩放级别调整可移动范围
const zoomFactor = Math.max(0.5, 2 - currentZoom);
const adjustedBounds = {
left: bounds.left + (bounds.right - bounds.left) * (1 - zoomFactor) * 0.3,
right: bounds.right - (bounds.right - bounds.left) * (1 - zoomFactor) * 0.3,
top: bounds.top - (bounds.top - bounds.bottom) * (1 - zoomFactor) * 0.3,
bottom: bounds.bottom + (bounds.top - bounds.bottom) * (1 - zoomFactor) * 0.3
};
// 限制经度
if (lng < adjustedBounds.left) lng = adjustedBounds.left;
if (lng > adjustedBounds.right) lng = adjustedBounds.right;
// 限制纬度
if (lat > adjustedBounds.top) lat = adjustedBounds.top;
if (lat < adjustedBounds.bottom) lat = adjustedBounds.bottom;
// 如果中心点被调整了,更新地图
if (lng !== currentCenter[0] || lat !== currentCenter[1]) {
option.series[0].center = [lng, lat];
option.geo[0].center = [lng, lat];
chartInstance.setOption(option, false);
return;
}
// 正常的联动逻辑
if (
option &&
option.geo &&
option.geo[0] &&
option.series &&
option.series[0]
) {
if ("zoom" in params) {
// 缩放操作
option.geo[0].zoom = option.series[0].zoom;
option.geo[0].center = option.series[0].center;
} else if ("dx" in params || "dy" in params) {
// 平移操作
option.geo[0].center = option.series[0].center;
}
chartInstance.setOption(option, false);
}
return;
}
// 将地图的视图状态设置为与geo组件相同(这部分保持原样,但实际上geo是silent的)
if (
option &&
option.geo &&
option.geo[0] &&
option.series &&
option.series[0]
) {
if ("zoom" in params) {
// 缩放操作
option.series[0].zoom = option.geo[0].zoom;
option.series[0].center = option.geo[0].center;
} else if ("dx" in params || "dy" in params) {
// 平移操作
option.series[0].center = option.geo[0].center;
}
chartInstance.setOption(option, false);
}
});
echarts map类型为china,地图移动限制
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。