javascript - qgis2thirdjs导出3D map 代码修改后出现空白页

Question

我需要更改使用 qgis2thirdjs 创建的 3D map 内的一些代码(QGIS 的 3D 网络 map 插件)。

我不是 Threejs 库和 JavaScript 方面的专家。我想改变这个

    // load the scene
    app.loadJSONFile(
            "./data/index/scene.json",
            function () {
              app.start();
              // North arrow inset
              if (Q3D.Config.northArrow.visible) app.buildNorthArrow(document.getElementById("northarrow"), app.scene.userData.rotation);
            }
          );

包含 scene.json 而不是他的路径。我想使用这段代码:

// load the scene
app.loadJSONFile(
        {"type": "scene", "properties": {"height": 90.1010101010101, "width": 100.0, "baseExtent": [725282.3732700318, 6006086.588087205, 727901.7482727035, 6008446.671422945], "crs": "EPSG:3857", "proj": "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs", "rotation": 0, "wgs84Center": {"lat": 47.39790958284822, "lon": 6.527087535108197}, "zExaggeration": 1.0, "zShift": 0.0}, "layers": [{"type": "layer", "id": 0, "properties": {"name": "clip_dtm_francia_eudem", "queryable": 1, "visible": true, "type": "dem", "shading": true}, "data": [{"type": "block", "layer": 0, "block": 0, "grid": {"width": 211, "height": 190, "url": "./data/index/a0.bin"}, "width": 100.0, "height": 90.1010101010101, "translate": [0.0, 0.0, 0.0], "zShift": 0.0, "zScale": 0.038177046012121664, "material": {"type": 0, "image": {"url": "./data/index/a0.png"}, "ds": 1}, "sides": true}]}]},
        function () {
          app.start();
          // North arrow inset
          if (Q3D.Config.northArrow.visible) app.buildNorthArrow(document.getElementById("northarrow"), app.scene.userData.rotation);
        }
      );

这就是scene.json的全部代码。当我执行此操作时，3D 变为空白，但在 Chrome 的开发人员工具中没有任何错误。

我该如何解决这个问题？如果你想查看全部代码可以下载here (2MB)

Answer 1

不要使用 loadJSONFile()，而是尝试使用 loadJSONObject()。请注意，该方法没有回调参数，因此新代码应如下所示:

app.loadJSONObject( {"type": "scene", "properties": {"height": 90.1010101010101, "width": 100.0, "baseExtent": [725282.3732700318, 6006086.588087205, 727901.7482727035, 6008446.671422945], "crs": "EPSG:3857", "proj": "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs", "rotation": 0, "wgs84Center": {"lat": 47.39790958284822, "lon": 6.527087535108197}, "zExaggeration": 1.0, "zShift": 0.0}, "layers": [{"type": "layer", "id": 0, "properties": {"name": "clip_dtm_francia_eudem", "queryable": 1, "visible": true, "type": "dem", "shading": true}, "data": [{"type": "block", "layer": 0, "block": 0, "grid": {"width": 211, "height": 190, "url": "./data/index/a0.bin"}, "width": 100.0, "height": 90.1010101010101, "translate": [0.0, 0.0, 0.0], "zShift": 0.0, "zScale": 0.038177046012121664, "material": {"type": 0, "image": {"url": "./data/index/a0.png"}, "ds": 1}, "sides": true}]}]} );
app.start();
if (Q3D.Config.northArrow.visible) app.buildNorthArrow(document.getElementById("northarrow"), app.scene.userData.rotation);