mars3d加载建筑物白膜及简单建筑物样式

1. 首先需要拥有shp格式的数据。可以通过水经微图下载，注意此软件是付费的
2. 将shp格式的数据处理为切片数据，可以使用cesiumlab
3. 处理完成得到json数据就可以在mars3d中加载了   

function init() {
  // 判断webgl支持
  if (!mars3d.Util.webglreport()) {
    mars3d.Util.webglerror();
  }

  let configUrl = "./config/config.json";

  // 读取 config.json 配置文件
  mars3d.Resource.fetchJson({ url: configUrl })
    .then(function (json) {
      console.log("读取 config.json 配置文件完成", json); // 打印测试信息

      //合并属性参数，可覆盖config.json中的对应配置
      let mapOptions = mars3d.Util.merge(json.map3d, {
        scene: {
          center: {
            lat: 33.81253,
            lng: 115.768825,
            alt: 1816,
            heading: 15,
            pitch: -34,
          },
        },
      });

      //创建三维地球场景
      const map = new mars3d.Map("mars3dContainer", mapOptions);

      map.on(mars3d.EventType.cameraMoveEnd, function (event) {
        map.scene.light.direction = map.scene.camera.direction;
      });

      const bloomEffect = new mars3d.effect.BloomEffect({
        enabled: false,
      });
      map.addEffect(bloomEffect);

      // 自定义特效 Shader
      const fragmentShader = `
          // 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
          float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
          float _heightRange = 80.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
          float _glowRange = 100.0; // 光环的移动范围(高度)

          // 建筑基础色
          float mars_height = marsJzwHeight - _baseHeight;
          float mars_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
          float mars_a12 = mars_height / _heightRange + sin(mars_a11) * 0.1;
          gl_FragColor *= vec4(vec3(mars_a12), 1.0);// 渐变

          // 动态光环
          float time = fract(czm_frameNumber / 360.0);
          time = abs(time - 0.5) * 2.0;
          float mars_h = clamp(mars_height / _glowRange, 0.0, 1.0);
          float mars_diff = step(0.005, abs(mars_h - time));
          gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - mars_diff);
       `;

      const tiles3dLayer = new mars3d.layer.TilesetLayer({
        name: "合肥市建筑物",
        url: "qcq/tileset.json",
        maximumScreenSpaceError: 1,
        maximumMemoryUsage: 1024,
        // marsJzwStyle: true, //打开建筑物特效（内置Shader代码）
        marsJzwStyle: fragmentShader, // 字符串值时，表示使用该字符串定义的自定义Shader
        popup: [
          { field: "objectid", name: "编号" },
          { field: "name", name: "名称" },
          { field: "height", name: "楼高", unit: "米" },
        ],
      });
      map.addLayer(tiles3dLayer);

      const brightnessEffect = new mars3d.effect.BrightnessEffect({
        enabled: true,
        brightness: brightness,
      });
      map.addEffect(brightnessEffect);
    })
    .catch(function (error) {
      console.log("加载JSON出错", error);
    });
}

具体可以参考Mars3d官网的使用示例：支持设置多种建筑物白膜样式

1.功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技