1. 首先需要拥有shp格式的数据。可以通过水经微图下载，注意此软件是付费的
    2. 将shp格式的数据处理为切片数据，可以使用cesiumlab

    3. 处理完成得到json数据就可以在mars3d中加载了

      1. function init() {
      2. // 判断webgl支持
      3. if (!mars3d.Util.webglreport()) {
      4.  mars3d.Util.webglerror();
      5. }
      7. let configUrl = "./config/config.json";
      9. // 读取 config.json 配置文件
      10. mars3d.Resource.fetchJson({ url: configUrl })
      11.  .then(function (json) {
      12.    console.log("读取 config.json 配置文件完成", json); // 打印测试信息
      14.    //合并属性参数，可覆盖config.json中的对应配置
      15.    let mapOptions = mars3d.Util.merge(json.map3d, {
      16.      scene: {
      17.        center: {
      18.          lat: 33.81253,
      19.          lng: 115.768825,
      20.          alt: 1816,
      21.          heading: 15,
      22.          pitch: -34,
      23.        },
      24.      },
      25.    });
      27.    //创建三维地球场景
      28.    const map = new mars3d.Map("mars3dContainer", mapOptions);
      30.    map.on(mars3d.EventType.cameraMoveEnd, function (event) {
      31.      map.scene.light.direction = map.scene.camera.direction;
      32.    });
      34.    const bloomEffect = new mars3d.effect.BloomEffect({
      35.      enabled: false,
      36.    });
      37.    map.addEffect(bloomEffect);
      39.    // 自定义特效 Shader
      40.    const fragmentShader = `
      41.        // 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
      42.        float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
      43.        float _heightRange = 80.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
      44.        float _glowRange = 100.0; // 光环的移动范围(高度)
      46.        // 建筑基础色
      47.        float mars_height = marsJzwHeight - _baseHeight;
      48.        float mars_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
      49.        float mars_a12 = mars_height / _heightRange + sin(mars_a11) * 0.1;
      50.        gl_FragColor *= vec4(vec3(mars_a12), 1.0);// 渐变
      52.        // 动态光环
      53.        float time = fract(czm_frameNumber / 360.0);
      54.        time = abs(time - 0.5) * 2.0;
      55.        float mars_h = clamp(mars_height / _glowRange, 0.0, 1.0);
      56.        float mars_diff = step(0.005, abs(mars_h - time));
      57.        gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - mars_diff);
      58.     `;
      60.    const tiles3dLayer = new mars3d.layer.TilesetLayer({
      61.      name: "合肥市建筑物",
      62.      url: "qcq/tileset.json",
      63.      maximumScreenSpaceError: 1,
      64.      maximumMemoryUsage: 1024,
      65.      // marsJzwStyle: true, //打开建筑物特效（内置Shader代码）
      66.      marsJzwStyle: fragmentShader, // 字符串值时，表示使用该字符串定义的自定义Shader
      67.      popup: [
      68.        { field: "objectid", name: "编号" },
      69.        { field: "name", name: "名称" },
      70.        { field: "height", name: "楼高", unit: "米" },
      71.      ],
      72.    });
      73.    map.addLayer(tiles3dLayer);
      75.    const brightnessEffect = new mars3d.effect.BrightnessEffect({
      76.      enabled: true,
      77.      brightness: brightness,
      78.    });
      79.    map.addEffect(brightnessEffect);
      80.  })
      81.  .catch(function (error) {
      82.    console.log("加载JSON出错", error);
      83.  });
      84. }