Install

npm install @zym-com/three-map

or

yarn add @zym-com/three-map

Basic Usage

Usage

import ThreeMap from "@zym-com/three-map";
import "@zym-com/three-map/dist/style.css";

function App() {
  const options ={
    "configuration": {
        "fovNumber": 45,
        "nearNumber": 1,
        "farNumber": 10000,
        "AnimationReset": true,
        "cameraPositionNear": {
            "x": 0,
            "y": -600,
            "z": 800
        },
        "animationResetRun": false,
        "sceneBgcolor": "rgba(2, 9, 36,1)",
        "fogColor": "rgba(2, 9, 36,1)",
        "fogNearNumber": 200,
        "fogFarNumber": 10000,
        "enableDamping": true,
        "enablePan": true,
        "enableRotate": true,
        "azimuthAngle": {
            "min": -90,
            "max": 90
        },
        "polarAngle": {
            "min": -180,
            "max": 180
        },
        "enableZoom": true,
        "scaleDistance": {
            "min": 100,
            "max": 100000
        },
        "mirrorShow": true,
        "mirrorHeight": -5,
        "mirrorOpacity": 0.2,
        "clickFlyAnimate": false,
        "clickEventDown": true,
        "drillDownAnimation": false,
        "clickFlyPosition": {
            "x": 0,
            "y": -300,
            "z": 200
        },
        "clickPotionsTweenTime": 3000,
        "progressShow": true,
        "progressBoxWidth": 80,
        "progressPosition": {
            "x": 50,
            "y": 50
        },
        "progressStrokeWidth": 10,
        "trailColor": "rgba(255,255,255,0.08)",
        "progressStrokeColor": {
            "startVal": "rgba(16,142,233,1)",
            "endVal": "rgba(16,142,233,1)",
            "direction": 180
        },
        "progressTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 20,
            "color": "rgba(23,125,220,1)",
            "fontWeight": "bolder",
            "letterSpacing": 2,
            "lineHeight": 40,
            "fontStyle": "normal"
        },
        "progressPrefixText": "正在加载",
        "progressSuffixText": "%....",
        "progressDelayClose": 0,
        "dataSourcestype": "systemDefault",
        "mapTreeSelect": "100000",
        "baseMapJson": "./json/chinaMap.json",
        "baseMapOutlineJson": "./json/chinaMapOutlines.json",
        "setMapMainCode": "110000",
        "mapZoomRatioScale": 0.8,
        "mapMainScale": 800,
        "mapChildScale": 500,
        "baseMapColor": "rgba(255,255,255,1)",
        "baseMapTextureShow": true,
        "baseMapTextureUserColor": false,
        "mapAreaTextureImage": "./mapImg/chinaMap1.png",
        "adjustMapping": false,
        "drawImageSXY": {
            "sx": 0,
            "sy": 0
        },
        "drawImageSWH": {
            "sw": 0,
            "sh": 0
        },
        "drawImageDXY": {
            "dx": 0,
            "dy": 0
        },
        "drawImageDWH": {
            "dw": 0,
            "dh": 0
        },
        "mapAreaNormalMapImage": "./mapImg/nomalMap.jpg",
        "mapAreaNormalMapScale": 10,
        "mapAreaDisplacementMapImage": "",
        "mapAreaDisplacementMapScale": 1,
        "mapDepthNumber": 10,
        "baseMapDepthColor": "rgba(58, 122, 189,0.6)",
        "earthTopOutlineShow": true,
        "earthTopOutlineColor": "rgba(255,255,255,1)",
        "earthTopOutlineWidth": 1,
        "earthTopOutlineOffset": 2,
        "earthBotOutlineShow": false,
        "earthBotOutlineColor": "rgba(255,255,255,1)",
        "earthBotOutlineWidth": 1,
        "earthBotOutlineOffset": 0,
        "mapOutlineShow": true,
        "mapOutlineColor": "rgba(255,211,89,1)",
        "mapOutlineWidth": 2,
        "mapOutlineOffset": 1,
        "mapOutlineEffectShow": true,
        "polygonNumber": 200,
        "streamerColor": "rgba(247,255,255,1)",
        "streamerQuantity": 3,
        "streamerLength": 4,
        "streamerSize": 15,
        "streamerPointsNumber": 3000,
        "mapOutlineSpeed": 0.003,
        "outlineEffectOffset": 1,
        "baseLabelShow": true,
        "baseLabelAngle": {
            "x": 45,
            "y": 0,
            "z": 0
        },
        "baseLabelOffset": {
            "x": 0,
            "y": 0,
            "z": 5
        },
        "baseLabelScale": 0.5,
        "baseLabelFaceCamera": false,
        "labelType": "default",
        "labelDefaultTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 16,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 16,
            "fontStyle": "normal"
        },
        "labelDefaultBgColor": "rgba(0,0,0,0)",
        "labelDefaultPadding": {
            "x": 0,
            "y": 0
        },
        "labelDefaultOffset": {
            "x": 0,
            "y": 0
        },
        "labelDefaultShadow": [
            "rgba(255,255,255,1)",
            0,
            0,
            0
        ],
        "nanhaiSeaShowType": "china&hainan",
        "naihaiMapHeight": 0,
        "naihaiMapMinLat": 0,
        "naihaiMapMinLng": 0,
        "baseMapEventType": "click",
        "mapEventColor": "rgba(58, 122, 189,0.51)",
        "lineEventColor": "rgba(58, 122, 189,0.51)",
        "lineEventWidth": 3,
        "sceneAnimateSeries": [
            {
                "sceneAnimateCenter": {
                    "x": 0,
                    "y": 0,
                    "z": 5000
                },
                "sceneAnimateSpeed": 3000
            },
            {
                "sceneAnimateCenter": {
                    "x": 0,
                    "y": 0,
                    "z": 1000
                },
                "sceneAnimateSpeed": 3000
            },
            {
                "sceneAnimateCenter": {
                    "x": 0,
                    "y": -600,
                    "z": 800
                },
                "sceneAnimateSpeed": 2000
            }
        ],
        "drillDownAnimateSeries": [
            {
                "drillDownAnimateCenter": {
                    "x": 0,
                    "y": 0,
                    "z": 1000
                },
                "drillDownAnimateSpeed": 2000
            }
        ],
        "labelFormatSeries": [
            {
                "labelLastName": "",
                "labelNewName": "",
                "labelSeriesOffset": {
                    "x": 0,
                    "y": 0
                }
            }
        ],
        "sceneParamsBg": false,
        "fogParams": true
    },
    "base": {
        "width": 1920,
        "height": 1080,
        "id": "main-1n4A4xh4",
        "show": true
    },
    "dataSource": [
        {
            "name": "",
            "adcode": "",
            "lng": "",
            "lat": ""
        }
    ],
    "childrenComponent": [
        {
            "base": {
                "show": true,
                "name": "环境光",
                "description": "环境光会均匀的照亮场景中的所有物体",
                "id": "child-ambientLight-unpA4xh2",
                "pkgname": "ambientLight"
            },
            "configuration": {
                "ambientLightColor": "rgba(255,255,255,1)",
                "ambientLightIntensity": 1
            },
            "dataSource": []
        }
    ],
    bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
  }
  return (
    <>
      <ThreeMap {...options} />
    </>
  );
}

export default App;