1280181d.94757d48.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{124:function(e,t,a){"use strict";a.d(t,"a",(function(){return i}));var n=a(0),r=a.n(n),l=a(136),c=a(415);function i(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),i=a(134),b=a(123),o=(a(47),l.a.forwardRef((function(e,t){var a=e.hideControl,o=e.renderControl,m=void 0===o?function(){return null}:o,d=Object(r.useRef)(void 0);Object(r.useImperativeHandle)(t,(function(){return d.current}),[d.current]);var p=Object(r.useState)(14),s=p[0],O=p[1],u=Object(r.useState)([116.473778,39.990661]),j=u[0],f=u[1],y=Object(r.useCallback)((function(t){t.setFitView(null,!0),e.onMapComplete&&e.onMapComplete(t)}),[]),N=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:s,onZoomChange:Object(r.useCallback)((function(e){return O(e.getZoom())}),[]),onMapMove:Object(r.useCallback)((function(e){var t=e.getCenter();f([t.getLng(),t.getLat()])}),[])},e.mapOptions),g=Object.assign({width:"100%",height:"400px"},e.mapStyle),C=m();return l.a.createElement(i.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"}},C),l.a.createElement("div",{className:"map",style:g},l.a.createElement(b.a,Object(n.a)({ref:d},h,{onComplete:y,onClick:N}),e.children)))}))})));t.a=o},89:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return u})),a.d(t,"metadata",(function(){return j})),a.d(t,"rightToc",(function(){return f})),a.d(t,"default",(function(){return N}));var n=a(2),r=a(6),l=a(0),c=a.n(l),i=a(121),b=a(126),o=a(410),m=a(415),d=a(412),p=a(123);var s=()=>{const[e,t]=Object(l.useState)(!0),[a,n]=Object(l.useState)(!1),[r,i]=Object(l.useState)(!1),[s,O]=Object(l.useState)(.5);return c.a.createElement(b.a,{renderControl:()=>c.a.createElement(c.a.Fragment,null,c.a.createElement(o.a.Item,{label:"Traffic"},c.a.createElement(m.a,{checked:e,onChange:e=>t(e)})),c.a.createElement(o.a.Item,{label:"RoadNet"},c.a.createElement(m.a,{checked:a,onChange:e=>n(e)})),c.a.createElement(o.a.Item,{label:"Satellite"},c.a.createElement(m.a,{checked:r,onChange:e=>i(e)})),c.a.createElement(o.a.Item,{label:"opacity"},c.a.createElement(d.a,{min:0,max:1,step:.1,value:s,onChange:e=>O(e),style:{width:"150px"}})))},e&&c.a.createElement(p.H,{opacity:s}),a&&c.a.createElement(p.B,{opacity:s}),r&&c.a.createElement(p.C,{opacity:s}))},O=a(124),u={title:"\u5b98\u65b9\u56fe\u5c42"},j={unversionedId:"references/layers/tile/official",id:"references/layers/tile/official",isDocsHomePage:!1,title:"\u5b98\u65b9\u56fe\u5c42",description:"`",source:"@site/docs/references/layers/tile/official.md",slug:"/references/layers/tile/official",permalink:"/amap-react/docs/references/layers/tile/official",version:"current",sidebar:"docs",previous:{title:"Ellipse",permalink:"/amap-react/docs/references/overlays/plane/ellipse"},next:{title:"TileLayer",permalink:"/amap-react/docs/references/layers/tile/tile-layer"}},f=[{value:"Props",id:"props",children:[]},{value:"Events",id:"events",children:[]},{value:"Example",id:"example",children:[]}],y={rightToc:f};function N(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},y,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{}),"<SatelliteLayer />\n<RoadNetLayer />\n<TrafficLayer />\n")),Object(i.b)(s,{mdxType:"ExampleOfficialLayers"}),Object(i.b)("p",null,Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"#example"}),"Source Code")),Object(i.b)("h2",{id:"props"},"Props"),Object(i.b)("table",null,Object(i.b)("thead",{parentName:"table"},Object(i.b)("tr",{parentName:"thead"},Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(i.b)("tbody",{parentName:"table"},Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"visible")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"boolean")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"zIndex")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"number")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"opacity")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"number")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"zooms")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"number[2]")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"autoRefresh")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"boolean")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"\u4ec5\u9650 ",Object(i.b)("inlineCode",{parentName:"td"},"TrafficLayer"))),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"interval")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(i.b)("inlineCode",{parentName:"td"},"number")),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"\u4ec5\u9650 ",Object(i.b)("inlineCode",{parentName:"td"},"TrafficLayer"))))),Object(i.b)("h2",{id:"events"},"Events"),Object(i.b)("table",null,Object(i.b)("thead",{parentName:"table"},Object(i.b)("tr",{parentName:"thead"},Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(i.b)("tbody",{parentName:"table"},Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}))))),Object(i.b)("h2",{id:"example"},"Example"),Object(i.b)(O.a,{mdxType:"CodeBlock"},"import React, { useState } from 'react';\nimport DemoView from '../DemoView';\nimport { Form, Switch, Slider } from 'antd';\nimport { TrafficLayer, RoadNetLayer, SatelliteLayer } from '@amap/amap-react';\n\nconst ExampleOfficialLayers = () => {\n  const [traffic, setTraffic] = useState(true);\n  const [roadnet, setRoadnet] = useState(false);\n  const [satellite, setSatellite] = useState(false);\n  const [opacity, setOpacity] = useState(0.5);\n\n  const renderControl = () => {\n    return (\n      <>\n        <Form.Item label=\"Traffic\">\n          <Switch\n            checked={traffic}\n            onChange={(checked) => setTraffic(checked)}\n          />\n        </Form.Item>\n        <Form.Item label=\"RoadNet\">\n          <Switch\n            checked={roadnet}\n            onChange={(checked) => setRoadnet(checked)}\n          />\n        </Form.Item>\n        <Form.Item label=\"Satellite\">\n          <Switch\n            checked={satellite}\n            onChange={(checked) => setSatellite(checked)}\n          />\n        </Form.Item>\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      {traffic && <TrafficLayer opacity={opacity} />}\n      {roadnet && <RoadNetLayer opacity={opacity} />}\n      {satellite && <SatelliteLayer opacity={opacity} />}\n    </DemoView>\n  );\n};\n\nexport default ExampleOfficialLayers;\n"))}N.isMDXComponent=!0}}]);