maptalks图层交互 - 模拟 Tooltip

不想上班只想要钱

于 2025-03-23 23:38:20 发布

阅读量516

点赞数 7

分类专栏： maptalks 前端文章标签：前端 maptalks

本文链接：https://blog.youkuaiyun.com/Aa12364567/article/details/146464631

版权

前端同时被 2 个专栏收录

261 篇文章

订阅专栏

maptalks

10 篇文章

订阅专栏

maptalks图层交互 - 模拟 Tooltip
图层交互-模拟tooltip官方文档

<!DOCTYPE html>
<html>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1' />
  <title>图层交互 - 模拟 Tooltip</title>
  <style type='text/css'>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }

    .container {
      background-color: #444444;
      width: 100%;
      height: 100%;
    }

    .marker-info {
      font-size: 14px;
      color: #fff;
      /* text-shadow: 2px 0 white; */
      background-color: rgba(0, 0, 0, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.7);
      /* width: 120px; */
      min-width: 60px;
      height: auto;
      line-height: 20px;
      text-align: center
    }
  </style>
  <link rel='stylesheet' href='https://maptalks.com/api/maptalks-gl.css' />
  <script type='text/javascript' src='https://maptalks.com/api/maptalks-gl.js'></script>

  <body>
    <script type="text/javascript" src="/lib/mt.gui.min.js"></script>

    <div id="map" class="container"></div>

    <script>
      const map = new maptalks.Map("map", {
        center: [-74.00912099912109, 40.71107610933129],
        zoom: 16,
        lights: {
          directional: {
            direction: [1, 0, -1],
            color: [1, 1, 1]
          },
          ambient: {
            resource: {
              // url: {
              //   front: "/resources/hdr/gradient/front.png",
              //   back: "/resources/hdr/gradient/back.png",
              //   left: "/resources/hdr/gradient/left.png",
              //   right: "/resources/hdr/gradient/right.png",
              //   top: "/resources/hdr/gradient/top.png",
              //   bottom: "/resources/hdr/gradient/bottom.png"
              // },
              prefilterCubeSize: 1024
            },
            hsv: [0, 0.34, 0],
            orientation: 0
          }
        }
      });


      /**start**/
      const style = {
        style: [{
            name: 'area-fill',
            filter: true,
            renderPlugin: {
              dataConfig: {
                type: "fill"
              },
              sceneConfig: {},
              type: "fill"
            },
            symbol: {
              polygonFill: "#996247",
              polygonOpacity: 1
            }
          },
          {
            name: 'area-border',
            filter: true,
            renderPlugin: {
              dataConfig: {
                type: "line"
              },
              sceneConfig: {},
              type: "line"
            },
            symbol: {
              lineColor: "#E2E2E2",
              lineOpacity: 1,
              lineWidth: 2
            }
          }
        ]
      };


      const geo = new maptalks.GeoJSONVectorTileLayer("geo", {
        data: "/resources/geojson/area.geojson",
        style
      });

      geo.on("dataload", (e) => {
        map.fitExtent(e.extent);
      });

      const highLightKey = 'test';

      function highLight(feature, layer) {
        layer.highlight([{
          id: feature.id,
          plugin: 'area-fill',
          name: highLightKey,
          color: 'red'
        }]);
      }

      function cancel(layer) {
        layer.cancelHighlight([highLightKey]);
      }

      map.on('mousemove', e => {
        const data = geo.identify(e.coordinate);
        if (!data || !data.length) {
          cancel(geo);
          uiMarker.remove();
          return;
        }
        const feature = data[data.length - 1].data.feature;
        highLight(feature, geo);
        showInfo(e.coordinate, feature);
        // console.log(data[0]);
      })

      function getMarkerContent(feature) {
        return `<div class="marker-info">${feature.properties.name}</div>`;
      }


      function showInfo(coordinate, feature) {
        if (!uiMarker.getMap()) {
          uiMarker.addTo(map);
        }
        uiMarker.setContent(getMarkerContent(feature));
        uiMarker.setCoordinates(coordinate);
      }
      var uiMarker = new maptalks.ui.UIMarker(map.getCenter(), {
        content: '<div class="text_marker">maptalks</div>',
        dy: 30
      });


      /**end**/

      const groupLayer = new maptalks.GroupGLLayer("group", [geo], {
        sceneConfig: {
          environment: {
            enable: true,
            mode: 1,
            level: 0,
            brightness: 0
          }
        }
      });
      groupLayer.addTo(map);
    </script>
  </body>

</html>