从 qgis2threejs 导出的 3D 地图代码修改后的空白页答案

【问题标题】：Blank page after modification on code of 3D map exported from qgis2threejs从 qgis2threejs 导出的 3D 地图代码修改后的空白页
【发布时间】：2019-09-07 11:54:27
【问题描述】：

我需要更改使用 qgis2threejs（QGIS 的 3D 网络地图插件）创建的 3D 地图中的一些代码。

我不是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)

【问题讨论】：

标签： javascript json three.js

【解决方案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);

【讨论】：