Cesium等高线

功能说明

1. 等高线显示

   • 使用自定义GLSL着色器实现等高线渲染
   • 支持自定义等高线间距（50-500米）
   • 可调整等高线宽度（1-5像素）

2. 颜色渐变

   • 三色渐变：低海拔→中海拔→高海拔
   • 可分别设置三个海拔点的颜色
   • 平滑渐变选项提供更自然的过渡效果
   • 渐变强度控制颜色混合程度

3. 高度范围控制

   • 可设置显示的最小和最大海拔高度（0-6000米）
   • 超出范围的区域不显示等高线

4. 高级功能

   • 显示高度标签选项
   • 视图保存和重置功能
   • 快速导航到著名地形区域

5. 响应式设计

   • 适配桌面设备和移动设备
   • 侧边栏可折叠节省空间

核心技术实现

自定义GLSL着色器

czm_material czm_getMaterial(czm_materialInput materialInput) {
  // 获取当前高度
  float height = materialInput.height;
  
  // 计算高度比例
  float t = clamp((height - minHeight) / (maxHeight - minHeight), 0.0, 1.0);
  
  // 创建等高线效果
  float modulo = mod(height, spacing);
  float halfWidth = width * 0.5;
  float contour = smoothstep(spacing - halfWidth, spacing, modulo);
  
  // 计算渐变颜色
  vec4 color;
  if (t < 0.5) {
    color = mix(lowColor, midColor, t * 2.0);
  } else {
    color = mix(midColor, highColor, (t - 0.5) * 2.0);
  }
  
  // 应用渐变效果
  if (useSmoothGradient) {
    float gradient = pow(1.0 - abs(t - 0.5) * 2.0, gradientIntensity / 10.0);
    color = mix(color, vec4(1.0), gradient * 0.3);
  }
  
  // 应用等高线
  material.diffuse = color.rgb;
  material.alpha = color.a * contour;
  
  // 添加高度标签效果
  if (showLabels) {
    float labelHeight = spacing * floor(height / spacing);
    float labelMod = mod(height - labelHeight, 10.0);
    if (labelMod < 1.0) {
      material.diffuse = mix(vec3(1.0, 1.0, 1.0), color.rgb, 0.3);
    }
  }
  
  return material;
}

颜色渐变计算

// 计算渐变颜色
if (t < 0.5) {
  color = mix(lowColor, midColor, t * 2.0);
} else {
  color = mix(midColor, highColor, (t - 0.5) * 2.0);
}

// 应用平滑渐变
if (useSmoothGradient) {
  float gradient = pow(1.0 - abs(t - 0.5) * 2.0, gradientIntensity / 10.0);
  color = mix(color, vec4(1.0), gradient * 0.3);
}

高度标签效果

// 添加高度标签效果
if (showLabels) {
  float labelHeight = spacing * floor(height / spacing);
  float labelMod = mod(height - labelHeight, 10.0);
  if (labelMod < 1.0) {
    material.diffuse = mix(vec3(1.0, 1.0, 1.0), color.rgb, 0.3);
  }
}

使用说明

1. 调整"等高线间距"滑块控制等高线密度
2. 使用"可见海拔范围"滑块设置显示的高度区间
3. 点击颜色选择器修改不同海拔的颜色
4. 勾选"使用平滑渐变"获得更自然的颜色过渡
5. 调整"渐变强度"控制颜色混合程度
6. 勾选"显示高度标签"在等高线上显示高度值
7. 使用视图控制按钮快速导航到著名地形区域

完整代码

  
  
  
  
  
  
  
  
  


  

    

      
 Cesium等高线可视化系统
      

        保存视图
        重置设置
      
    
    
    

      

        

          

             等高线设置
          
          
            
              
            
            
              
            
            
              
            
            
              
            
          
          
          

            

              

              低海拔
            
            
          
          
          

            

              

              中海拔
            
            
          
          
          

            

              

              高海拔
            
            
          
          
          

            使用平滑渐变
            显示高度标签
          
        
        
        

          

             视图控制
          
          
            珠穆朗玛峰
            科罗拉多大峡谷
          
          

            阿尔卑斯山脉
          
        
        
        

          
海拔高度图例
          

          

            
低海拔 ({{ visibleRange[0] }}米)
            
高海拔 ({{ visibleRange[1] }}米)
          
        
        
        

          

             系统信息
          
          

            
 经度: {{ currentPos.longitude.toFixed(5) }}°
            
 纬度: {{ currentPos.latitude.toFixed(5) }}°
            
 海拔: {{ currentPos.height.toFixed(0) }} 米
            
 等高线间距: {{ contourInterval }} 米
          
        
      
      
      

        

        

          
        
        

          
当前视域: {{ viewWidth.toFixed(0) }} × {{ viewHeight.toFixed(0) }} 公里
          
可见高度范围: {{ visibleRange[0] }} - {{ visibleRange[1] }}米
        
        

          

            

            
生成等高线中...