第12章 - 标记弹窗与自定义覆盖物

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>Marker 与 Popup</title>
  <link href="https://unpkg.com/maplibre-gl@6.17.0/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { height: 100vh; }
    .pin-warehouse { width: 18px; height: 18px; border-radius: 50%; background: #e8590c; border: 2px solid #fff; cursor: grab; }
    .maplibregl-marker-covered { opacity: 0.15; pointer-events: none; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/maplibre-gl@6.17.0/dist/maplibre-gl.js"></script>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://demotiles.maplibre.org/style.json',
      center: [116.39, 39.9],
      zoom: 10
    });

    map.on('load', () => {
      // 1) 自定义 element 的 Marker：offset 默认 [0,0]，anchor 用 center
      const el = document.createElement('div');
      el.className = 'pin-warehouse';

      const marker = new maplibregl.Marker({ element: el, anchor: 'center', draggable: true })
        .setLngLat([116.39, 39.9])
        .setPopup(
          new maplibregl.Popup({ offset: 16, closeButton: true, maxWidth: '320px' })
            .setHTML('<b>仓库 A</b><br/>拖动图钉可调整位置')
        )
        .addTo(map);

      // 2) 拖动时实时回写坐标，dragend 才是提交时机
      marker.on('drag', () => {
        const { lng, lat } = marker.getLngLat();
        document.title = '拖动中 ' + lng.toFixed(5) + ', ' + lat.toFixed(5);
      });
      marker.on('dragend', () => {
        const { lng, lat } = marker.getLngLat();
        console.log('提交坐标', lng, lat);
      });

      // 3) 点击地图别处新增标记；注意 Popup 默认 closeOnClick: true
      map.on('click', (e) => {
        const p = document.createElement('div');
        p.className = 'pin-warehouse';
        new maplibregl.Marker({ element: p })
          .setLngLat(e.lngLat)
          .setPopup(new maplibregl.Popup().setText('+' + e.lngLat.lng.toFixed(4) + ', ' + e.lngLat.lat.toFixed(4)))
          .addTo(map)
          .togglePopup();
      });

      // 4) 显式控制 popup 打开/关闭
      map.on('contextmenu', () => marker.togglePopup());
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>Custom Layer 最小示例</title>
  <link href="https://unpkg.com/maplibre-gl@6.17.0/dist/maplibre-gl.css" rel="stylesheet" />
  <style>body { margin: 0; } #map { height: 100vh; }</style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/maplibre-gl@6.17.0/dist/maplibre-gl.js"></script>
  <script>
    const VERT = `#version 300 es
      uniform mat4 u_matrix;
      void main() {
        gl_Position = u_matrix * vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 24.0;
      }`;
    const FRAG = `#version 300 es
      precision highp float;
      out vec4 fragColor;
      void main() { fragColor = vec4(1.0, 0.0, 0.0, 1.0); }`;

    function compile(gl, type, src) {
      const s = gl.createShader(type);
      gl.shaderSource(s, src);
      gl.compileShader(s);
      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
      return s;
    }

    const customLayer = {
      id: 'center-dot',
      type: 'custom',
      renderingMode: '2d',
      onAdd(map, gl) {
        this.program = gl.createProgram();
        gl.attachShader(this.program, compile(gl, gl.VERTEX_SHADER, VERT));
        gl.attachShader(this.program, compile(gl, gl.FRAGMENT_SHADER, FRAG));
        gl.linkProgram(this.program);
        if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
          throw new Error(gl.getProgramInfoLog(this.program));
        }
        this.uMatrix = gl.getUniformLocation(this.program, 'u_matrix');
      },
      render(gl, options) {
        gl.useProgram(this.program);
        // modelViewProjectionMatrix 是 Float32Array；上传时 uniformMatrix4fv 要传 false
        gl.uniformMatrix4fv(this.uMatrix, false, options.modelViewProjectionMatrix);
        gl.drawArrays(gl.POINTS, 0, 1);
      },
      onRemove(map, gl) {
        gl.deleteProgram(this.program);
      }
    };

    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://demotiles.maplibre.org/style.json',
      center: [116.39, 39.9],
      zoom: 6
    });
    map.on('load', () => map.addLayer(customLayer));
  </script>
</body>
</html>