概述
@geo-maps/earth-lands-1km 是一个用于在浏览器中显示全球地图与陆地数据的 npm 包。它利用了 OpenStreetMap（OSM）以及 Natural Earth 数据来绘制地图，并通过 WebGL 加快渲染速度。这个包的使用方法较为简单，可以很方便地嵌入到自己的网站或应用中。
安装
使用 npm 安装：
npm install @geo-maps/earth-lands-1km --save
也可以使用 yarn 进行安装：
yarn add @geo-maps/earth-lands-1km
使用
使用 @geo-maps/earth-lands-1km 很简单，只需要将其引入到项目中即可。下面是使用例子：
import EarthMap from '@geo-maps/earth-lands-1km';
const container = document.getElementById('container');
const earthMap = new EarthMap(container);上述代码可以在项目的入口文件中使用，例如 App.js 或 index.js。
需要注意的是，构造函数接收一个参数 container，表示地图容器的 DOM 元素。这个容器需要在页面中存在，并且需要有固定的宽度和高度。
然后，就可以在浏览器中看到一个全球地图了。
配置
@geo-maps/earth-lands-1km 提供了一些配置项，用于控制地图的显示和交互行为。这些配置项需要在创建 EarthMap 实例的时候传入。
zoom
zoom 表示地图的缩放级别，可选值为 1 到 20。默认值为 2。
const earthMap = new EarthMap(container, { zoom: 5 });center
center 表示地图的中心点坐标，格式为 [longitude, latitude]。默认值为 [0, 0]。
const earthMap = new EarthMap(container, { center: [116.404, 39.915] });tilt
tilt 表示地图的倾斜角度，可选值为 0 到 60。默认值为 0。
const earthMap = new EarthMap(container, { tilt: 20 });rotate
rotate 表示地图的旋转角度，可选值为 0 到 360。默认值为 0。
const earthMap = new EarthMap(container, { rotate: 45 });landColor
landColor 表示陆地部分的颜色。默认值为 #C5BFBF。
const earthMap = new EarthMap(container, { landColor: '#8B4513' });seaColor
seaColor 表示海洋部分的颜色。默认值为 #2F4F4F。
const earthMap = new EarthMap(container, { seaColor: 'rgb(0, 191, 255)' });showDayNight
showDayNight 表示是否显示黑白模式的地球。默认值为 false。
const earthMap = new EarthMap(container, { showDayNight: true });showAtmosphere
showAtmosphere 表示是否显示大气层。默认值为 true。
const earthMap = new EarthMap(container, { showAtmosphere: false });showClouds
showClouds 表示是否显示云层。默认值为 true。
const earthMap = new EarthMap(container, { showClouds: false });showStars
showStars 表示是否显示星空。默认值为 true。
const earthMap = new EarthMap(container, { showStars: false });showSun
showSun 表示是否显示太阳。默认值为 true。
const earthMap = new EarthMap(container, { showSun: false });ambientLight
ambientLight 表示环境光的颜色。默认值为 #aaaaaa。
const earthMap = new EarthMap(container, { ambientLight: '#ff0000' });directionalLight
directionalLight 表示定向光的颜色和方向。格式为 [color, direction]，其中 direction 是长度为 3 的数组，表示光线的方向。默认值为 ['#ffffff', [1, 1, 1]]。
const earthMap = new EarthMap(container, {
directionalLight: ['#00ff00', [-1, 1, 1]],
});方法
@geo-maps/earth-lands-1km 除了提供配置项外，还提供了一些对地图进行操作的方法。
setZoom(zoom)
setZoom 方法用于设置地图的缩放级别。
const earthMap = new EarthMap(container); earthMap.setZoom(9);
setCenter(center)
setCenter 方法用于设置地图的中心点坐标。
const earthMap = new EarthMap(container); earthMap.setCenter([-74.006, 40.7128]);
setTilt(tilt)
setTilt 方法用于设置地图的倾斜角度。
const earthMap = new EarthMap(container); earthMap.setTilt(20);
setRotate(rotate)
setRotate 方法用于设置地图的旋转角度。
const earthMap = new EarthMap(container); earthMap.setRotate(45);
flyTo(center, zoom, options)
flyTo 方法用于将地图平滑移动到指定的地方。center 和 zoom 参数的含义与 setCenter 和 setZoom 相同。options 参数是一个可选的对象，用于控制动画的速度和缓动函数。
const earthMap = new EarthMap(container);
earthMap.flyTo([-74.006, 40.7128], 9, {
duration: 3000,
easing: t => t * (2 - t),
});上述代码表示将地图平滑移动到纽约市，缩放级别为 9，动画时长为 3 秒，缓动函数为 easeInOut。
getCenter()
getCenter 方法用于获取当前地图的中心点坐标。
const earthMap = new EarthMap(container); const center = earthMap.getCenter(); // [-74.006, 40.7128]
getZoom()
getZoom 方法用于获取当前地图的缩放级别。
const earthMap = new EarthMap(container); const zoom = earthMap.getZoom(); // 2
getTilt()
getTilt 方法用于获取当前地图的倾斜角度。
const earthMap = new EarthMap(container); const tilt = earthMap.getTilt(); // 0
getRotate()
getRotate 方法用于获取当前地图的旋转角度。
const earthMap = new EarthMap(container); const rotate = earthMap.getRotate(); // 0
示例
以下是一个基本的示例，演示了如何使用 @geo-maps/earth-lands-1km 创建一个地球和一些简单的交互行为。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ---------------
-------
---- -
------ ------
------- ------
-
--------
-------
------
---- ---------------
------- ----------------------------------------------------------------------------
--------
----- --------- - -------------------------------
----- -------- - --- --------------------
-------------------- ----- -- -
----------------------- --------------
---
---------
-------
-------上述代码创建了一个全球地图，将其容器的宽度和高度设置为浏览器窗口的宽度和高度。然后，添加了一个点击事件监听器，输出点击事件的经纬度。
结论
@geo-maps/earth-lands-1km 是一个功能强大、易于使用的地球和陆地数据可视化 npm 包。它不仅提供了丰富的配置项和操作方法，还支持各种交互行为和事件。它适用于各种类型的项目，如地图应用、航空航天模拟等。希望本文对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005686681e8991b448e4674