如何在Palantir Foundry Slate Map中添加比例尺或标尺？

核心结论 #

Foundry Slate Map没有内置类似Google Maps的scaleControl: true启用属性，需要通过自定义组件结合地图提供的zoomLevel、bounds属性实现动态标尺。

实现步骤 #

1. 实现地理距离计算函数

首先需要通过Haversine公式计算经纬度两点间的实际球面距离，这是准确计算标尺对应真实距离的核心：

// 计算两点间的球面距离（单位：米）
function calculateHaversineDistance(lat1, lon1, lat2, lon2) {
  const R = 6371000; // 地球半径（米）
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2); 
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  return R * c; // 返回距离（米）
}

2. 绑定地图事件实时计算标尺距离

监听地图的onBoundsChange和onZoomChange事件，每次地图视图变化时，利用bounds属性计算当前视图下固定像素长度对应的实际距离：

// 假设地图组件的引用为mapRef，标尺文本元素引用为scaleTextRef
function updateScale() {
  const bounds = mapRef.current.getBounds();
  const mapContainer = document.getElementById('slate-map-container');
  const mapWidth = mapContainer.offsetWidth;

  // 取同一纬度下的东西边界点，计算实际距离
  const eastWestDistance = calculateHaversineDistance(
    bounds.southWest.latitude,
    bounds.southWest.longitude,
    bounds.southWest.latitude,
    bounds.northEast.longitude
  );

  // 设定标尺的像素长度（比如200px）
  const scalePixelLength = 200;
  // 计算该像素长度对应的实际距离
  const scaleDistance = (eastWestDistance / mapWidth) * scalePixelLength;

  // 格式化距离显示（转换为公里或米）
  let displayText;
  if (scaleDistance >= 1000) {
    displayText = `${(scaleDistance / 1000).toFixed(1)} km`;
  } else {
    displayText = `${Math.round(scaleDistance)} m`;
  }

  // 更新标尺文本
  scaleTextRef.current.textContent = displayText;
}

// 在地图组件初始化时绑定事件
mapRef.current.on('boundschange', updateScale);
mapRef.current.on('zoomchange', updateScale);

3. 渲染标尺UI

在Slate Map的容器内添加自定义标尺元素，样式可以根据需求调整：

<div id="slate-map-container">
  <!-- Foundry Slate Map组件 -->
  <SlateMap ref={mapRef} ... />
  <!-- 自定义标尺 -->
  <div class="map-scale">
    <div class="scale-bar" style="width: 200px;"></div>
    <span ref={scaleTextRef} class="scale-text"></span>
  </div>
</div>

<style>
.map-scale {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255,255,255,0.9);
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scale-bar {
  height: 4px;
  background: #333;
  border: 1px solid #000;
}
.scale-text {
  font-size: 12px;
  color: #333;
}
</style>

常见问题排查 #

• 若之前尝试失败，大概率是未正确绑定地图的视图变化事件，或者使用平面距离计算而非球面距离，导致距离值与实际视图不匹配。
• 确保地图容器的宽度获取准确，避免因容器尺寸计算错误导致标尺距离偏差。

内容的提问来源于stack exchange，提问作者Madhu