sprite-geo-earth v0.2.3

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) 在地球上添加一个光柱

在线演示

createCurve

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

在线演示

addMarker

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

在线演示

cameraTo

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

在线演示

createGlobe

createGlobe(layer, options) 创建地球

在线演示

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

返回topojson的feature数据。

highlightMap

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

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

latlngToPosition

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

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

launchMissile

launchMissile(globe, options) 发射飞线

在线演示

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地球坐标投影到平面地图点