修复 TileLayer 对AMap JS API v1.4.xx的兼容

packages/polygon/README.md

@@ -47,6 +47,11 @@ const Example = () => {
             fillOpacity={0.4}
             fillColor="#1791fc"
             zIndex={50}
+            draggable={true}
+            onChange={e=>console.log(e)}
+            onDragStart={(e)=>{console.log(e)}}
+            onDragging={(e)=>{console.log(e)}}
+            onDragEnd={(e)=>{console.log(e)}}
           />
           <Polygon
             visiable={show}
@@ -84,6 +89,9 @@ export default Mount;
 
 ### 事件
 
+Polygon v1.4.15 和 v2.0.xx 版本都是支持 drag 相关事件的，虽然官网文档有的写的不全，但经实验都是可以的。
+<!--rehype:style=background: #fff3b7;-->
+
 [事件类型文档](https://github.com/uiwjs/react-amap/blob/8a8c31afdff68e04097c2b140e9a58200b269aee/src/types/overlay.d.ts#L867-L893)
 
 | 参数 | 说明 | 类型 |
@@ -97,7 +105,10 @@ export default Mount;
 | onMouseUp | 鼠标抬起 | `(event: MapsEvent): void;` |
 | onMouseOver | 鼠标经过 | `(event: MapsEvent): void;` |
 | onMouseOut | 鼠标移出 | `(event: MapsEvent): void;` |
-| onChange | 属性发生变化时 | `(): void;` |
+| onDragStart | 拖拽开始 | `(event: MapsEvent): void;` |
+| onDragging | 拖拽中 | `(event: MapsEvent): void;` |
+| onDragEnd | 拖拽结束 | `(event: MapsEvent): void;` |
+| onChange | 属性发生变化时 (只支持 v1.4.xx 版本) | `(event: { type: string, target: any }): void;` |
 | onTouchStart | 触摸开始时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
 | onTouchMove | 触摸移动进行中时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
 | onTouchEnd | 触摸结束时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |

packages/polygon/src/usePolygon.tsx

@@ -30,6 +30,9 @@ export const usePolygon = (props = {} as UsePolygon) => {
     'onMouseOver',
     'onMouseOut',
     'onChange',
+    'onDragStart',
+    'onDragging',
+    'onDragEnd',
     'onTouchStart',
     'onTouchMove',
     'onTouchEnd',

packages/polyline/README.md

@@ -38,6 +38,11 @@ const Example = () => {
             }}
             strokeColor="black"
             strokeOpacity={1}
+            draggable={true}
+            onChange={e=>console.log(e)}
+            onDragStart={(e)=>{console.log(e)}}
+            onDragging={(e)=>{console.log(e)}}
+            onDragEnd={(e)=>{console.log(e)}}
             path={[
               [116.405289, 39.904987],
               [113.964458, 40.54664],
@@ -157,12 +162,15 @@ export default Mount;
 
 ### 事件
 
+Polyline v1.4.15 和 v2.0.xx 版本都是支持 drag 相关事件的，虽然官网文档有的写的不全，但经实验都是可以的。
+<!--rehype:style=background: #fff3b7;-->
+
 [事件类型文档](https://github.com/uiwjs/react-amap/blob/268303d/src/types/overlay.d.ts#L249-L274)
 
 | 参数 | 说明 | 类型 |
 | ---- | ---- | ---- |
-| onHide | 隐藏 | (): void; |
-| onShow | 显示 | (): void; |
+| onHide | 隐藏 | (event: { type: string, target: any }): void; |
+| onShow | 显示 | (event: { type: string, target: any }): void; |
 | onMouseOut | 鼠标移出 | (event: MapsEvent): void; |
 | onRightClick | 鼠标右键单击事件 | (event: MapsEvent): void; |
 | onDblClick | 鼠标左键双击事件 | (event: MapsEvent): void; |
@@ -172,3 +180,7 @@ export default Mount;
 | onTouchStart | 触摸开始时触发事件，仅适用移动设备 | (event: MapsEvent): void; |
 | onMouseUp | 鼠标抬起 | (event: MapsEvent): void; |
 | onMouseDown | 鼠标按下 | (event: MapsEvent): void; |
+| onDragStart | 拖拽开始 | `(event: MapsEvent): void;` |
+| onDragging | 拖拽中 | `(event: MapsEvent): void;` |
+| onDragEnd | 拖拽结束 | `(event: MapsEvent): void;` |
+| onChange | 属性发生变化时 | `(event: { type: string, target: any }): void;` |

packages/polyline/src/usePolyline.tsx

@@ -30,6 +30,9 @@ export function usePolyline(props = {} as UsePolyline) {
     'onShow',
     'onMouseOut',
     'onChange',
+    'onDragStart',
+    'onDragging',
+    'onDragEnd',
     'onRightClick',
     'onDblClick',
     'onMouseDown',

packages/tile-layer/README.md

@@ -223,7 +223,8 @@ const Demo = () => {
   }
   const TiandituSatelliteOptions2={
     getTileUrl: `http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cva_w&tk=${TiandituKEY}&x=[x]&y=[y]&l=[z]`,
-    zIndex: 105
+    opacity:0.7,
+    zIndex: 101
   }
   const handleChangeTileLayer=(chgType,chgOptions)=>{
     if(chgType===type){
@@ -297,7 +298,7 @@ const Demo = () => {
 }
 
 const Mount = () => (
-  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
+  <APILoader  akay="a7a90e05a37d3f6bf76d4a9032fc9129">
     <Demo />
   </APILoader>
 );

packages/tile-layer/src/useTileLayer.tsx

@@ -29,13 +29,18 @@ export function useTileLayer(props = {} as UseTileLayer) {
         instance = new AMap.TileLayer(options);
       }
       if (!!instance) {
-        map.addLayer(instance);
+        // 暂不使用这个 API，这个不兼容 v1.4.xx
+        // map.addLayer(instance);
+        map.add(instance);
         props.onAdded && props.onAdded();
         setTileLayer(instance);
       }
       return () => {
         if (instance) {
-          map.removeLayer(instance);
+          // 暂不使用这个 API，这个不兼容 v1.4.xx
+          // map.removeLayer(instance);
+
+          map.remove(instance);
           setTileLayer(null as any);
           props.onRemoved && props.onRemoved();
         }