33fda633.32fcdd2e.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{124:function(e,t,n){"use strict";n.d(t,"a",(function(){return b}));var a=n(0),r=n.n(a),l=n(136),c=n(415);function b(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(c.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),c=n(410),b=n(134),i=n(123),o=(n(47),l.a.forwardRef((function(e,t){var n=e.hideControl,o=e.renderControl,p=void 0===o?function(){return null}:o,u=Object(r.useRef)(void 0);Object(r.useImperativeHandle)(t,(function(){return u.current}),[u.current]);var m=Object(r.useState)(14),s=m[0],d=m[1],O=Object(r.useState)([116.473778,39.990661]),j=O[0],h=O[1],v=Object(r.useCallback)((function(t){t.setFitView(null,!0),e.onMapComplete&&e.onMapComplete(t)}),[]),g=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:j,zoom:s,onZoomChange:Object(r.useCallback)((function(e){return d(e.getZoom())}),[]),onMapMove:Object(r.useCallback)((function(e){var t=e.getCenter();h([t.getLng(),t.getLat()])}),[])},e.mapOptions),N=Object.assign({width:"100%",height:"400px"},e.mapStyle),C=p();return l.a.createElement(b.a,null,(function(){return l.a.createElement("div",{className:"demo-view",style:{width:"100%"}},!n&&l.a.createElement(c.a,{className:"control",layout:"inline",size:"small",style:{padding:"10px 0px",position:"relative"}},C),l.a.createElement("div",{className:"map",style:N},l.a.createElement(i.a,Object(a.a)({ref:u},f,{onComplete:v,onClick:g}),e.children)))}))})));t.a=o},91:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return j})),n.d(t,"metadata",(function(){return h})),n.d(t,"rightToc",(function(){return v})),n.d(t,"default",(function(){return f}));var a=n(2),r=n(6),l=n(0),c=n.n(l),b=n(121),i=n(126),o=n(123),p=n(410),u=n(415);const m=[[116.37,39.91],[116.380298,39.907771,116.38,39.9],[116.385298,39.907771,116.4,39.9],[[116.392872,39.887391],[116.40772,39.909252],[116.41,39.89]],[116.423857,39.889498,116.422312,39.899639,116.425273,39.902273]];var s=()=>{const[e,t]=Object(l.useState)(m),[n,a]=Object(l.useState)(!1);return c.a.createElement(i.a,{renderControl:()=>c.a.createElement(c.a.Fragment,null,c.a.createElement(p.a.Item,{label:"\u5f00\u542f\u7f16\u8f91"},c.a.createElement(u.a,{checked:n,onChange:e=>a(e)})),c.a.createElement("div",null,JSON.stringify(e)))},c.a.createElement(o.c,{enabled:n,onChange:e=>{const n=function(e){if(!Array.isArray(e))return[];const t=function(e){const t=[];for(;Array.isArray(e);)t.push(e.length),e=e[0];return t}(e);if(1===t.length)return e.map(d);if(2===t.length)return e.map(d);if(3===t.length)return e.map((e=>e.map(d)));return[]}(e.getPath());t(n)}},c.a.createElement(o.b,{path:e,strokeColor:"#409EFF",strokeWeight:6,showDir:!0,dirColor:"#f00"})))};function d(e){return e?Array.isArray(e)?[e[0],e[1]]:[e.lng,e.lat]:[]}var O=n(124),j={title:"BezierCurve"},h={unversionedId:"references/overlays/line/bezier-curve",id:"references/overlays/line/bezier-curve",isDocsHomePage:!1,title:"BezierCurve",description:"\u7ee7\u627f\u81ea BaseLine",source:"@site/docs/references/overlays/line/bezier-curve.md",slug:"/references/overlays/line/bezier-curve",permalink:"/amap-react/docs/references/overlays/line/bezier-curve",version:"current",sidebar:"docs",previous:{title:"Polyline",permalink:"/amap-react/docs/references/overlays/line/polyline"},next:{title:"Circle",permalink:"/amap-react/docs/references/overlays/plane/circle"}},v=[{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:[]}],g={rightToc:v};function f(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(b.b)("wrapper",Object(a.a)({},g,n,{components:t,mdxType:"MDXLayout"}),Object(b.b)("p",null,"\u7ee7\u627f\u81ea ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"./base"}),"BaseLine")),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{}),"<BezierCurve path={[...]} />\n")),Object(b.b)(s,{mdxType:"ExampleBezierCurve"}),Object(b.b)("p",null,Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"#example"}),"Source Code")),Object(b.b)("h2",{id:"props"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"number[2][], number[2][][]")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"...\u7ee7\u627f\u7684\u5c5e\u6027")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(b.b)("h2",{id:"events"},"Events"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"...\u7ee7\u627f\u7684\u4e8b\u4ef6")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(b.b)("h1",{id:"beziercurveeditor"},"BezierCurveEditor"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{}),"<BezierCurveEditor enabled={enabled} onChange={target => {...}}>\n  <BezierCurve path={[...]} />\n</BezierCurveEditor>\n")),Object(b.b)("h2",{id:"props-1"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"enabled")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boolean")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(b.b)("h2",{id:"events-1"},"Events"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"change")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(b.b)("h2",{id:"example"},"Example"),Object(b.b)(O.a,{mdxType:"CodeBlock"},"import React from 'react';\n\nimport { useState } from 'react';\nimport DemoView from '../DemoView';\nimport { BezierCurve, BezierCurveEditor } from '@amap/amap-react';\nimport { Form, Switch } from 'antd';\n\nconst PATH = [\n  //\u6bcf\u4e2a\u5f27\u7ebf\u6bb5\u6709\u4e24\u79cd\u63cf\u8ff0\u65b9\u5f0f\n  [116.37, 39.91], //\u8d77\u70b9\n  //\u7b2c\u4e00\u6bb5\u5f27\u7ebf\n  [116.380298, 39.907771, 116.38, 39.9], //\u63a7\u5236\u70b9\uff0c\u9014\u7ecf\u70b9\n  //\u7b2c\u4e8c\u6bb5\u5f27\u7ebf\n  [116.385298, 39.907771, 116.4, 39.9], //\u63a7\u5236\u70b9\uff0c\u9014\u7ecf\u70b9//\u5f27\u7ebf\u6bb5\u6709\u4e24\u79cd\u63cf\u8ff0\u65b9\u5f0f1\n  //\u7b2c\u4e09\u6bb5\u5f27\u7ebf\n  [\n    //\u5f27\u7ebf\u6bb5\u6709\u4e24\u79cd\u63cf\u8ff0\u65b9\u5f0f2\n    [116.392872, 39.887391], //\u63a7\u5236\u70b9\n    [116.40772, 39.909252], //\u63a7\u5236\u70b9\n    [116.41, 39.89], //\u9014\u7ecf\u70b9\n  ],\n  //\u7b2c\u56db\u6bb5\u5f27\u7ebf\n  [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273],\n  //\u63a7\u5236\u70b9\uff0c\u63a7\u5236\u70b9\uff0c\u9014\u7ecf\u70b9\uff0c\u6bcf\u6bb5\u6700\u591a\u4e24\u4e2a\u63a7\u5236\u70b9\n];\n\nconst ExampleBezierCurve = () => {\n  const [path, setPath] = useState(PATH);\n  const [editable, setEditable] = useState(false);\n\n  const renderControl = () => {\n    return (\n      <>\n        <Form.Item label=\"\u5f00\u542f\u7f16\u8f91\">\n          <Switch checked={editable} onChange={(v) => setEditable(v)} />\n        </Form.Item>\n        <div>{JSON.stringify(path)}</div>\n      </>\n    );\n  };\n\n  return (\n    <DemoView renderControl={renderControl}>\n      <BezierCurveEditor\n        enabled={editable}\n        onChange={(curve) => {\n          const path = path2Array(curve.getPath());\n          setPath(path);\n        }}\n      >\n        <BezierCurve\n          path={path}\n          strokeColor=\"#409EFF\"\n          strokeWeight={6}\n          showDir\n          dirColor=\"#f00\"\n        />\n      </BezierCurveEditor>\n    </DemoView>\n  );\n};\n\nexport default ExampleBezierCurve;\n\nfunction path2Array(path) {\n  if (!Array.isArray(path)) return [];\n  const dims = arrayDims(path);\n  if (dims.length === 1) {\n    return path.map(lngLat2Array);\n  } else if (dims.length === 2) {\n    return path.map(lngLat2Array);\n  } else if (dims.length === 3) {\n    return path.map((subpath) => subpath.map(lngLat2Array));\n  }\n  return [];\n}\n\nfunction lngLat2Array(p) {\n  if (!p) return [];\n  if (Array.isArray(p)) return [p[0], p[1]];\n  return [p.lng, p.lat];\n}\n\nfunction arrayDims(arr) {\n  const dims = [];\n  while (Array.isArray(arr)) {\n    dims.push(arr.length);\n    arr = arr[0];\n  }\n  return dims;\n}\n"))}f.isMDXComponent=!0}}]);