# @dsyv/three-map > 3D地图组件 Latest version **1.0.0** (published 2021-10-09) · ISC license · 0 weekly downloads ## Install ```sh npm install @dsyv/three-map pnpm add @dsyv/three-map yarn add @dsyv/three-map bun add @dsyv/three-map ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2021-10-09 | | First published | 2021-10-09 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 11 | | Unpacked size | 1.6 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Maintainers | zhanghee, bruceliu68, dashangyun | | Keywords | @dsyv, @dsyv/three-map, three-map | ## Links - npm: https://www.npmjs.com/package/@dsyv/three-map - npm.io page: https://npm.io/package/@dsyv/three-map ## Dependencies (11) - [docz](https://npm.io/package/docz.md) ^2.3.1 - [less](https://npm.io/package/less.md) ^3.11.1 - [react](https://npm.io/package/react.md) ^16.13.1 - [three](https://npm.io/package/three.md) ^0.116.1 - [d3-geo](https://npm.io/package/d3-geo.md) ^1.12.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.13.1 - [file-saver](https://npm.io/package/file-saver.md) ^2.0.2 - [@tntd/utils](https://npm.io/package/@tntd/utils.md) ^0.1.4 - [geojson-decoder](https://npm.io/package/geojson-decoder.md) ^1.0.1 - [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1 - [gatsby-plugin-less](https://npm.io/package/gatsby-plugin-less.md) ^3.1.3 ## Recent versions - 1.0.0 (latest) — 2021-10-09 ## README # 基于ThreeJs封装的地图组件 # 安装 ```bash npm install @dsyv/three-map --save ``` # 如何使用 ```jsx import ThreeMap from "@dsyv/three-map"; // 初始化地图 const dom = document.getElementById('myMap'); const map = new ThreeMap({}, geojson); map.init(dom); ``` ## 地图config配置 | 参数 | 说明 | 类型 | 默认值 | | :------ | :----- | :---- | :------ | :---------- | | background | 背景颜色 | string | #11182f | | center | 地图中心点经纬度 | array | [103.754443, 30.544037] | | scale | 地图缩放 | number | 80 | | translate | 地图平移 | array | [0, 0] | | depth | 地图深度 | number | 2 | | line.color | 轮廓线颜色 | string | #5a77c5 | | area.color | 区域颜色 | string | #344e85 | | area.opacity | 区域透明度 | float | 0.7 | | area.hover | 是否开启区域hover效果 | boolean | true | | area.hoverColor | 区域鼠标悬浮颜色 | string | #5576bb | | area.upHover | 是否开启区域悬浮凸起效果 | boolean | false | | area.upHoverDepth | 区域凸起深度 | number | 2 | | controls.enableZoom | 启用或禁用摄像机的缩放 | boolean | true | | controls.zoomSpeed | 缩放速度 | number | 1 | | controls.minDistance | 缩放最小 | number | 10 | | controls.maxDistance | 缩放最大 | number | 1000 | | camera.position | 相机x,y,z 对象三维坐标 | array | [80, 5, 100] | | camera.lookAt | x,y,z相机看的位置 | array | [0, 0, 0] | | camera.fov | 摄像机视锥体垂直视野角度 | number | 35 | | camera.near | 摄像机视锥体近端面 | number | 1 | | camera.far | 摄像机视锥体远端面 | number | 10000 | | text.show | 地名是否显示 | boolean | false | | text.color | 字体颜色 | string | #fff | | text.fontSize | 字体大小 | number | 12 | ## Method方法 | 参数 | 说明 | 例子 | | :------ | :----- | :----- | | map.scene.add() | 接入外部组件的方法 | map.scene.add(group) | | map.lnglatToVector3() | 经纬度转地图三维坐标 | map.lnglatToVector3(Array[]) | | map.destroy() | 销毁 | map.destroy() | ## 内置地图数据 ```jsx import china from "@dsyv/three-map/lib/mapData/china.json"; // 中国地图 import shanghai from "@dsyv/three-map/lib/mapData/shanghai.json"; // 上海市 import yunnan from "@dsyv/three-map/lib/mapData/yunnan.json"; // 云南省 import neimenggu from "@dsyv/three-map/lib/mapData/neimenggu.json"; // 内蒙古自治区 import beijing from "@dsyv/three-map/lib/mapData/beijing.json"; // 北京市 import taiwan from "@dsyv/three-map/lib/mapData/taiwan.json"; // 台湾省 import jilin from "@dsyv/three-map/lib/mapData/jilin.json"; // 吉林省 import sichuan from "@dsyv/three-map/lib/mapData/sichuan.json"; // 四川省 import tianjin from "@dsyv/three-map/lib/mapData/tianjin.json"; // 天津市 import ningxia from "@dsyv/three-map/lib/mapData/ningxia.json"; // 宁夏回族自治区 import anhui from "@dsyv/three-map/lib/mapData/anhui.json"; // 安徽省 import shandong from "@dsyv/three-map/lib/mapData/shandong.json"; // 山东省 import shanxi from "@dsyv/three-map/lib/mapData/shanxi.json"; // 山西省 import guangdong from "@dsyv/three-map/lib/mapData/guangdong.json"; // 广东省 import guangxi from "@dsyv/three-map/lib/mapData/guangxi.json"; // 广西壮族自治区 import xinjiang from "@dsyv/three-map/lib/mapData/xinjiang.json"; // 新疆维吾尔族自治区 import jiangsu from "@dsyv/three-map/lib/mapData/jiangsu.json"; // 江苏省 import jiangxi from "@dsyv/three-map/lib/mapData/jiangxi.json"; // 江西省 import hebei from "@dsyv/three-map/lib/mapData/hebei.json"; // 河北省 import henan from "@dsyv/three-map/lib/mapData/henan.json"; // 河南省 import zhejiang from "@dsyv/three-map/lib/mapData/zhejiang.json"; // 浙江省 import hainan from "@dsyv/three-map/lib/mapData/hainan.json"; // 海南省 import hubei from "@dsyv/three-map/lib/mapData/hubei.json"; // 湖北省 import hunan from "@dsyv/three-map/lib/mapData/hunan.json"; // 湖南省 import anmen from "@dsyv/three-map/lib/mapData/aomen.json"; // 澳门特别行政区 import gansu from "@dsyv/three-map/lib/mapData/gansu.json"; // 甘肃省 import fujian from "@dsyv/three-map/lib/mapData/fujian.json"; // 福建省 import xizang from "@dsyv/three-map/lib/mapData/xizang.json"; // 西藏自治区 import guizhou from "@dsyv/three-map/lib/mapData/guizhou.json"; // 贵州省 import liaoning from "@dsyv/three-map/lib/mapData/liaoning.json"; // 辽宁省 import chongqing from "@dsyv/three-map/lib/mapData/chongqing.json"; // 重庆市 import shanxisheng from "@dsyv/three-map/lib/mapData/shanxisheng.json"; // 陕西省 import qinghai from "@dsyv/three-map/lib/mapData/qinghai.json"; // 青海省 import xianggang from "@dsyv/three-map/lib/mapData/xianggang.json"; // 香港特别行政区 import heilongjiang from "@dsyv/three-map/lib/mapData/heilongjiang.json"; // 黑龙江省 import encoder from "geojson-decoder"; // geojson解码工具 const heilongjiangGeojson = encoder.decode(heilongjiang); // 解码 -- 所有内置地图数据都需要解码 ``` --- _Source: https://npm.io/package/@dsyv/three-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._