3D 地球可视化组件

在线演示： http://globe.lap.qihoo.net/

安装

组件依赖spritejs@3和sprite-extend-3d，浏览器中使用时，可以通过CDN加载相关的依赖库。

  <script src="http://unpkg.com/spritejs/dist/spritejs.js"></script>
  <script src="http://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script>
  <script src="js/sprite-geo-earth.min.js"></script>

或者通过QNPM安装：

qnpm i @q/sprite-geo-earth

使用

如果通过CDN加载，那么组件的所有API被导出到spritejs.globe对象中，可以直接通过该对象引入：

<script>
const {Scene} = spritejs;
const container = document.getElementById('container');
const scene = new Scene({
  container,
});
const layer = scene.layer3d('fglayer', {
  alpha: false,
  camera: {
    fov: 35,
  },
});
layer.camera.attributes.pos = [0, 0, 3500 / Math.min(layer.width, layer.height)];
layer.camera.lookAt([0, 0, 0]);
layer.gl.clearColor(0, 0, 0, 1);

const {createGlobe} = spritejs.globe;

// 创建地球
const globe = createGlobe(layer, {
  program: null, // 这里有特殊需要可以传一个自定义的program进去，不过一般不需要
  data: spritejs.globe.config.topojsonData, // 数据源，默认是测试数据源，可以传任何topojson格式的世界地理数据覆盖它
  orbit: true, // 是否允许鼠标操作，默认为 true
  raycast: true, // 是否允许地球被点击，默认为 false
  highlight: true, // 是否让鼠标移动时高亮地区，这个需要同时将raycast设为true生效
  sky: true, // 是否显示星空，默认为true
  skyProgram: null, // 如果自定义背景天空，可以传一个program进去
  corona: true, // 是否显示地球背景的光晕，默认为true
  coronaProgram: null, // 如果自定义背景光晕，可以传一个program进去
  autoResize: true, // 是否在容器大小变化时自适应大小
  texture: null, // 是否加载地图纹理，默认不加载则用数据画
  tick() { // 可以在每一帧更新地球属性
    this.attributes.rotateY += 0.1;
  },
  // ... 然后可以传其他的SpriteJS属性给元素
  rotateY: 310,
});
</script>

如果用QNPM安装的，那么可以用模块引入：

// 创建 spritejs 的 Scene 和 Layer
import {Scene} from 'spritejs';
const container = document.getElementById('container');
const scene = new Scene({
  container,
});
const layer = scene.layer3d('fglayer', {
  alpha: false,
  camera: {
    fov: 35,
  },
});
layer.camera.attributes.pos = [0, 0, 3500 / Math.min(layer.width, layer.height)];
layer.camera.lookAt([0, 0, 0]);
layer.gl.clearColor(0, 0, 0, 1);

import {createGlobe} from '@q/sprite-geo-earth';

// 后面使用是一样的
...

这样就创建了一个可交互的地球。

API

addBeam

addBeam(globe, options) 在地球上添加一个光柱

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | latitude | number | required | 北纬，负数为南纬，范围 -90~90 | | longitude | number | required | 东经，负数为西经，范围 -180~180 | | width | number | 1.0 | 相对宽度 | | height | number | 25.0 | 相对高度 | | color | Color | rgba(245,250,113, 0.5) | 光柱颜色 | | raycast | 枚举 {none, bounds, sphere} | none | 是否碰撞检测，默认不检测 | | segments | number | 60 | 柱子截面的边数，越多越接近圆柱，3为三棱柱 |

在线演示

createCurve

addCurve(globe, options) 在地球上添加一段曲线

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | from | {latitude, longitude} | required | 起始位置 | | to | {latitude, longitude} | required | 结束位置 | | color | Color | rgb(232,22,140) | 曲线颜色 | | thickness | number | 1.0 | 相对宽度 | | height | number | 1.0 | 相对高度 | | dashLength | number | 10e6 | 虚线长度 | | dashOffset | number | 0 | 虚线偏移量 |

