框架集成问题

约 1648 字大约 5 分钟

2024-10-08

请问移动端如何锁顶正北方向？

map.scene.screenSpaceCameraController.enableTilt = false;
map.scene.camera.setView({
  orientation: {
    heading: 0,
  },
});

本地代码是能正常运行，打包发布到服务器后出现异常的情况

打包配置导致打包后原本加载的文件路径不正确（这个情况可能性较大，比如本地运行正常，打包之后底图加载不出来，检查config.json的加载路径是否正确）
可能与 Node 版本、NPM 版本、npm 命令等环境信息有关
完整项目代码中可能存在相关的依赖路径未配置好的问题
插件版本需要与 mars3d 主库版本保持一致
mars3d 版本与 cesium 版本保持匹配
可以增删 map 相关的功能性代码，排查定位问题

cesiumlab 切 3dtile 的文件是 .clt 文件,用这个文件能自己能发布服务吗？

1.一般我们不负责处理数据，请咨询数据处理工具相关官方

更新 Mars3D 版本后，需要更新插件的版本吗

插件版本需要与 Mars3D 版本保持一致，避免冲突

http://mars3d.cn/docs/guide/sdk/

解决 cesium 切片底图正常出来但控制台一直报错的方法一直以来都是使用 cesiumlab 对地图影像切片，然后去发布使用，经常遇到一个问题，就是在控制台老是报错，底图也能正常出来，可就是报错。报错信息如下。 An error occurred in "v": Failed to obtain image tile X: 422 Y: 203 Level: 9. GET http://192.168.1.30:803/9/422/203.png net::ERR_FAILED 404 Access to XMLHttpRequest at 'http://192.168.1.30:803/8/210/101.png' from origin 'http://192.168.1.30:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

虽然不影响什么，但是一片飘红很烦，而且影响调试，找遍全网也没找到解决办法，就研究了一个骚操作：根据报错信息找了一下，文件中确实没有这个切片，因为我们用的底图只有需要的那个地区，并不是整个地球的影像图，所以根本没有这些切片，报错就很正常了。我们的切片是从服务器发布的，然后浏览器从服务器请求过来的，既然如此，我们能不能保证每个请求都有图片，如果确实没有这个资源就给个默认图片，请求成功了就不会报错了，于是修改 nginx 配置。

location / {
            root   html;
            index  index.html index.htm;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            if ($request_method = 'OPTIONS') { return 204; }
            if ( !-f $request_filename ){ #关键配置
                rewrite (.*) /404.png;
            }
        }

其中 404.png 是特意在根目录放的默认图片（放 html 目录下），这样没有切片时就会默认返回 404.png 了，为了不影响视觉效果，404.png 是一张纯透明的图，为了节约性能，长宽都是 1 像素。

如何在自己的项目中通过 mars3d 加载 shp 建筑物白膜文件

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



// 判断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, {
        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.Bloom({
        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);
    });
)}