366379bb.4ecaed77.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{124:function(e,t,n){"use strict";n.d(t,"a",(function(){return o}));var a=n(0),r=n.n(a),c=n(136),l=n(415);function o(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(l.a,{checked:t,onChange:e=>n(e)})),t&&r.a.createElement(c.a,null,e.children))}},126:function(e,t,n){"use strict";var a=n(2),r=n(0),c=n.n(r),l=n(410),o=n(134),i=n(123),s=(n(47),c.a.forwardRef((function(e,t){var n=e.hideControl,s=e.renderControl,u=void 0===s?function(){return null}:s,b=Object(r.useRef)(void 0);Object(r.useImperativeHandle)(t,(function(){return b.current}),[b.current]);var m=Object(r.useState)(14),p=m[0],d=m[1],f=Object(r.useState)([116.473778,39.990661]),O=f[0],j=f[1],v=Object(r.useCallback)((function(t){t.setFitView(null,!0),e.onMapComplete&&e.onMapComplete(t)}),[]),y=Object(r.useCallback)((function(t,n){e.onMapClick&&e.onMapClick(t,n)}),[]),h=Object.assign({viewMode:"3D",mapStyle:"amap://styles/whitesmoke",isHotspot:!1,showIndoorMap:!1,center:O,zoom:p,onZoomChange:Object(r.useCallback)((function(e){return d(e.getZoom())}),[]),onMapMove:Object(r.useCallback)((function(e){var t=e.getCenter();j([t.getLng(),t.getLat()])}),[])},e.mapOptions),g=Object.assign({width:"100%",height:"400px"},e.mapStyle),x=u();return c.a.createElement(o.a,null,(function(){return c.a.createElement("div",{className:"demo-view",style:{width:"100%"}},!n&&c.a.createElement(l.a,{className:"control",layout:"inline",size:"small",style:{padding:"10px 0px",position:"relative"}},x),c.a.createElement("div",{className:"map",style:g},c.a.createElement(i.a,Object(a.a)({ref:b},h,{onComplete:v,onClick:y}),e.children)))}))})));t.a=s},92:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return f})),n.d(t,"metadata",(function(){return O})),n.d(t,"rightToc",(function(){return j})),n.d(t,"default",(function(){return y}));var a=n(2),r=n(6),c=n(0),l=n.n(c),o=n(121),i=n(126),s=n(410),u=n(412),b=n(123);var m=function(){var e=Object(c.useState)(.5),t=e[0],n=e[1],a=Object(c.useMemo)((function(){return document.createElement("canvas")}),[]),r=Object(c.useRef)(0),o=Object(c.useRef)(null);Object(c.useEffect)((function(){a.width=200,a.height=200;var e=a.getContext("2d");e.fillStyle="rgb(0, 100, 255)",e.strokeStyle="white",e.globalAlpha=1,e.lineWidth=2,e.font="30px monospace",e.textAlign="center",e.textBaseline="middle"}),[]),function(e,t){void 0===t&&(t=!0);var n=Object(c.useRef)(null),a=Object(c.useRef)(!1),r=Object(c.useRef)(e);r.current=e;var l=Object(c.useCallback)((function(e){a.current&&(r.current(e),n.current=requestAnimationFrame(l))}),[]),o=Object(c.useMemo)((function(){return{stop:function(){a.current&&(a.current=!1,n.current&&cancelAnimationFrame(n.current))},tick:function(){a.current||(a.current=!0,n.current=requestAnimationFrame(l))},isActive:function(){return a.current}}}),[]);Object(c.useEffect)((function(){return t&&o.tick(),o.stop}),[])}((function(){var e=o.current;if(e){var t=a.getContext("2d");t.clearRect(0,0,200,200),t.globalAlpha=(t.globalAlpha-.01+1)%1,r.current=(r.current+1)%100,t.beginPath(),t.arc(100,100,r.current,0,2*Math.PI),t.fill(),t.stroke(),t.fillText(r.current,100,70),e.reFresh()}}));return l.a.createElement(i.a,{renderControl:function(){return l.a.createElement(l.a.Fragment,null,l.a.createElement(s.a.Item,{label:"opacity"},l.a.createElement(u.a,{min:0,max:1,step:.1,value:t,onChange:function(e){return n(e)},style:{width:"150px"}})))},mapOptions:{center:[116.335183,39.941735],zoom:15}},l.a.createElement(b.d,{ref:o,opacity:t,canvas:a,bounds:[[116.328911,39.937229],[116.342659,39.946275]]}))},p=n(134),d=n(124),f={title:"CanvasLayer"},O={unversionedId:"references/layers/custom/canvas-layer",id:"references/layers/custom/canvas-layer",isDocsHomePage:!1,title:"CanvasLayer",description:"\u7ee7\u627f\u81ea BaseCustomLayer",source:"@site/docs/references/layers/custom/canvas-layer.md",slug:"/references/layers/custom/canvas-layer",permalink:"/amap-react/docs/references/layers/custom/canvas-layer",version:"current",sidebar:"docs",previous:{title:"ImageLayer",permalink:"/amap-react/docs/references/layers/custom/image-layer"},next:{title:"CustomLayer",permalink:"/amap-react/docs/references/layers/custom/custom-layer"}},j=[{value:"Props",id:"props",children:[]},{value:"Events",id:"events",children:[]},{value:"Example",id:"example",children:[]}],v={rightToc:j};function y(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},v,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"\u7ee7\u627f\u81ea ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"./base-custom-layer"}),"BaseCustomLayer")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"<CanvasLayer ref={canvasLayerRef} canvas={...} bounds={[...]}  />\n\nfunction draw() {\n  // \u4f60\u9700\u8981\u81ea\u5df1\u51b3\u5b9a canvas \u4ec0\u4e48\u65f6\u5019\u91cd\u7ed8\n  // \u5e76\u4e14\u8c03\u7528 canvasLayerRef.reFresh() \u66f4\u65b0\u56fe\u5c42\n}\n")),Object(o.b)(p.a,{mdxType:"BrowserOnly"},(function(){return Object(o.b)(m,{mdxType:"ExampleCanvasLayer"})})),Object(o.b)("p",null,Object(o.b)("a",Object(a.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(a.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"canvas")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"HTMLCanvasElement")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"bounds")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"number[2][2]")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"...\u7ee7\u627f\u7684\u5c5e\u6027")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(o.b)("td",Object(a.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(a.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(o.b)("h2",{id:"example"},"Example"),Object(o.b)(d.a,{mdxType:"CodeBlock"},"import React, {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  useEffect,\n} from 'react';\nimport DemoView from '../DemoView';\nimport { Form, Slider } from 'antd';\nimport { CanvasLayer } from '@amap/amap-react';\n\nfunction useRafLoop(callback, initiallyActive = true) {\n  const raf = useRef(null);\n  const $activity = useRef(false);\n  const $callback = useRef(callback);\n  $callback.current = callback;\n\n  const step = useCallback((time) => {\n    if ($activity.current) {\n      $callback.current(time);\n      raf.current = requestAnimationFrame(step);\n    }\n  }, []);\n\n  const result = useMemo(\n    () => ({\n      stop() {\n        // stop\n        if ($activity.current) {\n          $activity.current = false;\n          raf.current && cancelAnimationFrame(raf.current);\n        }\n      },\n      tick() {\n        // start\n        if (!$activity.current) {\n          $activity.current = true;\n          raf.current = requestAnimationFrame(step);\n        }\n      },\n      isActive() {\n        return $activity.current; // isActive\n      },\n    }),\n    []\n  );\n\n  useEffect(() => {\n    if (initiallyActive) {\n      result.tick();\n    }\n\n    return result.stop;\n  }, []);\n}\n\nconst ExampleCanvasLayer = () => {\n  const [opacity, setOpacity] = useState(0.5);\n  const canvas = useMemo(() => document.createElement('canvas'), []);\n  const $radius = useRef(0);\n  const $layer = useRef(null);\n\n  useEffect(() => {\n    canvas.width = 200;\n    canvas.height = 200;\n\n    const ctx = canvas.getContext('2d');\n    ctx.fillStyle = 'rgb(0, 100, 255)';\n    ctx.strokeStyle = 'white';\n    ctx.globalAlpha = 1;\n    ctx.lineWidth = 2;\n    ctx.font = '30px monospace';\n    ctx.textAlign = 'center';\n    ctx.textBaseline = 'middle';\n  }, []);\n\n  useRafLoop(() => {\n    const layer = $layer.current;\n    if (!layer) return;\n\n    const ctx = canvas.getContext('2d');\n    ctx.clearRect(0, 0, 200, 200);\n    ctx.globalAlpha = (ctx.globalAlpha - 0.01 + 1) % 1;\n    $radius.current = ($radius.current + 1) % 100;\n\n    ctx.beginPath();\n    ctx.arc(100, 100, $radius.current, 0, 2 * Math.PI);\n    ctx.fill();\n    ctx.stroke();\n\n    ctx.fillText($radius.current, 100, 70);\n\n    layer.reFresh();\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\n      renderControl={renderControl}\n      mapOptions={{\n        center: [116.335183, 39.941735],\n        zoom: 15,\n      }}\n    >\n      <CanvasLayer\n        ref={$layer}\n        opacity={opacity}\n        canvas={canvas}\n        bounds={[\n          [116.328911, 39.937229],\n          [116.342659, 39.946275],\n        ]}\n      />\n    </DemoView>\n  );\n};\n\nexport default ExampleCanvasLayer;\n"))}y.isMDXComponent=!0}}]);