-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patha4f83f6b.591ed5d0.js
1 lines (1 loc) · 6.49 KB
/
a4f83f6b.591ed5d0.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{102:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return d})),a.d(t,"metadata",(function(){return O})),a.d(t,"rightToc",(function(){return j})),a.d(t,"default",(function(){return f}));var n=a(2),r=a(6),l=a(0),c=a.n(l),o=a(121),i=a(126),b=a(410),s=a(412),m=a(123);var p=()=>{const[e,t]=Object(l.useState)(.5);return c.a.createElement(i.a,{renderControl:()=>c.a.createElement(c.a.Fragment,null,c.a.createElement(b.a.Item,{label:"opacity"},c.a.createElement(s.a,{min:0,max:1,step:.1,value:e,onChange:e=>t(e),style:{width:"150px"}})))},c.a.createElement(m.m,{createTile:(e,t,a,n,r)=>{const l=document.createElement("canvas");l.width=l.height=512;const c=l.getContext("2d");c.font="40px Monospace",c.fillStyle="#ff0000",c.strokeStyle="#FF0000",c.strokeRect(0,0,512,512),c.fillText("("+[e,t,a].join(",")+")",10,40),n(l)},opacity:e}))},u=a(124),d={title:"FlexibleLayer"},O={unversionedId:"references/layers/tile/flexible-layer",id:"references/layers/tile/flexible-layer",isDocsHomePage:!1,title:"FlexibleLayer",description:"\u7ee7\u627f\u81ea BaseTileLayer",source:"@site/docs/references/layers/tile/flexible-layer.md",slug:"/references/layers/tile/flexible-layer",permalink:"/amap-react/docs/references/layers/tile/flexible-layer",version:"current",sidebar:"docs",previous:{title:"TileLayer",permalink:"/amap-react/docs/references/layers/tile/tile-layer"},next:{title:"ImageLayer",permalink:"/amap-react/docs/references/layers/custom/image-layer"}},j=[{value:"Props",id:"props",children:[]},{value:"Events",id:"events",children:[]},{value:"Example",id:"example",children:[]}],y={rightToc:j};function f(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},y,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"\u7ee7\u627f\u81ea ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"./base-tile-layer"}),"BaseTileLayer")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{}),"<FlexibleLayer\n createTile={(x, y, z, success, fail) => {\n // ...\n }}\n/>\n")),Object(o.b)(p,{mdxType:"ExampleFlexibleLayer"}),Object(o.b)("p",null,Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"#example"}),"Source Code")),Object(o.b)("h2",{id:"props"},"Props"),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(o.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(o.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"...\u7ee7\u627f\u7684\u5c5e\u6027")),Object(o.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(o.b)("td",Object(n.a)({parentName:"tr"},{align:null}))))),Object(o.b)("h2",{id:"events"},"Events"),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(o.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(o.b)("td",Object(n.a)({parentName:"tr"},{align:null}))))),Object(o.b)("h2",{id:"example"},"Example"),Object(o.b)(u.a,{mdxType:"CodeBlock"},"import React, { useState } from 'react';\nimport DemoView from '../DemoView';\nimport { Form, Slider } from 'antd';\nimport { FlexibleLayer } from '@amap/amap-react';\n\nconst ExampleFlexibleLayer = () => {\n const [opacity, setOpacity] = useState(0.5);\n\n const createTile = (x, y, z, success, fail) => {\n const c = document.createElement('canvas');\n c.width = c.height = 512;\n\n const ctx = c.getContext('2d');\n\n ctx.font = '40px Monospace';\n ctx.fillStyle = '#ff0000';\n ctx.strokeStyle = '#FF0000';\n ctx.strokeRect(0, 0, 512, 512);\n ctx.fillText('(' + [x, y, z].join(',') + ')', 10, 40);\n\n // \u901a\u77e5API\u5207\u7247\u521b\u5efa\u5b8c\u6210\n success(c);\n };\n\n const renderControl = () => {\n return (\n <>\n <Form.Item label=\"opacity\">\n <Slider\n min={0}\n max={1}\n step={0.1}\n value={opacity}\n onChange={(v) => setOpacity(v)}\n style={{ width: '150px' }}\n />\n </Form.Item>\n </>\n );\n };\n\n return (\n <DemoView renderControl={renderControl}>\n <FlexibleLayer createTile={createTile} opacity={opacity} />\n </DemoView>\n );\n};\n\nexport default ExampleFlexibleLayer;\n"))}f.isMDXComponent=!0},124:function(e,t,a){"use strict";a.d(t,"a",(function(){return o}));var n=a(0),r=a.n(n),l=a(136),c=a(415);function o(e){const[t,a]=Object(n.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=>a(e)})),t&&r.a.createElement(l.a,null,e.children))}},126:function(e,t,a){"use strict";var n=a(2),r=a(0),l=a.n(r),c=a(410),o=a(134),i=a(123),b=(a(47),l.a.forwardRef((function(e,t){var a=e.hideControl,b=e.renderControl,s=void 0===b?function(){return null}:b,m=Object(r.useRef)(void 0);Object(r.useImperativeHandle)(t,(function(){return m.current}),[m.current]);var p=Object(r.useState)(14),u=p[0],d=p[1],O=Object(r.useState)([116.473778,39.990661]),j=O[0],y=O[1],f=Object(r.useCallback)((function(t){t.setFitView(null,!0),e.onMapComplete&&e.onMapComplete(t)}),[]),x=Object(r.useCallback)((function(t,a){e.onMapClick&&e.onMapClick(t,a)}),[]),h=Object.assign({viewMode:"3D",mapStyle:"amap://styles/whitesmoke",isHotspot:!1,showIndoorMap:!1,center:j,zoom:u,onZoomChange:Object(r.useCallback)((function(e){return d(e.getZoom())}),[]),onMapMove:Object(r.useCallback)((function(e){var t=e.getCenter();y([t.getLng(),t.getLat()])}),[])},e.mapOptions),g=Object.assign({width:"100%",height:"400px"},e.mapStyle),v=s();return l.a.createElement(o.a,null,(function(){return l.a.createElement("div",{className:"demo-view",style:{width:"100%"}},!a&&l.a.createElement(c.a,{className:"control",layout:"inline",size:"small",style:{padding:"10px 0px",position:"relative"}},v),l.a.createElement("div",{className:"map",style:g},l.a.createElement(i.a,Object(n.a)({ref:m},h,{onComplete:f,onClick:x}),e.children)))}))})));t.a=b}}]);