echarts map类型为china,地图移动限制

 // 设置地图与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);
      }
    });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。