b3e5f2e4.cd420243.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{103:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return O})),n.d(t,"metadata",(function(){return y})),n.d(t,"rightToc",(function(){return j})),n.d(t,"default",(function(){return h}));var a=n(2),r=n(6),o=n(0),c=n.n(o),l=n(121),i=n(126),s=n(123),p=n(410),b=n(412);var m=()=>{const[e,t]=Object(o.useState)(.8);return c.a.createElement(i.a,{renderControl:()=>c.a.createElement(c.a.Fragment,null,c.a.createElement(p.a.Item,{label:"opacity"},c.a.createElement(b.a,{min:0,max:1,step:.1,value:e,onChange:e=>t(e),style:{width:"100px"}}))),mapOptions:{showIndoorMap:!1,isHotspot:!1,center:[100,36],zoom:3}},c.a.createElement(s.I,{opacity:e,styles:{"nation-stroke":e=>"Nation_Border_China"===e.type?"red":"white","coastline-stroke":[.8,.63,1,1],fill:e=>function(e,t){if(!e)return"rgb(200, 200, 240)";if(!d[e]){const t=2*e.charCodeAt(0),n=t,a=255;d[e]="rgb("+t+","+n+","+a+")"}return d[e]}(e.SOC)}}))};const d={};var u=n(124),O={title:"WorldLayer"},y={unversionedId:"references/layers/district/world",id:"references/layers/district/world",isDocsHomePage:!1,title:"WorldLayer",description:"\u7ee7\u627f\u81ea BaseDistrictLayer",source:"@site/docs/references/layers/district/world.md",slug:"/references/layers/district/world",permalink:"/amap-react/docs/references/layers/district/world",version:"current",sidebar:"docs",previous:{title:"CustomLayer",permalink:"/amap-react/docs/references/layers/custom/custom-layer"},next:{title:"CountryLayer",permalink:"/amap-react/docs/references/layers/district/country"}},j=[{value:"Props",id:"props",children:[]},{value:"Events",id:"events",children:[]},{value:"Example",id:"example",children:[]}],f={rightToc:j};function h(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(l.b)("wrapper",Object(a.a)({},f,n,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,"\u7ee7\u627f\u81ea ",Object(l.b)("a",Object(a.a)({parentName:"p"},{href:"./base"}),"BaseDistrictLayer")),Object(l.b)("pre",null,Object(l.b)("code",Object(a.a)({parentName:"pre"},{}),"<WorldLayer styles={styles} />\n")),Object(l.b)(m,{mdxType:"ExampleWorldLayer"}),Object(l.b)("p",null,Object(l.b)("a",Object(a.a)({parentName:"p"},{href:"#example"}),"Source Code")),Object(l.b)("h2",{id:"props"},"Props"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5c5e\u6027\u540d"),Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u7c7b\u578b"),Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(l.b)("inlineCode",{parentName:"td"},"...\u7ee7\u627f\u7684\u5c5e\u6027")),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(l.b)("h2",{id:"events"},"Events"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u4e8b\u4ef6\u540d"),Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"\u5907\u6ce8"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(l.b)("h2",{id:"example"},"Example"),Object(l.b)(u.a,{mdxType:"CodeBlock"},"import React, { useState } from 'react';\nimport DemoView from '../DemoView';\nimport { WorldLayer } from '@amap/amap-react';\nimport { Form, Slider } from 'antd';\n\nconst ExampleWorldLayer = () => {\n  const [opacity, setOpacity] = useState(0.8);\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: '100px' }}\n          />\n        </Form.Item>\n      </>\n    );\n  };\n\n  return (\n    <DemoView\n      renderControl={renderControl}\n      mapOptions={{\n        showIndoorMap: false,\n        isHotspot: false,\n        center: [100, 36],\n        zoom: 3,\n      }}\n    >\n      <WorldLayer\n        opacity={opacity}\n        styles={{\n          // \u989c\u8272\u683c\u5f0f: #RRGGBB\u3001rgba()\u3001rgb()\u3001[r,g,b,a]\n          'nation-stroke': (props) => {\n            //props:{type:Nation_Border_China/Nation_Border_Foreign}\n            if (props.type === 'Nation_Border_China') {\n              return 'red';\n            } else {\n              return 'white';\n            }\n          },\n          'coastline-stroke': [0.8, 0.63, 1, 1],\n          fill: (props) => {\n            return getColor(props.SOC, 'world');\n          },\n        }}\n      />\n    </DemoView>\n  );\n};\n\nexport default ExampleWorldLayer;\n\nconst colors = {};\n\nfunction getColor(key, type) {\n  if (!key) return 'rgb(200, 200, 240)';\n  if (!colors[key]) {\n    const R = key.charCodeAt(0) * 2;\n    const G = R; // key.charCodeAt(1) * 2\n    const B = 255;\n    colors[key] = 'rgb(' + R + ',' + G + ',' + B + ')';\n  }\n\n  return colors[key];\n}\n"))}h.isMDXComponent=!0},124:function(e,t,n){"use strict";n.d(t,"a",(function(){return l}));var a=n(0),r=n.n(a),o=n(136),c=n(415);function l(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(o.a,null,e.children))}},126:function(e,t,n){"use strict";var a=n(2),r=n(0),o=n.n(r),c=n(410),l=n(134),i=n(123),s=(n(47),o.a.forwardRef((function(e,t){var n=e.hideControl,s=e.renderControl,p=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),d=m[0],u=m[1],O=Object(r.useState)([116.473778,39.990661]),y=O[0],j=O[1],f=Object(r.useCallback)((function(t){t.setFitView(null,!0),e.onMapComplete&&e.onMapComplete(t)}),[]),h=Object(r.useCallback)((function(t,n){e.onMapClick&&e.onMapClick(t,n)}),[]),g=Object.assign({viewMode:"3D",mapStyle:"amap://styles/whitesmoke",isHotspot:!1,showIndoorMap:!1,center:y,zoom:d,onZoomChange:Object(r.useCallback)((function(e){return u(e.getZoom())}),[]),onMapMove:Object(r.useCallback)((function(e){var t=e.getCenter();j([t.getLng(),t.getLat()])}),[])},e.mapOptions),C=Object.assign({width:"100%",height:"400px"},e.mapStyle),v=p();return o.a.createElement(l.a,null,(function(){return o.a.createElement("div",{className:"demo-view",style:{width:"100%"}},!n&&o.a.createElement(c.a,{className:"control",layout:"inline",size:"small",style:{padding:"10px 0px",position:"relative"}},v),o.a.createElement("div",{className:"map",style:C},o.a.createElement(i.a,Object(a.a)({ref:b},g,{onComplete:f,onClick:h}),e.children)))}))})));t.a=s}}]);