-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path7f3ceada.1d56a23e.js
1 lines (1 loc) · 10.8 KB
/
7f3ceada.1d56a23e.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{124:function(e,t,n){"use strict";n.d(t,"a",(function(){return c}));var a=n(0),r=n.n(a),l=n(136),b=n(415);function c(e){const[t,n]=Object(a.useState)(!1);return r.a.createElement(r.a.Fragment,null,r.a.createElement("div",{style:{marginBottom:4}},r.a.createElement("span",null,"\u67e5\u770b\u6e90\u4ee3\u7801\uff1a"),r.a.createElement(b.a,{checked:t,onChange:e=>n(e)})),t&&r.a.createElement(l.a,null,e.children))}},126:function(e,t,n){"use strict";var a=n(2),r=n(0),l=n.n(r),b=n(410),c=n(134),o=n(123),s=(n(47),l.a.forwardRef((function(e,t){var n=e.hideControl,s=e.renderControl,d=void 0===s?function(){return null}:s,i=Object(r.useRef)(void 0);Object(r.useImperativeHandle)(t,(function(){return i.current}),[i.current]);var u=Object(r.useState)(14),m=u[0],p=u[1],g=Object(r.useState)([116.473778,39.990661]),O=g[0],j=g[1],h=Object(r.useCallback)((function(t){t.setFitView(null,!0),e.onMapComplete&&e.onMapComplete(t)}),[]),N=Object(r.useCallback)((function(t,n){e.onMapClick&&e.onMapClick(t,n)}),[]),f=Object.assign({viewMode:"3D",mapStyle:"amap://styles/whitesmoke",isHotspot:!1,showIndoorMap:!1,center:O,zoom:m,onZoomChange:Object(r.useCallback)((function(e){return p(e.getZoom())}),[]),onMapMove:Object(r.useCallback)((function(e){var t=e.getCenter();j([t.getLng(),t.getLat()])}),[])},e.mapOptions),v=Object.assign({width:"100%",height:"400px"},e.mapStyle),y=d();return l.a.createElement(c.a,null,(function(){return l.a.createElement("div",{className:"demo-view",style:{width:"100%"}},!n&&l.a.createElement(b.a,{className:"control",layout:"inline",size:"small",style:{padding:"10px 0px",position:"relative"}},y),l.a.createElement("div",{className:"map",style:v},l.a.createElement(o.a,Object(a.a)({ref:i},f,{onComplete:h,onClick:N}),e.children)))}))})));t.a=s},98:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return g})),n.d(t,"metadata",(function(){return O})),n.d(t,"rightToc",(function(){return j})),n.d(t,"default",(function(){return N}));var a=n(2),r=n(6),l=n(0),b=n.n(l),c=n(121),o=n(126),s=n(123),d=n(410),i=n(231),u=n(415),m=function(){var e=Object(l.useState)([[116.464411,39.984033],[116.494619,40.00829]]),t=e[0],n=e[1],a=Object(l.useState)(!1),r=a[0],c=a[1],m=Object(l.useState)(!1),p=m[0],g=m[1];return b.a.createElement(o.a,{renderControl:function(){return b.a.createElement(b.a.Fragment,null,b.a.createElement(d.a.Item,{label:"\u897f\u5357"},b.a.createElement(i.a,{readOnly:!0,value:t[0].join(", "),style:{width:"130px"}})),b.a.createElement(d.a.Item,{label:"\u4e1c\u5317"},b.a.createElement(i.a,{readOnly:!0,value:t[1].join(", "),style:{width:"130px"}})),b.a.createElement(d.a.Item,{label:"\u5f00\u542f\u7f16\u8f91"},b.a.createElement(u.a,{checked:r,onChange:function(e){return c(e)}})),b.a.createElement(d.a.Item,{label:"draggable"},b.a.createElement(u.a,{checked:p,onChange:function(e){return g(e)}})))}},b.a.createElement(s.A,{enabled:r,onChange:function(e){var t=e.getBounds(),a=t.getSouthWest(),r=t.getNorthEast();n([[a.getLng(),a.getLat()],[r.getLng(),r.getLat()]])}},b.a.createElement(s.z,{bounds:t,fillColor:"#409EFF",strokeColor:"#000A58",fillOpacity:.5,cursor:p?"pointer":"default",draggable:p,onDragging:function(e){var t=function(e){if(Array.isArray(e))return e;if(e.southWest)return[[e.southWest.lng,e.southWest.lat],[e.northEast.lng,e.northEast.lat]];return[[e.southwest.lng,e.southwest.lat],[e.northeast.lng,e.northeast.lat]]}(e.getBounds());n(t)}})))};var p=n(124),g={title:"Rectangle"},O={unversionedId:"references/overlays/plane/rectangle",id:"references/overlays/plane/rectangle",isDocsHomePage:!1,title:"Rectangle",description:"\u7ee7\u627f\u81ea BasePlane",source:"@site/docs/references/overlays/plane/rectangle.md",slug:"/references/overlays/plane/rectangle",permalink:"/amap-react/docs/references/overlays/plane/rectangle",version:"current",sidebar:"docs",previous:{title:"Polygon",permalink:"/amap-react/docs/references/overlays/plane/polygon"},next:{title:"Ellipse",permalink:"/amap-react/docs/references/overlays/plane/ellipse"}},j=[{value:"Props",id:"props",children:[]},{value:"Events",id:"events",children:[]},{value:"Props",id:"props-1",children:[]},{value:"Events",id:"events-1",children:[]},{value:"Example",id:"example",children:[]}],h={rightToc:j};function N(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(c.b)("wrapper",Object(a.a)({},h,n,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"\u7ee7\u627f\u81ea ",Object(c.b)("a",Object(a.a)({parentName:"p"},{href:"./base"}),"BasePlane")),Object(c.b)("pre",null,Object(c.b)("code",Object(a.a)({parentName:"pre"},{}),"<Rectangle\n bounds={[\n [swx, swy],\n [nex, ney],\n ]}\n/>\n")),Object(c.b)(m,{mdxType:"ExampleRectangle"}),Object(c.b)("p",null,Object(c.b)("a",Object(a.a)({parentName:"p"},{href:"#example"}),"Source Code")),Object(c.b)("h2",{id:"props"},"Props"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"bounds")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number[2][2]")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"...\u7ee7\u627f\u7684\u5c5e\u6027")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(c.b)("h2",{id:"events"},"Events"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"...\u7ee7\u627f\u7684\u4e8b\u4ef6")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(c.b)("h1",{id:"rectangleeditor"},"RectangleEditor"),Object(c.b)("pre",null,Object(c.b)("code",Object(a.a)({parentName:"pre"},{}),"<RectangleEditor enabled={enablld} onChange={target => {...}} opts={{ ... }}>\n <Rectangle bounds={[...]} />\n</RectangleEditor>\n")),Object(c.b)("h2",{id:"props-1"},"Props"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"enabled")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"boolean")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"opts")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"object")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"\u53ef\u9009")))),Object(c.b)("h2",{id:"events-1"},"Events"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(c.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"change")),Object(c.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(c.b)("h2",{id:"example"},"Example"),Object(c.b)(p.a,{mdxType:"CodeBlock"},"import React, { useState } from 'react';\nimport DemoView from '../DemoView';\nimport { Rectangle, RectangleEditor } from '@amap/amap-react';\nimport { Form, Input, Switch } from 'antd';\n\nconst ExampleRectangle = () => {\n const [bounds, setBounds] = useState([\n [116.464411, 39.984033],\n [116.494619, 40.00829],\n ]);\n const [editable, setEditable] = useState(false);\n const [draggable, setDraggable] = useState(false);\n\n const renderControl = () => {\n return (\n <>\n <Form.Item label=\"\u897f\u5357\">\n <Input\n readOnly\n value={bounds[0].join(', ')}\n style={{ width: '130px' }}\n />\n </Form.Item>\n <Form.Item label=\"\u4e1c\u5317\">\n <Input\n readOnly\n value={bounds[1].join(', ')}\n style={{ width: '130px' }}\n />\n </Form.Item>\n <Form.Item label=\"\u5f00\u542f\u7f16\u8f91\">\n <Switch checked={editable} onChange={(v) => setEditable(v)} />\n </Form.Item>\n <Form.Item label=\"draggable\">\n <Switch checked={draggable} onChange={(v) => setDraggable(v)} />\n </Form.Item>\n </>\n );\n };\n\n return (\n <DemoView renderControl={renderControl}>\n <RectangleEditor\n enabled={editable}\n onChange={(rect) => {\n const b = rect.getBounds();\n const sw = b.getSouthWest();\n const ne = b.getNorthEast();\n\n setBounds([\n [sw.getLng(), sw.getLat()],\n [ne.getLng(), ne.getLat()],\n ]);\n }}\n >\n <Rectangle\n bounds={bounds}\n fillColor=\"#409EFF\"\n strokeColor=\"#000A58\"\n fillOpacity={0.5}\n cursor={draggable ? 'pointer' : 'default'}\n draggable={draggable}\n onDragging={(rect) => {\n const bounds = bounds2Array(rect.getBounds());\n setBounds(bounds);\n }}\n />\n </RectangleEditor>\n </DemoView>\n );\n};\n\nexport default ExampleRectangle;\n\nexport function bounds2Array(bounds) {\n if (Array.isArray(bounds)) return bounds;\n if (bounds.southWest) {\n return [\n [bounds.southWest.lng, bounds.southWest.lat],\n [bounds.northEast.lng, bounds.northEast.lat],\n ];\n }\n return [\n [bounds.southwest.lng, bounds.southwest.lat],\n [bounds.northeast.lng, bounds.northeast.lat],\n ];\n}\n"))}N.isMDXComponent=!0}}]);