feat: add WorldView

src/components/WorldView/WorldView.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { useMap } from '../../hooks/useMap';
+
+import type { Code, WorldViewProps } from './types';
+
+export const WorldView: React.FC<WorldViewProps> = (props) => {
+  const { code = 'CN' } = props;
+  const { map } = useMap();
+
+  useEffect(() => {
+    if (code) {
+      filterLayers(code);
+    }
+  }, [code]);
+
+  const filterLayers = (worldview: Code) => {
+    console.log(worldview);
+    map.setFilter('admin-0-boundary-disputed', [
+      'all',
+      ['==', ['get', 'disputed'], 'true'],
+      ['==', ['get', 'admin_level'], 0],
+      ['==', ['get', 'maritime'], 'false'],
+      ['match', ['get', 'worldview'], ['all', worldview], true, false],
+    ]);
+
+    map.setFilter('admin-0-boundary', [
+      'all',
+      ['==', ['get', 'admin_level'], 0],
+      ['==', ['get', 'disputed'], 'false'],
+      ['==', ['get', 'maritime'], 'false'],
+      ['match', ['get', 'worldview'], ['all', worldview], true, false],
+    ]);
+
+    map.setFilter('admin-0-boundary-bg', [
+      'all',
+      ['==', ['get', 'admin_level'], 0],
+      ['==', ['get', 'maritime'], 'false'],
+      ['match', ['get', 'worldview'], ['all', worldview], true, false],
+    ]);
+  };
+
+  return null;
+};

src/components/WorldView/index.ts

@@ -0,0 +1,2 @@
+export { WorldView } from './WorldView';
+export type { WorldViewProps, Code } from './types';

src/components/WorldView/types.ts

@@ -0,0 +1,5 @@
+export type Code = 'CN' | 'IN' | 'JP' | 'US';
+
+export interface WorldViewProps {
+  code?: Code;
+}

src/index.ts

@@ -4,4 +4,5 @@ export * from './components/StyleLoadFinish';
 export * from './components/Source';
 export * from './components/Layer';
 export * from './components/MarkerCluster';
+export * from './components/WorldView';
 export * from './hooks/useMap';

stories/examples/WorldView.stories.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Radio } from 'antd';
+import { Map, StyleLoadFinish, WorldView as WorldViewCom } from '../../src';
+import { Language } from './components/Language';
+import { Flyto } from './components/Flyto';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const worldViews = [
+  {
+    value: 'CN',
+    label: '中国',
+  },
+  {
+    value: 'IN',
+    label: '印度',
+  },
+  {
+    value: 'JP',
+    label: '日本',
+  },
+  {
+    value: 'US',
+    label: '美国',
+  },
+];
+
+const meta = {
+  title: '示例/WorldView',
+  render: () => {
+    const [worldView, setWorldView] = useState(worldViews[0].value);
+
+    return (
+      <Map
+        containerStyle={{ height: '100vh' }}
+        zoom={1}
+        style="mapbox://styles/mapbox/light-v11"
+        onClick={(e) => {
+          console.log(e);
+        }}
+      >
+        <StyleLoadFinish>
+          <Flyto center={[85.14477595859074, 29.68859973130745]} zoom={4} />
+          <WorldViewCom code={worldView as any} />
+        </StyleLoadFinish>
+        <Language />
+
+        <div style={{ position: 'absolute', background: '#efefef', right: 0, padding: 12 }}>
+          <Radio.Group
+            value={worldView}
+            options={worldViews}
+            onChange={(e) => {
+              setWorldView(e.target.value);
+            }}
+          />
+        </div>
+      </Map>
+    );
+  },
+  parameters: {},
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Map>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WorldView: Story = {
+  args: {},
+};

stories/examples/components/Flyto.tsx

@@ -1,14 +1,20 @@
 import React, { useEffect } from 'react';
 import { useMap } from '../../../src';
 
-export const Flyto: React.FC = () => {
+interface FlytoProps {
+  center?: [number, number];
+  zoom?: number;
+}
+
+export const Flyto: React.FC<FlytoProps> = (props) => {
+  const { center = [116.36904455256712, 39.94939362625391], zoom = 12.5 } = props;
   const { map } = useMap();
 
   useEffect(() => {
     if (map) {
       map.flyTo({
-        center: [116.36904455256712, 39.94939362625391],
-        zoom: 12.5,
+        center,
+        zoom,
         duration: 12 * 1000,
         essential: true,
       });