自定义图层-GLCustomLayer 结合 ReGL

利用 GLCustomLayer 和三方渲染引擎（three、regl 等）结合，绘制自定义的三维数据。

源代码编辑器

<!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%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center-v2/regl.js"></script>
    <script src="//webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
    <script type="text/javascript">
      var map = new AMap.Map('container', {
        center: [116.54, 39.79],
        zooms: [2, 20],
        zoom: 14,
        viewMode: '3D',
        pitch: 50,
      });

      var regl;
      var draw;
      // 数据转换工具
      var customCoords = map.customCoords;
      // 数据使用转换工具进行转换，这个操作必须要提前执行（在获取镜头参数 函数之前执行），否则将会获得一个错误信息。
      var data = customCoords.lngLatsToCoords([
        [116.52, 39.79],
        [116.54, 39.79],
        [116.56, 39.79],
      ]);

      // 创建 GL 图层
      var gllayer = new AMap.GLCustomLayer({
        // 图层的层级
        zIndex: 10,
        // 初始化的操作，创建图层过程中执行一次。
        init: (gl) => {
          regl = createREGL({
            gl,
          });
          draw = regl({
            frag: `
                    precision mediump float;
                    uniform vec4 color;
                    void main() {
                        gl_FragColor = color;
                    }`,
            vert: `
                    precision mediump float;
                    attribute vec2 position;
                    uniform mat4 mvp;
                    void main() {
                        gl_Position = mvp * vec4(position, 0, 1);
                        gl_PointSize = 100.;
                    }`,
            attributes: {
              position: regl.buffer(data),
            },
            primitive: 'points',
            uniforms: {
              color: [0.2, 0.4, 0.7, 1],
              mvp: regl.prop('mvp'),
            },
            count: 3,
          });
        },
        render: () => {
          // 这里必须执行！！重新设置 three 的 gl 上下文状态。
          regl._refresh();
          draw({
            mvp: customCoords.getMVPMatrix(),
          });
        },
      });
      map.add(gllayer);
    </script>
  </body>
</html>

控制台

清空

示例
中心常见
问题智能
客服

自定义图层-GLCustomLayer 结合 ReGL

利用 GLCustomLayer 和三方渲染引擎（three、regl 等）结合，绘制自定义的 三维数据。

利用 GLCustomLayer 和三方渲染引擎（three、regl 等）结合，绘制自定义的三维数据。