示例

深入浅出

  • Hello AMap-React

    • 最基本的入门用法

  • 属性和事件绑定

    • 将 React 组件状态绑定到地图组件的属性
    • 在 React 组件中响应地图组件的事件

  • 自定义 Marker

    • 使用 React 和 JSX 便捷地开发自定义样式的点标记

  • 叠加显示卫星图/路况图

    • 使用SatelliteLayer和TrafficLayer
    • 通过opacity控制图层的透明度

  • 受控组件

    • 将地图作为受控组件使用
    • 绑定center、zoom、pitch、rotation属性
    • 绑定mapmove、zoomchange、dragging等事件，同步上述属性的值

  • 大量 LabelMarker

    • 使用自定义组件，接管大量数据的生命周期
    • 直接使用AMap.LabelsLayer和AMap.LabelMarker渲染大量的数据

  • 定位 GeoLocation

    • 加载AMap.GeoLocation服务插件，用getCurrentLocation方法获取当前定位点
    • 使用Marker展示定位点，使用Circle展示定位精度

  • 自定义缩放按钮

    • 使用useAmap获取AMap.Map实例对象
    • 使用useAmapEvents绑定事件，获取地图的缩放级别
    • 实现缩放按钮，展示当前缩放级别，并自定义样式

  • 搜索框

    • 使用 Ant Design 构建 UI 组件
    • 通过绝对定位来布置搜索框与搜索结果列表，让它们悬浮在地图之上
    • 使用AMap.DistrictSearch服务插件实现城市选择器
    • 使用AMap.AutoComplete服务插件实现搜索建议功能
    • 使用AMap.PlaceSearch服务插件实现地点搜索

  • 热力图 HeatMap

    • 加载AMap.HeatMap插件，将数据以热力图方式展现

应用实例

  • 轨迹回放

    • 使用自定义Marker实现小车图标
    • 使用Polyline展示轨迹
    • 通过ref获取点标记实例，调用moveAlong方法让它沿着轨迹移动

  • 小区排行

    • 使用多个Polygon展示小区，根据排行为它们指定填充色
    • 响应鼠标事件，让对应的小区高亮显示
    • 使用InfoWindow显示选中小区的详情

  • 各省GDP增速可视化

    • 使用简易行政区图<CountryLayer>展现各省边界
    • 根据各省GDP增速对省进行不同深浅的着色
    • 使用<LabelMarker>展现各省名称

  • 围栏绘制与编辑

    • 响应鼠标事件，将点击的位置加入到多边形路径中
    • 使用PolygonEditor编辑多边形
    • 将围栏结果导出成 JSON

  • 点聚合 MarkerCluster

    • 加载AMap.MarkerCluster插件
    • 通过 react-dom 使用 JSX 来自定义点聚合的标记点内容

  • GLCustomLayer + regl