【antvl7】antvl7入门

前言

• 最近玩玩antvl7，很多时候，都需要整个地图之类的，让人觉得系统高大上，所以这玩意也是没法避免不写的。

申请账号

• 官方说不支持独立引擎，需要引入第三方，推荐高德。那么就先注册高德。
• https://lbs.amap.com/api/javascript-api/guide/abc/prepare

l7-react和l7

• l7react是对l7封装的jsx，这个想法很好，可惜目前不成熟，特别是官网上文档还有很多没有，所以如果是简单用法可以用用，需要用复杂的用法建议直接放弃l7-react，使用l7。
• 这里就简单写下l7-react的大致用法。
• 事件的绑定都是在SceneEvent完成，这个一般要包在以Layer结尾的组件下才能收到事件。反正l7-react暂时不建议使用。文档有些组件没写，跳过去直接404。

l7安装与使用

npm i  @antv/l7-maps @antv/l7

• 如果你需要卫星地图，可能还需要装个包：

@antv/l7-draw

scene

• 根据scene来使用，id是找页面上id同名的，也好理解。当new了后，地图就有了

  const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        center: [118.893155, 32.094708],
        pitch: 56.499,
        style: 'dark',
        zoom: 11,
        token: '你的token',
      }),
    });

• 当地图载入完成后，会触发其loaded事件。正常情况，其他层包括scene的加入和监听事件都在loaded后进行，否则直接报错。

layer

• 需要啥图就可以找对应的layer加上就行：
• https://l7.antv.vision/zh/docs/api/layer/layer
• 我这里以蜂窝热力图为例：

    const layer = new HeatmapLayer({})
        .source(
          {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {
                  h0: '500  ',
                },
                geometry: { type: 'Point', coordinates: [118.893155, 32.094708] },
              },
              {
                type: 'Feature',
                properties: {
                  h0: '500',
                },
                geometry: { type: 'Point', coordinates: [118.893155, 32.194708] },
              },
              {
                type: 'Feature',
                properties: {
                  h0: '500',
                },
                geometry: { type: 'Point', coordinates: [118.893155, 32.044708] },
              },
            ],
          },
          {
            transforms: [
              {
                type: 'hexagon',
                size: 500,
                field: 'h0',
                method: 'sum',
              },
            ],
          },
        )
        .size('sum', [0, 500])
        .shape('hexagonColumn')
        .style({
          coverage: 0.8,
          angle: 0,
          opacity: 1.0,
        })
        .color('yellow');
      scene.addLayer(layer);

• 一共3个点，调整参数可以玩玩。它这个高度和颜色跟周围的点数量有一定关系。

Marker与popup

• marker比别的东西好处就是在缩放到很小时候也能看见。如果是层那么会随着缩放而缩放。
• marker一般也会和popup进行连用，当用户点击marker后就会显示对应的详细信息：

 	const html = `<p>省份:江苏 </p><p>地区：南京</p><p>设备：xx</p>`;
      const popup = new Popup({
        offsets: [0, 50],
        closeButton: false,
      });
      popup.setHTML(html);
      const marker = new Marker();
      marker.setLnglat({ lng: 118.893155, lat: 32.144708 }).setPopup(popup);
      scene.addMarker(marker);

• 在与层连用的过程中，比如前面那个热力图，我们需要点击图上的圆柱显示详细信息，那么就监听click，然后new 一个popup把scene上加入即可。popup是一个全局唯一的提示框，所以前面展开的popup自动关闭。

   layer.on('click', (ev) => {
        const html = `<p>省份:江苏 </p><p>地区：南京</p><p>${ev.featureId}</p>`;
        const popup = new Popup({
          offsets: [0, 50],
          closeButton: false,
        });
        popup.setLnglat({
          lng: ev.feature.geometry.coordinates[0],
          lat: ev.feature.geometry.coordinates[1],
        });
        popup.setHTML(html);

        scene.addPopup(popup);
      })

control

• 内置组件
• https://l7.antv.vision/zh/docs/api/component/control

      const zoomControl = new Zoom({
        position: 'topright',
      });
      const scaleControl = new Scale({
        position: 'bottomright',
      });
      scene.addControl(zoomControl);
      scene.addControl(scaleControl);

l7-react安装与使用

npm i @antv/l7-react

• 这个react实际上就是把useEffect里l7操作的变成了jsx，写起来更好看一点。
• 把token填进去：

          <AMapScene
            map={{
              center: [116.9653057457507, 32.24933018276361],
              pitch: 0,
              style: 'dark',
              zoom: 6,
              token: '你的token',
            }}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
            }}
          >
            <SceneEvent
              type="click"
              handler={(e) => {
                console.log(e);
              }}
            />
          </AMapScene>

• 这样就能看见地图了。

标注

• 利用marker组件制作。
• 在只传递经纬度的情况下，就是个蓝色小圆圈。
• 也可以自定义样式，l7里的demo写了个dom来替换：

const MarkerInfo = ({ title }: { title: string }) => {
  return (
    <div className="markerContent">
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          height: '32px',
          padding: '0.05rem',
          background: '#1677ff',
          borderRadius: '44px',
        }}
      >
        <div
          style={{
            color: '#fff',
            fontSize: '12px',
          }}
        >
          {title}
        </div>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
        }}
      >
        <img
          style={{
            width: '20px',
            height: '30px',
          }}
          alt="marker"
          src="https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*n6cXTb8R7iUAAAAAAAAAAAAAARQnAQ"
        />
      </div>
    </div>
  );
};

• 只要把元素丢进marker里即可：

 <Marker lnglat={{ lat: 32.24933018276361, lng: 116.9653057457507 }}>
              <MarkerInfo title="yehuozhili" />
            </Marker>

Control

• 这个小插件一样的有3种type，其中logo就是左下角那玩意，你再加他就多了。剩下的可以加上能看比例尺和缩放。

 			<Control type="scale" position="bottomright" />
            <Control type="zoom" position="bottomright" />