react-amap-extend

react-amap-extend 继承与扩展自 react-amap 项目。在 react-amap 项目的基础上，扩展了如下的功能：

• [x] 提供了加载离线高德地图 js api 的功能，可在内网环境下使用。
• [x] 封装了更多的高德地图 js api 的组件。
• [x] 修正了 react-amap 中存在的一些 bug。

react-amap-extend 目前已经包含的组件如下：

| 名称 | 说明 | |-------------------|----------------------------------------------------------------------------| | Map | 显示地图；下面的其他组件（除PolyEditor和CircleEditor外）必须作为 Map 的子组件使用 | | Marker | 在地图上显示单个坐标点 | | Markers | 在地图上显示多个坐标点 | | Polygon | 在地图上显示多边形 | | Polyline | 在地图上显示折线 | | PolyEditor | 作为Polygon或Polyline或Rectangle的子组件，给他们提供编辑功能 | | Circle | 在地图上显示圆形 | | CircleEditor | 作为Circle的子组件使用，给他提供编辑功能 | | GroundImage | 在地图上某个边界范围内显示图片 | | InfoWindow | 在地图上显示信息窗体 | | CircleMarker | 圆点标记，自1.4.3新增，属性和方法于Circle大体一致，区别为CircleMarker不随着地图级别变化发生大小改变，radius的单位为px | | Ellipse | 在地图上显示椭圆，作为Map的子组件 | | EllipseEditor | 作为Ellipse的子组件，提供编辑功能 | | Rectangle | 在地图上显示矩形，作为Map的子组件 | | RectangleEditor | 作为Rectangle的子组件，提供编辑功能 | | BezierCurve | 在地图上显示贝塞尔曲线，作为Map的子组件 | | BezierCurveEditor | 作为BezierCurve的子组件，提供编辑功能 | | Text | 以文本方式显示单个坐标点的时候使用 | | WMS | 在地图上添加OGC的WMS格式地图 | | WMTS | 在地图上添加OGC的WMT格式地图 | | WMTSGroup | 在地图上添加一组WMTS格式地图 | | Heatmap | 在地图上添加热力图层 | | LabelMarker | 标注类，支持大量点标注和文本标注的绘制，作为LayersLayer的子组件 | | LabelsLayer | LabelsLayer 类是用于承载 LabelMarker 对象的图层。可作为Map或LayerGroup的子组件 | | MassMarks | 此类表示海量点类，利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器。可作为Map或LayerGroup的子组件 | | TileLayer | 切片图层类。可作为Map或LayerGroup的子组件 | | ImageLayer | 图片图层类。使用一张图片作为图层。可作为Map或LayerGroup的子组件 | | Satellite | 卫星图层类，继承自TileLayer。可作为Map或LayerGroup的子组件 | | LayerGroup | 作为图层的容器，可统一控制容器中的图层。作为Map的子组件 | | RangingTool | 测量工具，可在地图上进行距离测量。可作为Map的子组件 | | Flexible | 灵活切片图层，继承自AMap.TileLayer，开发者可通过构造时传入给其传入createTile字段来指定每一个切片的内容。 | | ElasticMarker | 灵活点标记，一种可以随着地图级别变化而改变图标和大小的点标记。 |

如何在项目中接入 react-amap-extend;

安装

npm install --save react-amap-extend

npm 用法

<div id="app"></div>

#app {
  width: 600px;
  height: 400px;
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap-extend';

ReactDOM.render(
  <Map amapkey={YOUR_AMAP_KEY} version={VERSION} />,
  document.querySelector('#app')
)

amapkey 说明见下文 version 指定高德地图版本 不填则使用默认值: 1.4.0

也可以手工引入你需要的组件：

import Map from 'react-amap-extend/lib/map';
import Marker from 'react-amap-extend/lib/marker';
// ... your other code

以上为简单场景的应用。 tips: Map 组件的父元素须设置高度和宽度；关于代码中的 Map 组件的 amapkey 属性见下方的说明。

配合离线高德 js api 使用

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap-extend';

ReactDOM.render(
  <Map 
    amapkey={YOUR_AMAP_KEY}
    hostAndPath={''} />,
  document.querySelector('#app')
)

在Map组件中，传入hostAndPath参数，hostAndPath参数为自行部署的高德 js api 地址。

CDN 用法

在 HTML 页面中加入 react-amap-extend 库的 CDN 地址，插件会在 window 下暴露 ReactAMAP 变量。

<script src="path/to/react.js"></script>
<script src="path/to/react-dom.js"></script>
<script src="path/to/dist/react-amap-extend.js"></script>
<script>
  var Map = ReactAMAP.Map;
  var Marker = ReactAMAP.Marker;
  
  var pos = { longitude: 120, latitude: 30 };
  var YourApp = React.createElement(
    Map,
    { center: pos },
    React.createElement(
      Marker,
      { position: pos },
      null
    )
  );
  ReactDOM.render(YourApp, document.getElementById('root'));
</script>

CDN 地址

实际应用中你可以使用下面的 CDN 地址，也可以把脚本下载下来本地部署。

tips: 记得将其中的 VERSION 替换为真实版本号。

• https://unpkg.com/react-amap-extend@VERSION/dist/react-amap-extend.js
• https://unpkg.com/react-amap-extend@VERSION/dist/react-amap-extend.min.js

关于 Key

在上面的例子中需要给 Map 组件传入 amapkey 属性，这个是高德地图给开发者分配的开发者 Key；你可以在高德开放平台申请你自己的 Key。

在 react-amap-extend 中 Key 的传入方式有两种:

• 给 Map 组件传入 amapkey 属性（因为 React 框架本身对 key 属性有其他作用，所以不能用 key，所以我们用 amapkey），这样的缺点是如果多个地方使用就要每次都要传入；
• 你也可以定义一个纯组件,把 Map 组件的 amapkey 属性写好后返回新组件。
• 直接把你的 Key 定义在全局变量 window.amapkey 上，react-amap-extend 在调用高德接口时会尝试从这里读取。（不推荐）

开发

npm install
npm start # http://localhost:9001

License

MIT License