react-tmap高性能地图组件库-技术圈

react-tmap 是一个基于腾讯地图、TypeScript 封装适用于 react 的高性能地图组件库。

功能特性：

文档完善：基于官方文档和框架用法的文档可读性高，组件示例完善
组件化：封装腾讯地图命令式的 api 为响应式组件，无需关心复杂的地图 api，只需要操作数据即可
多框架：包含 react-tmap 和 vue-tmap，且共享同一套类型定义
Type-safe(@map-component/tmap-types): 补充了腾讯地图 sdk 的类型声明，组件也使用 TypeScript 开发，更好的开发体验
自定义组件：提供开放地图实例，可编写自定义组件或直接调用地图原生 api
性能优化：统一地图 api 调用方式和数据监听，防止误用地图 api 引起性能问题

文档和示例

访问官方文档，查看更多地图组件

腾讯地图官方文档

主要组件

react 组件	描述
Map	地图基础组件
MultiMarker	多个标注点
MultiPolyline	折线
MultiPolygon	多边形
MultiLabel	文本标注
MultiCircle	圆形
DOMOverlay	DOM 覆盖物抽象类
InfoWindow	信息提示窗
MarkerCluster	点聚合

快速开始

安装

npm install @map-component/react-tmap

申请腾讯地图密钥

https://lbs.qq.com/dev/console/key/manage

简单示例

import React, { useState } from 'react';
import { TMap, MultiPolygon } from '@map-component/react-tmap';

const styles = {
  polygon: {
    color: '#3777FF', //面填充色
    showBorder: false, //是否显示拔起面的边线
    borderColor: '#00FFFF', //边线颜色
  },
};

const paths = [
  { lat: 40.041054, lng: 116.272303 },
  { lat: 40.039419, lng: 116.272721 },
  { lat: 40.039764, lng: 116.274824 },
  { lat: 40.041374, lng: 116.274491 },
];

const geometries = [
  {
    id: 'p1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
    styleId: 'polygon', //绑定样式名
    paths: paths, //多边形轮廓
  },
];

const center = { lat: 40.041054, lng: 116.272303 };

export default () => {
  const [color, setColor] = useState('#00FF00');
  const [zoom, setZoom] = useState(16);

  const polygonStyles = React.useMemo(
    () => ({
      polygon: {
        ...styles.polygon,
        color,
      },
    }),
    [color],
  );

  return (
    <div>
      <div>
        <button onClick={() => setColor('#00FFFF')}>修改多边形颜色</button>
        <button onClick={() => setZoom(zoom + 1)}>修改地图缩放级别</button>
      </div>

      <TMap
        mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ" // 申请的 key
        zoom={zoom}
        center={center} // 设置中心点坐标
        control={{
          zoom: { position: 'BOTTOM_RIGHT' },
          scale: false,
          rotate: false,
        }}
      >
        <MultiPolygon
          styles={polygonStyles}
          geometries={geometries}
          onClick={() => console.log('点击了多边形')} // 点击多边形
        />
      </TMap>
    </div>
  );
};

mapKey 为新申请的密钥