Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

百度地图+threejs 报错 TypeError: this.mapService.map.getCameraState is not a function at e.value (l7-three:1:19753) #2377

Open
msdog opened this issue Apr 7, 2024 · 6 comments
Open

百度地图+threejs 报错 TypeError: this.mapService.map.getCameraState is not a function at e.value (l7-three:1:19753) #2377

msdog opened this issue Apr 7, 2024 · 6 comments
Assignees
@lzxue @lvisei
Labels
good first issue Good for newcomers 🌟 star

Comments

@msdog
Copy link

msdog commented Apr 7, 2024 •
edited

问题描述

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>自定义三维图层</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    #container {
      width: 100%;
      height: 100%;
    }

    /* #container2 {
      width: 50%;
      height: 100%;
      background-color: #c90;
    }

    #container2 canvas {
      width: 100%;
      height: 100%;
    } */
  </style>
</head>

<body style="display: flex;">

  <div id="container"></div>
  <script src="https://unpkg.com/three@0.115.0/build/three.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.138.3/three.min.js"></script> -->
  <script>
    window.Three = THREE
  </script>
  <script src='https://unpkg.com/@antv/l7'></script>
  <script src='https://unpkg.com/@antv/l7-three'></script>


  <script type="text/javascript">
    console.log(THREE)

    const l7Scene = new L7.Scene({
      id: 'container',
      map: new L7.BaiduMap({
        style: 'dark',
        // token: '',
        center: [110.770672, 34.159869],
        pitch: 45,
      }),
    });

    l7Scene.registerRenderService(L7Three.ThreeRender);
    // 3、构建 threejs 图层对象并在其中添加 threejs 构建的网格对象
    const threeJSLayer = new L7Three.ThreeLayer({
      onAddMeshes: (threeScene, layer) => {
        threeScene.add(new THREE.AmbientLight(0xffffff));

        const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
        sunlight.position.set(0, 80000000, 100000000);
        sunlight.matrixWorldNeedsUpdate = true;
        threeScene.add(sunlight);

        let center = l7Scene.getCenter();

        let cubeGeometry = new THREE.BoxGeometry(10000, 10000, 10000);
        let cubeMaterial = new THREE.MeshNormalMaterial();
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
        threeScene.add(cube);
      },
    })
      .animate(true);

    // 4、添加 threejs 图层对象
    l7Scene.addLayer(threeJSLayer);
  </script>
</body>

</html>

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 7, 2024

hi @msdog, welcome!

@github-actions github-actions bot added the good first issue Good for newcomers label Apr 7, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 7, 2024

Hi @msdog, Please star this repo if you find it useful! Thanks ⭐!
你好 @msdog。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

@lvisei
Copy link
Member

lvisei commented Apr 7, 2024

请提供完整示例，如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // xxx
  </script>
</body>
</html>

@msdog
Copy link
Author

msdog commented Apr 8, 2024 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>自定义三维图层</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    #container {
      width: 100%;
      height: 100%;
    }

    /* #container2 {
      width: 50%;
      height: 100%;
      background-color: #c90;
    }

    #container2 canvas {
      width: 100%;
      height: 100%;
    } */
  </style>
</head>

<body style="display: flex;">

  <div id="container"></div>
  <script src="https://unpkg.com/three@0.115.0/build/three.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.138.3/three.min.js"></script> -->
  <script>
    window.Three = THREE
  </script>
  <script src='https://unpkg.com/@antv/l7'></script>
  <script src='https://unpkg.com/@antv/l7-three'></script>


  <script type="text/javascript">
    console.log(THREE)

    const l7Scene = new L7.Scene({
      id: 'container',
      map: new L7.BaiduMap({
        style: 'dark',
        // token: '',
        center: [110.770672, 34.159869],
        pitch: 45,
      }),
    });

    l7Scene.registerRenderService(L7Three.ThreeRender);
    // 3、构建 threejs 图层对象并在其中添加 threejs 构建的网格对象
    const threeJSLayer = new L7Three.ThreeLayer({
      onAddMeshes: (threeScene, layer) => {
        threeScene.add(new THREE.AmbientLight(0xffffff));

        const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
        sunlight.position.set(0, 80000000, 100000000);
        sunlight.matrixWorldNeedsUpdate = true;
        threeScene.add(sunlight);

        let center = l7Scene.getCenter();

        let cubeGeometry = new THREE.BoxGeometry(10000, 10000, 10000);
        let cubeMaterial = new THREE.MeshNormalMaterial();
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
        threeScene.add(cube);
      },
    })
      .animate(true);

    // 4、添加 threejs 图层对象
    l7Scene.addLayer(threeJSLayer);
  </script>
</body>

</html>

@msdog
Copy link
Author

msdog commented Apr 8, 2024

腾讯地图也一样

@lvisei
Copy link
Member

lvisei commented Apr 8, 2024 •
edited

https://github.com/antvis/L7/blob/master/packages/three/src/core/threeRenderService.ts#L68-L79

百度、腾讯、天地图 暂未支持与 THREE 相机同步

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lzxue lzxue

@lvisei lvisei

Labels
good first issue Good for newcomers 🌟 star
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lzxue @lvisei @msdog