在线演示

addMarker

addMarker(globe, options) 在地球上添加一个标记

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | latitude | number | required | 北纬，负数为南纬，范围 -90~90 | | longitude | number | required | 东经，负数为西经，范围 -180~180 | | width | number | 1.0 | 相对宽度 | | height | number | 0.0 | 相对高度, 0 表示在平面上 | | speed | number | 1.0 | 光圈闪烁的相对速度 | | color | Color | rgba(245,250,113) | 标记颜色 | | raycast | 枚举 {none, bounds, sphere} | none | 是否碰撞检测，默认不检测 | | segments | number | 60 | 标记截面的边数，越多越接近圆，3为三角形 | | lifeTime | number | Infinity | 标记的生命周期，默认永久，可以设置为毫秒值 |

在线演示

cameraTo

cameraTo(globe, options) 移动相机到某个位置

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | latitude | number | required | 北纬，负数为南纬，范围 -90~90 | | longitude | number | required | 东经，负数为西经，范围 -180~180 | | to | Vec3 | null | 如果不传 latitude 和 longitude，直接传to坐标，则按照to坐标移动相机 | | duration | number | 500 | 执行移动的动画 |

在线演示

createGlobe

createGlobe(layer, options) 创建地球

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | program | Program | null | 可以传自定义program | | data | string | default | 可以传一个 URL，是 topojson 数据的地址 | | orbit | boolean | true | 是否允许鼠标控制 | | raycast | boolean | false | 是否碰撞检测，如果要高亮地区，需要将它设为 true | | highlight | boolean | false | 是否高亮显示地区 | | tick | Function | null | layer.tick 的简写 | | sky | boolean | true | 是否显示星空背景 | | skyProgram | Program | null | 星空背景自定义program | | corona | boolean | true | 是否显示背景光晕 | | coronaProgram | Program | null | 背景光晕自定义program | | autoResize | boolean | true | 是否根据窗口缩放自动适配 | | texture | Texture | null | 加载纹理图片 |

在线演示

getCountryInfo(globe, options) 获取指定位置的国家/地区信息

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | latitude | number | required | 北纬，负数为南纬，范围 -90~90 | | longitude | number | required | 东经，负数为西经，范围 -180~180 | | pos | Vec3 | null | 如果不传 latitude 和 longitude，直接传pos坐标，则按照pos坐标判断地区 |

返回topojson的feature数据。

highlightMap

highlightMap(globe, options) 高亮地图区域

我们可以不设置globe的highlight属性，自己接管地图的高亮。

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | latitude | number | required | 北纬，负数为南纬，范围 -90~90 | | longitude | number | required | 东经，负数为西经，范围 -180~180 | | pos | Vec3 | null | 如果不传 latitude 和 longitude，直接传pos坐标，则按照pos坐标高亮地区 |

latlngToPosition

latlngToPosition(latitude, longitude, radius = 1) 经纬度转3D坐标

辅助函数，将经纬度转换为地球的3D坐标。

launchMissile

launchMissile(globe, options) 发射飞线

| 参数 | 类型 | 必填/默认值 | 说明 | | --- | --- | --- | --- | | from | {latitude, longitude} | required | 起始位置 | | to | {latitude, longitude} | required | 结束位置 | | color | Color | rgb(232,22,140) | 曲线颜色 | | thickness | number | 1.0 | 相对宽度 | | height | number | 1.0 | 相对高度 | | lifeTime | number | 1000 | 飞线飞行时间 |

在线演示

project

project(u, v radius = 1) 将平面地图点投影到地球3D坐标

辅助函数，将平面地图点投影到地球3D坐标

positionToLatlng

positionToLatlng(x, y, z, radius = 1) 将3D地球坐标转换为经纬度

辅助函数，将3D地球坐标转换为经纬度

unproject

unproject(x, y, z, radius = 1) 将3D地球坐标投影到平面地图点

辅助函数，将3D地球坐标投影到平面地图点