mirror of https://gitee.com/antv-l7/antv-l7
feat: 文档案例整理
This commit is contained in:
shihui
parent
b081b2551f
commit
7f053ee1b0
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Earth Mode
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/earth/earth.zh.md`
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
title: 地球模式
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
L7Earth 相较于高德地图、mapbox 地图，是完全不同的一种表现形式，提供了全球视角下的可视化展示能力，为用户提供了更多的地理信息可视化表现形式。
|
||||
|
||||
✨ 为了区别普通的地图，L7Earth 提供了全新的 Earth 地图类型以及对应的 EarthLayer 图层
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
// 1、引入对应模块
|
||||
import { Earth } from '@antv/l7-maps';
|
||||
import { EarthLayer } from '@antv/l7-layers';
|
||||
...
|
||||
// 2、构建 Earth Map
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Earth({}),
|
||||
});
|
||||
...
|
||||
// 3、构建地球图层，当前的 shape 为 base，表示基础球体
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
// 地球表面的纹理
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [121.168, 30.2828, 121.384, 30.421],
|
||||
},
|
||||
},
|
||||
)
|
||||
.color('#f00')
|
||||
.shape('base')
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
radius: 40,
|
||||
globelOtions: {
|
||||
ambientRatio: 0.6, // 环境光
|
||||
diffuseRatio: 0.4, // 漫反射
|
||||
specularRatio: 0.1, // 高光反射
|
||||
earthTime: 0.1,
|
||||
},
|
||||
})
|
||||
.animate(true);
|
||||
|
||||
// 4、添加基础地球球体
|
||||
scene.addLayer(earthlayer);
|
||||
|
||||
// 经过上述的步骤，我们就可以在场景中添加一个基础的地球了
|
||||
```
|
||||
|
||||
## 独立的地图类型 Earth
|
||||
|
||||
### 构造函数 Earth(args)
|
||||
|
||||
作为 L7Earth 的基础地图类型，Earth 提供了地球系统的相机系统，目前只需要传入一个空对象。
|
||||
|
||||
- args: {}
|
||||
|
||||
### rotateY(option: { force: boolean; regScale: number})
|
||||
|
||||
提供了简单的方法控制地球系统的旋转（实际上控制的是相机的旋转）
|
||||
|
||||
- force: false 判断是否强制生效，默认该方法的优先级比用户鼠标操作要低，当用户操作相机的时候，该方法会失效
|
||||
- regScale: 0.01 旋转的角度（视觉上地球的旋转角度）， regScale 表示的并不是实际的旋转角度，而是单位旋转角度的比例
|
||||
🌟 单位旋转角度 = Math.min(this.earthCameraZoom \* this.earthCameraZoom, 1)
|
||||
|
||||
## 地图图层 EarthLayer
|
||||
|
||||
地球图层区别于普通高德地图和 Mapbox 地图的图层，只在地球模式下可以被使用，用于表示地球的球体、大气层、辉光等效果。
|
||||
🌟 使用不同的 shape 参数表示区别不同的地球图层
|
||||
|
||||
### 地球球体图层 baseLayer
|
||||
|
||||
- source(map, parser)
|
||||
map: 地球表面纹理贴图的地址
|
||||
parser: 解析器，目前只需要写固定的对象值即可 { parser: { type: "image" } }
|
||||
- shape: 'base'
|
||||
🌟 目前支持的 shape 类型有 base、atomSphere、bloomSphere，当用户的 shape 参数不被识别时，自动降级为 base 类型
|
||||
- globelOtions: style 方法中的参数 ambientRatio: 环境光、diffuseRatio: 漫反射、specularRatio: 高光反射
|
||||
|
||||
```javascript
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
},
|
||||
},
|
||||
)
|
||||
.shape('base')
|
||||
.style({
|
||||
globelOtions: {
|
||||
ambientRatio: 0.6, // 环境光
|
||||
diffuseRatio: 0.4, // 漫反射
|
||||
specularRatio: 0.1, // 高光反射
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 地球内发光/大气图层 atomLayer
|
||||
|
||||
atomLayer 作为地球的效果图层，不需要传入数据，所以可以不调用 source 方法
|
||||
|
||||
```javascript
|
||||
const atomLayer = new EarthLayer()
|
||||
.color('#2E8AE6')
|
||||
.shape('atomSphere')
|
||||
.style({
|
||||
// 可以控制发光程度
|
||||
opacity: 1,
|
||||
});
|
||||
```
|
||||
|
||||
### 地球内外发光/辉光图层 bloomLayer
|
||||
|
||||
bloomLayer 作为地球的效果图层，不需要传入数据，所以可以不调用 source 方法
|
||||
|
||||
```javascript
|
||||
const bloomLayer = new EarthLayer()
|
||||
.color('#fff')
|
||||
.shape('bloomSphere')
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Earth Flyline
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/earth/flyline.zh.md`
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
---
|
||||
title: 飞线
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
1、L7 支持允许用户接入第三方的渲染引擎对地图场景进行开发，threejs 作为当前最广泛使用的通用 3D 渲染引擎，L7 将其集成后可以满足
|
||||
用户自定义开发的需求，可以让 L7 覆盖更多的应用场景。
|
||||
|
||||
2、目前 L7Three 模块为了抹平不同地图底图之间的差异，提供了一些兼容方法，如 setMeshScale 方法，通过这些方法用户可以在不同的底图
|
||||
环境中使用同一套代码。
|
||||
|
||||
3、L7 提供的适配方法只负责 threejs 世界坐标到不同地图底图坐标的转化、 gl 上下文的共享以及渲染帧的同步，其余关于 3D 场景内容的搭建
|
||||
与普通 threejs 应用的开发没有任何区别。
|
||||
|
||||
4、L7 本身并没有集成 threejs，所以用于在使用 L7Three 模块的时候需要独立安装 threejs。
|
||||
|
||||
✨ 目前 L7 官方提供的 threejs 兼容是根据 0.115.0 版本进行开发的，使用其他版本 threejs 可能会存在兼容问题
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
// 1、引入对应模块
|
||||
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
|
||||
import * as THREE from 'three';
|
||||
...
|
||||
// 2、注册服务
|
||||
scene.registerRenderService(ThreeRender);
|
||||
...
|
||||
// 3、构建 threejs 图层对象并在其中添加 threejs 构建的网格对象
|
||||
const threeJSLayer = new ThreeLayer({
|
||||
onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
|
||||
threeScene.add(new THREE.AmbientLight(0xffffff));
|
||||
|
||||
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
|
||||
sunlight.position.set(0, 80000000, 100000000);
|
||||
sunlight.matrixWorldNeedsUpdate = true;
|
||||
threeScene.add(sunlight);
|
||||
|
||||
let center = scene.getCenter();
|
||||
|
||||
let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
|
||||
let cubeMaterial = new THREE.MeshNormalMaterial();
|
||||
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
|
||||
|
||||
layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
|
||||
threeScene.add(cube);
|
||||
},
|
||||
})
|
||||
.source(data)
|
||||
.animate(true);
|
||||
|
||||
// 4、添加 threejs 图层对象
|
||||
scene.addLayer(threeJSLayer);
|
||||
|
||||
```
|
||||
|
||||
L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与其他的图层相同。
|
||||
|
||||
## 构造函数 new ThreeLayer
|
||||
|
||||
### onAddMeshes
|
||||
|
||||
该方法接受两个参数 threeScene: THREE.Scene, layer: ThreeLayer
|
||||
|
||||
- threeScene: 这是普通的 threejs 场景对象
|
||||
- layer: 这是 L7 提供的 threeLayer 对象，上面挂载了 threejs 空间适配到地图空间所需要的方法
|
||||
|
||||
## ThreeLayer
|
||||
|
||||
用户新建的图层对象，同时也会在 onAddMesh 方法的第二个参数返回。
|
||||
|
||||
以下是挂载在 ThreeLayer 实例上的适配方法。
|
||||
|
||||
### getModelMatrix(lnglat, altitude, rotation, scale): Matrix
|
||||
|
||||
- lnglat: [number, number] 经纬度
|
||||
- altitude: number = 0 相对高度
|
||||
- rotation: [number, number, number] = [0, 0, 0] 旋转角度
|
||||
- scale: [number, number, number] = [1, 1, 1] 缩放比例
|
||||
|
||||
用户可以通过该方法计算在对应经纬度点位、相对高度、旋转角度和缩放的模型矩阵
|
||||
该方法的返回值是 THREE.Matrix4 类型的矩阵
|
||||
|
||||
### applyObjectLngLat(object, lnglat, altibute): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
- lnglat: ILngLat[number, number] 经纬度
|
||||
- altitude = 0 相对高度
|
||||
|
||||
用户可以通过该方法将 object 对象从当前位置向指定位置移动（地图经纬度坐标）
|
||||
|
||||
### setObjectLngLat(object, lnglat, altibute): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
- lnglat: ILngLat[number, number] 经纬度
|
||||
- altitude = 0 相对高度
|
||||
|
||||
用户可以通过该方法设置 object 对象的位置（地图经纬度坐标）
|
||||
|
||||
### lnglatToCoord(lnglat): [number, number]
|
||||
|
||||
- lnglat: ILngLat[number, number] 经纬度
|
||||
|
||||
用户可以通过该方法将经纬度坐标转化成 threejs 世界坐标
|
||||
|
||||
### adjustMeshToMap(object): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
|
||||
用户在添加 threejs 对象的前可以通过该方法调整 3D 对象的姿态，保证添加对象能正确显示
|
||||
|
||||
✨ 在 threejs 世界坐标中，默认的上方向为 Y 轴正方向，而在地图坐标中，默认的上方向为 Z 轴正方向
|
||||
|
||||
✨ 用户不一定使用该方法调整物体的姿态，也可以自己实现
|
||||
|
||||
### setMeshScale(object, x, y, z): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
- x: number = 1 x 轴方向的缩放比例
|
||||
- y: number = 1 y 轴方向的缩放比例
|
||||
- z: number = 1 z 轴方向的缩放比例
|
||||
|
||||
用户可以通过该方法设置 threejs 对象缩放
|
||||
|
||||
✨ 其实通过设置 threejs 对象的 scale 属性一样能达到同样的效果，但是由于 mapbox 在计算模型矩阵的时候引入了特殊计算，所以无法直接设置 scale 属性进行缩放
|
||||
|
||||
✨ 同样的，可以直接修改 threejs 的 position、rotation 等调整 3D 对象的姿态
|
||||
|
||||
### addAnimateMixer(mixer): void
|
||||
|
||||
- mixer: AnimationMixer threejs 的动画混合器
|
||||
|
||||
用户通过该方法管理加载模型的动画
|
||||
|
||||
## 加载模型
|
||||
|
||||
用户可以使用 threejs 提供的能力加载其支持的任意模型
|
||||
|
||||
### 简单案例
|
||||
|
||||
✨ 以加载 gltf 模型为例
|
||||
|
||||
```javascript
|
||||
// 1、引入加载器
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||
...
|
||||
const threeJSLayer = new ThreeLayer({
|
||||
onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
|
||||
...
|
||||
// 2、构建加载器
|
||||
const loader = new GLTFLoader();
|
||||
// 3、加载模型
|
||||
loader.load('https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
|
||||
(gltf) => {
|
||||
const model = gltf.scene;
|
||||
layer.adjustMeshToMap(model);
|
||||
layer.setMeshScale(model, 1000, 1000, 1000);
|
||||
layer.setObjectLngLat( model, [center.lng, center.lat], 0 );
|
||||
|
||||
// 4、播放模型上绑定的动画
|
||||
const animations = gltf.animations;
|
||||
if (animations && animations.length) {
|
||||
const mixer = new THREE.AnimationMixer(model);
|
||||
const animation = animations[2];
|
||||
const action = mixer.clipAction(animation);
|
||||
action.play();
|
||||
// 5、由 L7 控制模型动画的播放
|
||||
layer.addAnimateMixer(mixer);
|
||||
}
|
||||
})
|
||||
}
|
||||
}).source(data)
|
||||
.animate(true) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层）
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Earth Point
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/earth/point.zh.md`
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
---
|
||||
title: 点图层
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
1、L7 支持允许用户接入第三方的渲染引擎对地图场景进行开发，threejs 作为当前最广泛使用的通用 3D 渲染引擎，L7 将其集成后可以满足
|
||||
用户自定义开发的需求，可以让 L7 覆盖更多的应用场景。
|
||||
|
||||
2、目前 L7Three 模块为了抹平不同地图底图之间的差异，提供了一些兼容方法，如 setMeshScale 方法，通过这些方法用户可以在不同的底图
|
||||
环境中使用同一套代码。
|
||||
|
||||
3、L7 提供的适配方法只负责 threejs 世界坐标到不同地图底图坐标的转化、 gl 上下文的共享以及渲染帧的同步，其余关于 3D 场景内容的搭建
|
||||
与普通 threejs 应用的开发没有任何区别。
|
||||
|
||||
4、L7 本身并没有集成 threejs，所以用于在使用 L7Three 模块的时候需要独立安装 threejs。
|
||||
|
||||
✨ 目前 L7 官方提供的 threejs 兼容是根据 0.115.0 版本进行开发的，使用其他版本 threejs 可能会存在兼容问题
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
// 1、引入对应模块
|
||||
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
|
||||
import * as THREE from 'three';
|
||||
...
|
||||
// 2、注册服务
|
||||
scene.registerRenderService(ThreeRender);
|
||||
...
|
||||
// 3、构建 threejs 图层对象并在其中添加 threejs 构建的网格对象
|
||||
const threeJSLayer = new ThreeLayer({
|
||||
onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
|
||||
threeScene.add(new THREE.AmbientLight(0xffffff));
|
||||
|
||||
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
|
||||
sunlight.position.set(0, 80000000, 100000000);
|
||||
sunlight.matrixWorldNeedsUpdate = true;
|
||||
threeScene.add(sunlight);
|
||||
|
||||
let center = scene.getCenter();
|
||||
|
||||
let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
|
||||
let cubeMaterial = new THREE.MeshNormalMaterial();
|
||||
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
|
||||
|
||||
layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
|
||||
threeScene.add(cube);
|
||||
},
|
||||
})
|
||||
.source(data)
|
||||
.animate(true);
|
||||
|
||||
// 4、添加 threejs 图层对象
|
||||
scene.addLayer(threeJSLayer);
|
||||
|
||||
```
|
||||
|
||||
L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与其他的图层相同。
|
||||
|
||||
## 构造函数 new ThreeLayer
|
||||
|
||||
### onAddMeshes
|
||||
|
||||
该方法接受两个参数 threeScene: THREE.Scene, layer: ThreeLayer
|
||||
|
||||
- threeScene: 这是普通的 threejs 场景对象
|
||||
- layer: 这是 L7 提供的 threeLayer 对象，上面挂载了 threejs 空间适配到地图空间所需要的方法
|
||||
|
||||
## ThreeLayer
|
||||
|
||||
用户新建的图层对象，同时也会在 onAddMesh 方法的第二个参数返回。
|
||||
|
||||
以下是挂载在 ThreeLayer 实例上的适配方法。
|
||||
|
||||
### getModelMatrix(lnglat, altitude, rotation, scale): Matrix
|
||||
|
||||
- lnglat: [number, number] 经纬度
|
||||
- altitude: number = 0 相对高度
|
||||
- rotation: [number, number, number] = [0, 0, 0] 旋转角度
|
||||
- scale: [number, number, number] = [1, 1, 1] 缩放比例
|
||||
|
||||
用户可以通过该方法计算在对应经纬度点位、相对高度、旋转角度和缩放的模型矩阵
|
||||
该方法的返回值是 THREE.Matrix4 类型的矩阵
|
||||
|
||||
### applyObjectLngLat(object, lnglat, altibute): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
- lnglat: ILngLat[number, number] 经纬度
|
||||
- altitude = 0 相对高度
|
||||
|
||||
用户可以通过该方法将 object 对象从当前位置向指定位置移动（地图经纬度坐标）
|
||||
|
||||
### setObjectLngLat(object, lnglat, altibute): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
- lnglat: ILngLat[number, number] 经纬度
|
||||
- altitude = 0 相对高度
|
||||
|
||||
用户可以通过该方法设置 object 对象的位置（地图经纬度坐标）
|
||||
|
||||
### lnglatToCoord(lnglat): [number, number]
|
||||
|
||||
- lnglat: ILngLat[number, number] 经纬度
|
||||
|
||||
用户可以通过该方法将经纬度坐标转化成 threejs 世界坐标
|
||||
|
||||
### adjustMeshToMap(object): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
|
||||
用户在添加 threejs 对象的前可以通过该方法调整 3D 对象的姿态，保证添加对象能正确显示
|
||||
|
||||
✨ 在 threejs 世界坐标中，默认的上方向为 Y 轴正方向，而在地图坐标中，默认的上方向为 Z 轴正方向
|
||||
|
||||
✨ 用户不一定使用该方法调整物体的姿态，也可以自己实现
|
||||
|
||||
### setMeshScale(object, x, y, z): void
|
||||
|
||||
- object: Object3D threejs 对象
|
||||
- x: number = 1 x 轴方向的缩放比例
|
||||
- y: number = 1 y 轴方向的缩放比例
|
||||
- z: number = 1 z 轴方向的缩放比例
|
||||
|
||||
用户可以通过该方法设置 threejs 对象缩放
|
||||
|
||||
✨ 其实通过设置 threejs 对象的 scale 属性一样能达到同样的效果，但是由于 mapbox 在计算模型矩阵的时候引入了特殊计算，所以无法直接设置 scale 属性进行缩放
|
||||
|
||||
✨ 同样的，可以直接修改 threejs 的 position、rotation 等调整 3D 对象的姿态
|
||||
|
||||
### addAnimateMixer(mixer): void
|
||||
|
||||
- mixer: AnimationMixer threejs 的动画混合器
|
||||
|
||||
用户通过该方法管理加载模型的动画
|
||||
|
||||
## 加载模型
|
||||
|
||||
用户可以使用 threejs 提供的能力加载其支持的任意模型
|
||||
|
||||
### 简单案例
|
||||
|
||||
✨ 以加载 gltf 模型为例
|
||||
|
||||
```javascript
|
||||
// 1、引入加载器
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||
...
|
||||
const threeJSLayer = new ThreeLayer({
|
||||
onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
|
||||
...
|
||||
// 2、构建加载器
|
||||
const loader = new GLTFLoader();
|
||||
// 3、加载模型
|
||||
loader.load('https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
|
||||
(gltf) => {
|
||||
const model = gltf.scene;
|
||||
layer.adjustMeshToMap(model);
|
||||
layer.setMeshScale(model, 1000, 1000, 1000);
|
||||
layer.setObjectLngLat( model, [center.lng, center.lat], 0 );
|
||||
|
||||
// 4、播放模型上绑定的动画
|
||||
const animations = gltf.animations;
|
||||
if (animations && animations.length) {
|
||||
const mixer = new THREE.AnimationMixer(model);
|
||||
const animation = animations[2];
|
||||
const action = mixer.clipAction(animation);
|
||||
action.play();
|
||||
// 5、由 L7 控制模型动画的播放
|
||||
layer.addAnimateMixer(mixer);
|
||||
}
|
||||
})
|
||||
}
|
||||
}).source(data)
|
||||
.animate(true) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层）
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import { Scene, EarthLayer, LineLayer } from '@antv/l7';
|
||||
import { Earth } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Earth({})
|
||||
});
|
||||
|
||||
// TODO: 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色
|
||||
scene.setBgColor('#333');
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json'
|
||||
)
|
||||
.then(d => d.text())
|
||||
.then(flyline => {
|
||||
const flydata = JSON.parse(flyline).map(item => {
|
||||
const latlng1 = item.from.split(',').map(e => {
|
||||
return e * 1;
|
||||
});
|
||||
const latlng2 = item.to.split(',').map(e => {
|
||||
return e * 1;
|
||||
});
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
});
|
||||
const flyLine = new LineLayer({ blend: 'normal' })
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(0.5)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
segmentNumber: 60,
|
||||
globalArcHeight: 20
|
||||
});
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
}
|
||||
}
|
||||
)
|
||||
.color('#2E8AE6')
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
radius: 40,
|
||||
globelOtions: {
|
||||
ambientRatio: 0.6, // 环境光
|
||||
diffuseRatio: 0.4, // 漫反射
|
||||
specularRatio: 0.1 // 高光反射
|
||||
}
|
||||
})
|
||||
.animate(true);
|
||||
|
||||
const atomLayer = new EarthLayer()
|
||||
.color('#2E8AE6')
|
||||
.shape('atomSphere')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
|
||||
.style({
|
||||
opacity: 0.7
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(earthlayer);
|
||||
|
||||
scene.addLayer(atomLayer);
|
||||
scene.addLayer(bloomLayer);
|
||||
|
||||
earthlayer.setEarthTime(4.0);
|
||||
});
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "地球模式 - arc3d图层",
|
||||
"en": "Earth Mode - lineLayer/arc3d"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "flyline.js",
|
||||
"title": "飞线",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*ZrpHTKS1_FsAAAAAAAAAAAAAARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: flyline
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 飞线
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
import { Scene, PointLayer, EarthLayer } from '@antv/l7';
|
||||
import { Earth } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Earth({})
|
||||
});
|
||||
|
||||
const d = [
|
||||
{ lng: 121.61865234375, lat: 25.29437116258816 },
|
||||
{ lng: 121.058349609375, lat: 25.015928763367857 },
|
||||
{ lng: 120.7177734375, lat: 24.587090339209634 },
|
||||
{ lng: 120.28930664062499, lat: 23.936054914599815 },
|
||||
{ lng: 120.12451171875, lat: 23.553916518321625 },
|
||||
{ lng: 120.08056640625, lat: 23.120153621695614 },
|
||||
{ lng: 120.234375, lat: 22.867317960075614 },
|
||||
{ lng: 120.43212890625, lat: 22.52270570348246 },
|
||||
{ lng: 120.65185546875, lat: 22.370396344320053 },
|
||||
{ lng: 120.750732421875, lat: 21.922663209325922 },
|
||||
{ lng: 120.948486328125, lat: 22.268764039073968 },
|
||||
{ lng: 121.124267578125, lat: 22.806567100271522 },
|
||||
{ lng: 121.56372070312499, lat: 23.915970370510227 },
|
||||
{ lng: 121.88232421875, lat: 24.557116164309626 },
|
||||
{ lng: 121.95922851562501, lat: 25.075648445630527 },
|
||||
{ lng: 109.97314453125, lat: 20.076570104545173 },
|
||||
{ lng: 108.896484375, lat: 19.663280219987662 },
|
||||
{ lng: 108.61083984375, lat: 18.979025953255267 },
|
||||
{ lng: 108.80859375, lat: 18.47960905583197 },
|
||||
{ lng: 109.599609375, lat: 18.35452552912664 },
|
||||
{ lng: 110.32470703125, lat: 18.771115062337024 },
|
||||
{ lng: 111.005859375, lat: 19.78738018198621 },
|
||||
{ lng: 127.657407, lat: 49.76027 },
|
||||
{ lng: 129.397818, lat: 49.4406 },
|
||||
{ lng: 130.582293, lat: 48.729687 },
|
||||
{ lng: 130.987282, lat: 47.790132 },
|
||||
{ lng: 132.506672, lat: 47.78897 },
|
||||
{ lng: 133.373596, lat: 48.183442 },
|
||||
{ lng: 135.026311, lat: 48.47823 },
|
||||
{ lng: 134.500814, lat: 47.57844 },
|
||||
{ lng: 134.112362, lat: 47.212467 },
|
||||
{ lng: 133.769644, lat: 46.116927 },
|
||||
{ lng: 133.097127, lat: 45.144066 },
|
||||
{ lng: 131.883454, lat: 45.321162 },
|
||||
{ lng: 131.025212, lat: 44.967953 },
|
||||
{ lng: 131.288555, lat: 44.11152 },
|
||||
{ lng: 131.144688, lat: 42.92999 },
|
||||
{ lng: 130.633866, lat: 42.903015 },
|
||||
{ lng: 130.640016, lat: 42.395009 },
|
||||
{ lng: 129.994267, lat: 42.985387 },
|
||||
{ lng: 129.596669, lat: 42.424982 },
|
||||
{ lng: 128.052215, lat: 41.994285 },
|
||||
{ lng: 128.208433, lat: 41.466772 },
|
||||
{ lng: 127.343783, lat: 41.503152 },
|
||||
{ lng: 126.869083, lat: 41.816569 },
|
||||
{ lng: 126.182045, lat: 41.107336 },
|
||||
{ lng: 125.079942, lat: 40.569824 },
|
||||
{ lng: 124.265625, lat: 39.928493 },
|
||||
{ lng: 122.86757, lat: 39.637788 },
|
||||
{ lng: 122.131388, lat: 39.170452 },
|
||||
{ lng: 121.054554, lat: 38.897471 },
|
||||
{ lng: 121.585995, lat: 39.360854 },
|
||||
{ lng: 121.376757, lat: 39.750261 },
|
||||
{ lng: 122.168595, lat: 40.422443 },
|
||||
{ lng: 121.640359, lat: 40.94639 },
|
||||
{ lng: 120.768629, lat: 40.593388 },
|
||||
{ lng: 119.639602, lat: 39.898056 },
|
||||
{ lng: 119.023464, lat: 39.252333 },
|
||||
{ lng: 118.042749, lat: 39.204274 },
|
||||
{ lng: 117.532702, lat: 38.737636 },
|
||||
{ lng: 118.059699, lat: 38.061476 },
|
||||
{ lng: 118.87815, lat: 37.897325 },
|
||||
{ lng: 118.911636, lat: 37.448464 },
|
||||
{ lng: 119.702802, lat: 37.156389 },
|
||||
{ lng: 120.823457, lat: 37.870428 },
|
||||
{ lng: 121.711259, lat: 37.481123 },
|
||||
{ lng: 122.357937, lat: 37.454484 },
|
||||
{ lng: 122.519995, lat: 36.930614 },
|
||||
{ lng: 121.104164, lat: 36.651329 },
|
||||
{ lng: 120.637009, lat: 36.11144 },
|
||||
{ lng: 119.664562, lat: 35.609791 },
|
||||
{ lng: 119.151208, lat: 34.909859 },
|
||||
{ lng: 120.227525, lat: 34.360332 },
|
||||
{ lng: 120.620369, lat: 33.376723 },
|
||||
{ lng: 121.229014, lat: 32.460319 },
|
||||
{ lng: 121.908146, lat: 31.692174 },
|
||||
{ lng: 121.891919, lat: 30.949352 },
|
||||
{ lng: 121.264257, lat: 30.676267 },
|
||||
{ lng: 121.503519, lat: 30.142915 },
|
||||
{ lng: 122.092114, lat: 29.83252 },
|
||||
{ lng: 121.938428, lat: 29.018022 },
|
||||
{ lng: 121.684439, lat: 28.225513 },
|
||||
{ lng: 121.125661, lat: 28.135673 },
|
||||
{ lng: 120.395473, lat: 27.053207 },
|
||||
{ lng: 119.585497, lat: 25.740781 },
|
||||
{ lng: 118.656871, lat: 24.547391 },
|
||||
{ lng: 117.281606, lat: 23.624501 },
|
||||
{ lng: 115.890735, lat: 22.782873 },
|
||||
{ lng: 114.763827, lat: 22.668074 },
|
||||
{ lng: 114.152547, lat: 22.22376 },
|
||||
{ lng: 113.80678, lat: 22.54834 },
|
||||
{ lng: 113.241078, lat: 22.051367 },
|
||||
{ lng: 111.843592, lat: 21.550494 },
|
||||
{ lng: 110.785466, lat: 21.397144 },
|
||||
{ lng: 110.444039, lat: 20.341033 },
|
||||
{ lng: 109.889861, lat: 20.282457 },
|
||||
{ lng: 109.627655, lat: 21.008227 },
|
||||
{ lng: 109.864488, lat: 21.395051 },
|
||||
{ lng: 108.522813, lat: 21.715212 },
|
||||
{ lng: 108.05018, lat: 21.55238 },
|
||||
{ lng: 107.04342, lat: 21.811899 },
|
||||
{ lng: 106.567273, lat: 22.218205 },
|
||||
{ lng: 106.725403, lat: 22.794268 },
|
||||
{ lng: 105.811247, lat: 22.976892 },
|
||||
{ lng: 105.329209, lat: 23.352063 },
|
||||
{ lng: 104.476858, lat: 22.81915 },
|
||||
{ lng: 103.504515, lat: 22.703757 },
|
||||
{ lng: 102.706992, lat: 22.708795 },
|
||||
{ lng: 102.170436, lat: 22.464753 },
|
||||
{ lng: 101.652018, lat: 22.318199 },
|
||||
{ lng: 101.80312, lat: 21.174367 },
|
||||
{ lng: 101.270026, lat: 21.201652 },
|
||||
{ lng: 101.180005, lat: 21.436573 },
|
||||
{ lng: 101.150033, lat: 21.849984 },
|
||||
{ lng: 100.416538, lat: 21.558839 },
|
||||
{ lng: 99.983489, lat: 21.742937 },
|
||||
{ lng: 99.240899, lat: 22.118314 },
|
||||
{ lng: 99.531992, lat: 22.949039 },
|
||||
{ lng: 98.898749, lat: 23.142722 },
|
||||
{ lng: 98.660262, lat: 24.063286 },
|
||||
{ lng: 97.60472, lat: 23.897405 },
|
||||
{ lng: 97.724609, lat: 25.083637 },
|
||||
{ lng: 98.671838, lat: 25.918703 },
|
||||
{ lng: 98.712094, lat: 26.743536 },
|
||||
{ lng: 98.68269, lat: 27.508812 },
|
||||
{ lng: 98.246231, lat: 27.747221 },
|
||||
{ lng: 97.911988, lat: 28.335945 },
|
||||
{ lng: 97.327114, lat: 28.261583 },
|
||||
{ lng: 96.248833, lat: 28.411031 },
|
||||
{ lng: 96.586591, lat: 28.83098 },
|
||||
{ lng: 96.117679, lat: 29.452802 },
|
||||
{ lng: 95.404802, lat: 29.031717 },
|
||||
{ lng: 94.56599, lat: 29.277438 },
|
||||
{ lng: 93.413348, lat: 28.640629 },
|
||||
{ lng: 92.503119, lat: 27.896876 },
|
||||
{ lng: 91.696657, lat: 27.771742 },
|
||||
{ lng: 91.258854, lat: 28.040614 },
|
||||
{ lng: 90.730514, lat: 28.064954 },
|
||||
{ lng: 90.015829, lat: 28.296439 },
|
||||
{ lng: 89.47581, lat: 28.042759 },
|
||||
{ lng: 88.814248, lat: 27.299316 },
|
||||
{ lng: 88.730326, lat: 28.086865 },
|
||||
{ lng: 88.120441, lat: 27.876542 },
|
||||
{ lng: 86.954517, lat: 27.974262 },
|
||||
{ lng: 85.82332, lat: 28.203576 },
|
||||
{ lng: 85.011638, lat: 28.642774 },
|
||||
{ lng: 84.23458, lat: 28.839894 },
|
||||
{ lng: 83.898993, lat: 29.320226 },
|
||||
{ lng: 83.337115, lat: 29.463732 },
|
||||
{ lng: 82.327513, lat: 30.115268 },
|
||||
{ lng: 81.525804, lat: 30.422717 },
|
||||
{ lng: 81.111256, lat: 30.183481 },
|
||||
{ lng: 79.721367, lat: 30.882715 },
|
||||
{ lng: 78.738894, lat: 31.515906 },
|
||||
{ lng: 78.458446, lat: 32.618164 },
|
||||
{ lng: 79.176129, lat: 32.48378 },
|
||||
{ lng: 79.208892, lat: 32.994395 },
|
||||
{ lng: 78.811086, lat: 33.506198 },
|
||||
{ lng: 78.912269, lat: 34.321936 },
|
||||
{ lng: 77.837451, lat: 35.49401 },
|
||||
{ lng: 76.192848, lat: 35.898403 },
|
||||
{ lng: 75.896897, lat: 36.666806 },
|
||||
{ lng: 75.158028, lat: 37.133031 },
|
||||
{ lng: 74.980002, lat: 37.41999 },
|
||||
{ lng: 74.829986, lat: 37.990007 },
|
||||
{ lng: 74.864816, lat: 38.378846 },
|
||||
{ lng: 74.257514, lat: 38.606507 },
|
||||
{ lng: 73.928852, lat: 38.505815 },
|
||||
{ lng: 73.675379, lat: 39.431237 },
|
||||
{ lng: 73.960013, lat: 39.660008 },
|
||||
{ lng: 73.822244, lat: 39.893973 },
|
||||
{ lng: 74.776862, lat: 40.366425 },
|
||||
{ lng: 75.467828, lat: 40.562072 },
|
||||
{ lng: 76.526368, lat: 40.427946 },
|
||||
{ lng: 76.904484, lat: 41.066486 },
|
||||
{ lng: 78.187197, lat: 41.185316 },
|
||||
{ lng: 78.543661, lat: 41.582243 },
|
||||
{ lng: 80.11943, lat: 42.123941 },
|
||||
{ lng: 80.25999, lat: 42.349999 },
|
||||
{ lng: 80.18015, lat: 42.920068 },
|
||||
{ lng: 80.866206, lat: 43.180362 },
|
||||
{ lng: 79.966106, lat: 44.917517 },
|
||||
{ lng: 81.947071, lat: 45.317027 },
|
||||
{ lng: 82.458926, lat: 45.53965 },
|
||||
{ lng: 83.180484, lat: 47.330031 },
|
||||
{ lng: 85.16429, lat: 47.000956 },
|
||||
{ lng: 85.720484, lat: 47.452969 },
|
||||
{ lng: 85.768233, lat: 48.455751 },
|
||||
{ lng: 86.598776, lat: 48.549182 },
|
||||
{ lng: 87.35997, lat: 49.214981 },
|
||||
{ lng: 87.751264, lat: 49.297198 },
|
||||
{ lng: 88.013832, lat: 48.599463 },
|
||||
{ lng: 88.854298, lat: 48.069082 },
|
||||
{ lng: 90.280826, lat: 47.693549 },
|
||||
{ lng: 90.970809, lat: 46.888146 },
|
||||
{ lng: 90.585768, lat: 45.719716 },
|
||||
{ lng: 90.94554, lat: 45.286073 },
|
||||
{ lng: 92.133891, lat: 45.115076 },
|
||||
{ lng: 93.480734, lat: 44.975472 },
|
||||
{ lng: 94.688929, lat: 44.352332 },
|
||||
{ lng: 95.306875, lat: 44.241331 },
|
||||
{ lng: 95.762455, lat: 43.319449 },
|
||||
{ lng: 96.349396, lat: 42.725635 },
|
||||
{ lng: 97.451757, lat: 42.74889 },
|
||||
{ lng: 99.515817, lat: 42.524691 },
|
||||
{ lng: 100.845866, lat: 42.663804 },
|
||||
{ lng: 101.83304, lat: 42.514873 },
|
||||
{ lng: 103.312278, lat: 41.907468 },
|
||||
{ lng: 104.522282, lat: 41.908347 },
|
||||
{ lng: 104.964994, lat: 41.59741 },
|
||||
{ lng: 106.129316, lat: 42.134328 },
|
||||
{ lng: 107.744773, lat: 42.481516 },
|
||||
{ lng: 109.243596, lat: 42.519446 },
|
||||
{ lng: 110.412103, lat: 42.871234 },
|
||||
{ lng: 111.129682, lat: 43.406834 },
|
||||
{ lng: 111.829588, lat: 43.743118 },
|
||||
{ lng: 111.667737, lat: 44.073176 },
|
||||
{ lng: 111.348377, lat: 44.457442 },
|
||||
{ lng: 111.873306, lat: 45.102079 },
|
||||
{ lng: 112.436062, lat: 45.011646 },
|
||||
{ lng: 113.463907, lat: 44.808893 },
|
||||
{ lng: 114.460332, lat: 45.339817 },
|
||||
{ lng: 115.985096, lat: 45.727235 },
|
||||
{ lng: 116.717868, lat: 46.388202 },
|
||||
{ lng: 117.421701, lat: 46.672733 },
|
||||
{ lng: 118.874326, lat: 46.805412 },
|
||||
{ lng: 119.66327, lat: 46.69268 },
|
||||
{ lng: 119.772824, lat: 47.048059 },
|
||||
{ lng: 118.866574, lat: 47.74706 },
|
||||
{ lng: 118.064143, lat: 48.06673 },
|
||||
{ lng: 117.295507, lat: 47.697709 },
|
||||
{ lng: 116.308953, lat: 47.85341 },
|
||||
{ lng: 115.742837, lat: 47.726545 },
|
||||
{ lng: 115.485282, lat: 48.135383 },
|
||||
{ lng: 116.191802, lat: 49.134598 },
|
||||
{ lng: 116.678801, lat: 49.888531 },
|
||||
{ lng: 117.879244, lat: 49.510983 },
|
||||
{ lng: 119.288461, lat: 50.142883 },
|
||||
{ lng: 119.279366, lat: 50.582908 },
|
||||
{ lng: 120.18205, lat: 51.643566 },
|
||||
{ lng: 120.738191, lat: 51.964115 },
|
||||
{ lng: 120.725789, lat: 52.516226 },
|
||||
{ lng: 120.177089, lat: 52.753886 },
|
||||
{ lng: 121.003085, lat: 53.251401 },
|
||||
{ lng: 122.245748, lat: 53.431726 },
|
||||
{ lng: 123.571507, lat: 53.458804 },
|
||||
{ lng: 125.068211, lat: 53.161045 },
|
||||
{ lng: 125.946349, lat: 52.792799 },
|
||||
{ lng: 126.564399, lat: 51.784255 },
|
||||
{ lng: 126.939157, lat: 51.353894 },
|
||||
{ lng: 127.287456, lat: 50.739797 },
|
||||
{ lng: 127.657407, lat: 49.76027 }
|
||||
];
|
||||
|
||||
const pointlayer = new PointLayer()
|
||||
.source(
|
||||
d,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('cylinder')
|
||||
.color('#f00')
|
||||
.size('', () => [ 1, 1, 10 ])
|
||||
.active(true);
|
||||
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
}
|
||||
}
|
||||
)
|
||||
.color('#2E8AE6')
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
radius: 40,
|
||||
globelOtions: {
|
||||
ambientRatio: 0.6, // 环境光
|
||||
diffuseRatio: 0.4, // 漫反射
|
||||
specularRatio: 0.1 // 高光反射
|
||||
}
|
||||
})
|
||||
.animate(true);
|
||||
|
||||
const atomLayer = new EarthLayer()
|
||||
.color('#2E8AE6')
|
||||
.shape('atomSphere')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
|
||||
.style({
|
||||
opacity: 0.6
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(earthlayer);
|
||||
scene.addLayer(pointlayer);
|
||||
|
||||
scene.addLayer(atomLayer);
|
||||
scene.addLayer(bloomLayer);
|
||||
|
||||
earthlayer.setEarthTime(4.0);
|
||||
});
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "地球模式 - 点图层",
|
||||
"en": "Earth Mode - pointLayer"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "point.js",
|
||||
"title": "点图层",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*R5uPS4SIMi0AAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "cylinder.js",
|
||||
"title": "圆柱图层",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*u2iWTrhJnL0AAAAAAAAAAAAAARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
import { Scene, PointLayer, EarthLayer } from '@antv/l7';
|
||||
import { Earth } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Earth({})
|
||||
});
|
||||
|
||||
const d = [
|
||||
{ lng: 121.61865234375, lat: 25.29437116258816 },
|
||||
{ lng: 121.058349609375, lat: 25.015928763367857 },
|
||||
{ lng: 120.7177734375, lat: 24.587090339209634 },
|
||||
{ lng: 120.28930664062499, lat: 23.936054914599815 },
|
||||
{ lng: 120.12451171875, lat: 23.553916518321625 },
|
||||
{ lng: 120.08056640625, lat: 23.120153621695614 },
|
||||
{ lng: 120.234375, lat: 22.867317960075614 },
|
||||
{ lng: 120.43212890625, lat: 22.52270570348246 },
|
||||
{ lng: 120.65185546875, lat: 22.370396344320053 },
|
||||
{ lng: 120.750732421875, lat: 21.922663209325922 },
|
||||
{ lng: 120.948486328125, lat: 22.268764039073968 },
|
||||
{ lng: 121.124267578125, lat: 22.806567100271522 },
|
||||
{ lng: 121.56372070312499, lat: 23.915970370510227 },
|
||||
{ lng: 121.88232421875, lat: 24.557116164309626 },
|
||||
{ lng: 121.95922851562501, lat: 25.075648445630527 },
|
||||
{ lng: 109.97314453125, lat: 20.076570104545173 },
|
||||
{ lng: 108.896484375, lat: 19.663280219987662 },
|
||||
{ lng: 108.61083984375, lat: 18.979025953255267 },
|
||||
{ lng: 108.80859375, lat: 18.47960905583197 },
|
||||
{ lng: 109.599609375, lat: 18.35452552912664 },
|
||||
{ lng: 110.32470703125, lat: 18.771115062337024 },
|
||||
{ lng: 111.005859375, lat: 19.78738018198621 },
|
||||
{ lng: 127.657407, lat: 49.76027 },
|
||||
{ lng: 129.397818, lat: 49.4406 },
|
||||
{ lng: 130.582293, lat: 48.729687 },
|
||||
{ lng: 130.987282, lat: 47.790132 },
|
||||
{ lng: 132.506672, lat: 47.78897 },
|
||||
{ lng: 133.373596, lat: 48.183442 },
|
||||
{ lng: 135.026311, lat: 48.47823 },
|
||||
{ lng: 134.500814, lat: 47.57844 },
|
||||
{ lng: 134.112362, lat: 47.212467 },
|
||||
{ lng: 133.769644, lat: 46.116927 },
|
||||
{ lng: 133.097127, lat: 45.144066 },
|
||||
{ lng: 131.883454, lat: 45.321162 },
|
||||
{ lng: 131.025212, lat: 44.967953 },
|
||||
{ lng: 131.288555, lat: 44.11152 },
|
||||
{ lng: 131.144688, lat: 42.92999 },
|
||||
{ lng: 130.633866, lat: 42.903015 },
|
||||
{ lng: 130.640016, lat: 42.395009 },
|
||||
{ lng: 129.994267, lat: 42.985387 },
|
||||
{ lng: 129.596669, lat: 42.424982 },
|
||||
{ lng: 128.052215, lat: 41.994285 },
|
||||
{ lng: 128.208433, lat: 41.466772 },
|
||||
{ lng: 127.343783, lat: 41.503152 },
|
||||
{ lng: 126.869083, lat: 41.816569 },
|
||||
{ lng: 126.182045, lat: 41.107336 },
|
||||
{ lng: 125.079942, lat: 40.569824 },
|
||||
{ lng: 124.265625, lat: 39.928493 },
|
||||
{ lng: 122.86757, lat: 39.637788 },
|
||||
{ lng: 122.131388, lat: 39.170452 },
|
||||
{ lng: 121.054554, lat: 38.897471 },
|
||||
{ lng: 121.585995, lat: 39.360854 },
|
||||
{ lng: 121.376757, lat: 39.750261 },
|
||||
{ lng: 122.168595, lat: 40.422443 },
|
||||
{ lng: 121.640359, lat: 40.94639 },
|
||||
{ lng: 120.768629, lat: 40.593388 },
|
||||
{ lng: 119.639602, lat: 39.898056 },
|
||||
{ lng: 119.023464, lat: 39.252333 },
|
||||
{ lng: 118.042749, lat: 39.204274 },
|
||||
{ lng: 117.532702, lat: 38.737636 },
|
||||
{ lng: 118.059699, lat: 38.061476 },
|
||||
{ lng: 118.87815, lat: 37.897325 },
|
||||
{ lng: 118.911636, lat: 37.448464 },
|
||||
{ lng: 119.702802, lat: 37.156389 },
|
||||
{ lng: 120.823457, lat: 37.870428 },
|
||||
{ lng: 121.711259, lat: 37.481123 },
|
||||
{ lng: 122.357937, lat: 37.454484 },
|
||||
{ lng: 122.519995, lat: 36.930614 },
|
||||
{ lng: 121.104164, lat: 36.651329 },
|
||||
{ lng: 120.637009, lat: 36.11144 },
|
||||
{ lng: 119.664562, lat: 35.609791 },
|
||||
{ lng: 119.151208, lat: 34.909859 },
|
||||
{ lng: 120.227525, lat: 34.360332 },
|
||||
{ lng: 120.620369, lat: 33.376723 },
|
||||
{ lng: 121.229014, lat: 32.460319 },
|
||||
{ lng: 121.908146, lat: 31.692174 },
|
||||
{ lng: 121.891919, lat: 30.949352 },
|
||||
{ lng: 121.264257, lat: 30.676267 },
|
||||
{ lng: 121.503519, lat: 30.142915 },
|
||||
{ lng: 122.092114, lat: 29.83252 },
|
||||
{ lng: 121.938428, lat: 29.018022 },
|
||||
{ lng: 121.684439, lat: 28.225513 },
|
||||
{ lng: 121.125661, lat: 28.135673 },
|
||||
{ lng: 120.395473, lat: 27.053207 },
|
||||
{ lng: 119.585497, lat: 25.740781 },
|
||||
{ lng: 118.656871, lat: 24.547391 },
|
||||
{ lng: 117.281606, lat: 23.624501 },
|
||||
{ lng: 115.890735, lat: 22.782873 },
|
||||
{ lng: 114.763827, lat: 22.668074 },
|
||||
{ lng: 114.152547, lat: 22.22376 },
|
||||
{ lng: 113.80678, lat: 22.54834 },
|
||||
{ lng: 113.241078, lat: 22.051367 },
|
||||
{ lng: 111.843592, lat: 21.550494 },
|
||||
{ lng: 110.785466, lat: 21.397144 },
|
||||
{ lng: 110.444039, lat: 20.341033 },
|
||||
{ lng: 109.889861, lat: 20.282457 },
|
||||
{ lng: 109.627655, lat: 21.008227 },
|
||||
{ lng: 109.864488, lat: 21.395051 },
|
||||
{ lng: 108.522813, lat: 21.715212 },
|
||||
{ lng: 108.05018, lat: 21.55238 },
|
||||
{ lng: 107.04342, lat: 21.811899 },
|
||||
{ lng: 106.567273, lat: 22.218205 },
|
||||
{ lng: 106.725403, lat: 22.794268 },
|
||||
{ lng: 105.811247, lat: 22.976892 },
|
||||
{ lng: 105.329209, lat: 23.352063 },
|
||||
{ lng: 104.476858, lat: 22.81915 },
|
||||
{ lng: 103.504515, lat: 22.703757 },
|
||||
{ lng: 102.706992, lat: 22.708795 },
|
||||
{ lng: 102.170436, lat: 22.464753 },
|
||||
{ lng: 101.652018, lat: 22.318199 },
|
||||
{ lng: 101.80312, lat: 21.174367 },
|
||||
{ lng: 101.270026, lat: 21.201652 },
|
||||
{ lng: 101.180005, lat: 21.436573 },
|
||||
{ lng: 101.150033, lat: 21.849984 },
|
||||
{ lng: 100.416538, lat: 21.558839 },
|
||||
{ lng: 99.983489, lat: 21.742937 },
|
||||
{ lng: 99.240899, lat: 22.118314 },
|
||||
{ lng: 99.531992, lat: 22.949039 },
|
||||
{ lng: 98.898749, lat: 23.142722 },
|
||||
{ lng: 98.660262, lat: 24.063286 },
|
||||
{ lng: 97.60472, lat: 23.897405 },
|
||||
{ lng: 97.724609, lat: 25.083637 },
|
||||
{ lng: 98.671838, lat: 25.918703 },
|
||||
{ lng: 98.712094, lat: 26.743536 },
|
||||
{ lng: 98.68269, lat: 27.508812 },
|
||||
{ lng: 98.246231, lat: 27.747221 },
|
||||
{ lng: 97.911988, lat: 28.335945 },
|
||||
{ lng: 97.327114, lat: 28.261583 },
|
||||
{ lng: 96.248833, lat: 28.411031 },
|
||||
{ lng: 96.586591, lat: 28.83098 },
|
||||
{ lng: 96.117679, lat: 29.452802 },
|
||||
{ lng: 95.404802, lat: 29.031717 },
|
||||
{ lng: 94.56599, lat: 29.277438 },
|
||||
{ lng: 93.413348, lat: 28.640629 },
|
||||
{ lng: 92.503119, lat: 27.896876 },
|
||||
{ lng: 91.696657, lat: 27.771742 },
|
||||
{ lng: 91.258854, lat: 28.040614 },
|
||||
{ lng: 90.730514, lat: 28.064954 },
|
||||
{ lng: 90.015829, lat: 28.296439 },
|
||||
{ lng: 89.47581, lat: 28.042759 },
|
||||
{ lng: 88.814248, lat: 27.299316 },
|
||||
{ lng: 88.730326, lat: 28.086865 },
|
||||
{ lng: 88.120441, lat: 27.876542 },
|
||||
{ lng: 86.954517, lat: 27.974262 },
|
||||
{ lng: 85.82332, lat: 28.203576 },
|
||||
{ lng: 85.011638, lat: 28.642774 },
|
||||
{ lng: 84.23458, lat: 28.839894 },
|
||||
{ lng: 83.898993, lat: 29.320226 },
|
||||
{ lng: 83.337115, lat: 29.463732 },
|
||||
{ lng: 82.327513, lat: 30.115268 },
|
||||
{ lng: 81.525804, lat: 30.422717 },
|
||||
{ lng: 81.111256, lat: 30.183481 },
|
||||
{ lng: 79.721367, lat: 30.882715 },
|
||||
{ lng: 78.738894, lat: 31.515906 },
|
||||
{ lng: 78.458446, lat: 32.618164 },
|
||||
{ lng: 79.176129, lat: 32.48378 },
|
||||
{ lng: 79.208892, lat: 32.994395 },
|
||||
{ lng: 78.811086, lat: 33.506198 },
|
||||
{ lng: 78.912269, lat: 34.321936 },
|
||||
{ lng: 77.837451, lat: 35.49401 },
|
||||
{ lng: 76.192848, lat: 35.898403 },
|
||||
{ lng: 75.896897, lat: 36.666806 },
|
||||
{ lng: 75.158028, lat: 37.133031 },
|
||||
{ lng: 74.980002, lat: 37.41999 },
|
||||
{ lng: 74.829986, lat: 37.990007 },
|
||||
{ lng: 74.864816, lat: 38.378846 },
|
||||
{ lng: 74.257514, lat: 38.606507 },
|
||||
{ lng: 73.928852, lat: 38.505815 },
|
||||
{ lng: 73.675379, lat: 39.431237 },
|
||||
{ lng: 73.960013, lat: 39.660008 },
|
||||
{ lng: 73.822244, lat: 39.893973 },
|
||||
{ lng: 74.776862, lat: 40.366425 },
|
||||
{ lng: 75.467828, lat: 40.562072 },
|
||||
{ lng: 76.526368, lat: 40.427946 },
|
||||
{ lng: 76.904484, lat: 41.066486 },
|
||||
{ lng: 78.187197, lat: 41.185316 },
|
||||
{ lng: 78.543661, lat: 41.582243 },
|
||||
{ lng: 80.11943, lat: 42.123941 },
|
||||
{ lng: 80.25999, lat: 42.349999 },
|
||||
{ lng: 80.18015, lat: 42.920068 },
|
||||
{ lng: 80.866206, lat: 43.180362 },
|
||||
{ lng: 79.966106, lat: 44.917517 },
|
||||
{ lng: 81.947071, lat: 45.317027 },
|
||||
{ lng: 82.458926, lat: 45.53965 },
|
||||
{ lng: 83.180484, lat: 47.330031 },
|
||||
{ lng: 85.16429, lat: 47.000956 },
|
||||
{ lng: 85.720484, lat: 47.452969 },
|
||||
{ lng: 85.768233, lat: 48.455751 },
|
||||
{ lng: 86.598776, lat: 48.549182 },
|
||||
{ lng: 87.35997, lat: 49.214981 },
|
||||
{ lng: 87.751264, lat: 49.297198 },
|
||||
{ lng: 88.013832, lat: 48.599463 },
|
||||
{ lng: 88.854298, lat: 48.069082 },
|
||||
{ lng: 90.280826, lat: 47.693549 },
|
||||
{ lng: 90.970809, lat: 46.888146 },
|
||||
{ lng: 90.585768, lat: 45.719716 },
|
||||
{ lng: 90.94554, lat: 45.286073 },
|
||||
{ lng: 92.133891, lat: 45.115076 },
|
||||
{ lng: 93.480734, lat: 44.975472 },
|
||||
{ lng: 94.688929, lat: 44.352332 },
|
||||
{ lng: 95.306875, lat: 44.241331 },
|
||||
{ lng: 95.762455, lat: 43.319449 },
|
||||
{ lng: 96.349396, lat: 42.725635 },
|
||||
{ lng: 97.451757, lat: 42.74889 },
|
||||
{ lng: 99.515817, lat: 42.524691 },
|
||||
{ lng: 100.845866, lat: 42.663804 },
|
||||
{ lng: 101.83304, lat: 42.514873 },
|
||||
{ lng: 103.312278, lat: 41.907468 },
|
||||
{ lng: 104.522282, lat: 41.908347 },
|
||||
{ lng: 104.964994, lat: 41.59741 },
|
||||
{ lng: 106.129316, lat: 42.134328 },
|
||||
{ lng: 107.744773, lat: 42.481516 },
|
||||
{ lng: 109.243596, lat: 42.519446 },
|
||||
{ lng: 110.412103, lat: 42.871234 },
|
||||
{ lng: 111.129682, lat: 43.406834 },
|
||||
{ lng: 111.829588, lat: 43.743118 },
|
||||
{ lng: 111.667737, lat: 44.073176 },
|
||||
{ lng: 111.348377, lat: 44.457442 },
|
||||
{ lng: 111.873306, lat: 45.102079 },
|
||||
{ lng: 112.436062, lat: 45.011646 },
|
||||
{ lng: 113.463907, lat: 44.808893 },
|
||||
{ lng: 114.460332, lat: 45.339817 },
|
||||
{ lng: 115.985096, lat: 45.727235 },
|
||||
{ lng: 116.717868, lat: 46.388202 },
|
||||
{ lng: 117.421701, lat: 46.672733 },
|
||||
{ lng: 118.874326, lat: 46.805412 },
|
||||
{ lng: 119.66327, lat: 46.69268 },
|
||||
{ lng: 119.772824, lat: 47.048059 },
|
||||
{ lng: 118.866574, lat: 47.74706 },
|
||||
{ lng: 118.064143, lat: 48.06673 },
|
||||
{ lng: 117.295507, lat: 47.697709 },
|
||||
{ lng: 116.308953, lat: 47.85341 },
|
||||
{ lng: 115.742837, lat: 47.726545 },
|
||||
{ lng: 115.485282, lat: 48.135383 },
|
||||
{ lng: 116.191802, lat: 49.134598 },
|
||||
{ lng: 116.678801, lat: 49.888531 },
|
||||
{ lng: 117.879244, lat: 49.510983 },
|
||||
{ lng: 119.288461, lat: 50.142883 },
|
||||
{ lng: 119.279366, lat: 50.582908 },
|
||||
{ lng: 120.18205, lat: 51.643566 },
|
||||
{ lng: 120.738191, lat: 51.964115 },
|
||||
{ lng: 120.725789, lat: 52.516226 },
|
||||
{ lng: 120.177089, lat: 52.753886 },
|
||||
{ lng: 121.003085, lat: 53.251401 },
|
||||
{ lng: 122.245748, lat: 53.431726 },
|
||||
{ lng: 123.571507, lat: 53.458804 },
|
||||
{ lng: 125.068211, lat: 53.161045 },
|
||||
{ lng: 125.946349, lat: 52.792799 },
|
||||
{ lng: 126.564399, lat: 51.784255 },
|
||||
{ lng: 126.939157, lat: 51.353894 },
|
||||
{ lng: 127.287456, lat: 50.739797 },
|
||||
{ lng: 127.657407, lat: 49.76027 }
|
||||
];
|
||||
|
||||
const pointlayer = new PointLayer()
|
||||
.source(
|
||||
d,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('circle')
|
||||
.color('#f00')
|
||||
.size(10)
|
||||
.active(true);
|
||||
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
}
|
||||
}
|
||||
)
|
||||
.color('#2E8AE6')
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
radius: 40,
|
||||
globelOtions: {
|
||||
ambientRatio: 0.6, // 环境光
|
||||
diffuseRatio: 0.4, // 漫反射
|
||||
specularRatio: 0.1 // 高光反射
|
||||
}
|
||||
})
|
||||
.animate(true);
|
||||
|
||||
const atomLayer = new EarthLayer()
|
||||
.color('#2E8AE6')
|
||||
.shape('atomSphere')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
|
||||
.style({
|
||||
opacity: 0.6
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(earthlayer);
|
||||
scene.addLayer(pointlayer);
|
||||
|
||||
scene.addLayer(atomLayer);
|
||||
scene.addLayer(bloomLayer);
|
||||
|
||||
earthlayer.setEarthTime(4.0);
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: PointLayer
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 点图层
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 111.4453125, 32.84267363195431 ],
|
||||
pitch: 45,
|
||||
rotation: 30,
|
||||
zoom: 12
|
||||
})
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.registerRenderService(ThreeRender);
|
||||
|
||||
const threeJSLayer = new ThreeLayer({
|
||||
enableMultiPassRenderer: false,
|
||||
onAddMeshes: (threeScene, layer) => {
|
||||
threeScene.add(new THREE.AmbientLight(0xffffff));
|
||||
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
|
||||
sunlight.position.set(0, 80000000, 100000000);
|
||||
sunlight.matrixWorldNeedsUpdate = true;
|
||||
threeScene.add(sunlight);
|
||||
|
||||
const center = scene.getCenter();
|
||||
|
||||
const cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
|
||||
const cubeMaterial = new THREE.MeshNormalMaterial();
|
||||
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
|
||||
layer.setObjectLngLat(cube, [ center.lng + 0.05, center.lat ], 0);
|
||||
threeScene.add(cube);
|
||||
|
||||
// 使用 Three.js glTFLoader 加载模型
|
||||
const loader = new GLTFLoader();
|
||||
loader.load(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
|
||||
gltf => {
|
||||
// 根据 GeoJSON 数据放置模型
|
||||
layer.getSource().data.dataArray.forEach(({ coordinates }) => {
|
||||
const gltfScene = gltf.scene;
|
||||
|
||||
layer.adjustMeshToMap(gltfScene);
|
||||
// gltfScene.scale.set(1000, 1000, 1000)
|
||||
layer.setMeshScale(gltfScene, 1000, 1000, 1000);
|
||||
|
||||
layer.setObjectLngLat(
|
||||
gltfScene,
|
||||
[ coordinates[0] + 0.02, coordinates[1] ],
|
||||
0
|
||||
);
|
||||
|
||||
const animations = gltf.animations;
|
||||
if (animations && animations.length) {
|
||||
const mixer = new THREE.AnimationMixer(gltfScene);
|
||||
|
||||
const animation = animations[2];
|
||||
|
||||
const action = mixer.clipAction(animation);
|
||||
|
||||
action.play();
|
||||
layer.addAnimateMixer(mixer);
|
||||
}
|
||||
// layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0)
|
||||
let t = 0;
|
||||
setInterval(() => {
|
||||
t += 0.01;
|
||||
layer.setObjectLngLat(
|
||||
gltfScene,
|
||||
[ center.lng, center.lat + Math.sin(t) * 0.1 ],
|
||||
0
|
||||
);
|
||||
}, 16);
|
||||
|
||||
// 向场景中添加模型
|
||||
threeScene.add(gltfScene);
|
||||
});
|
||||
// 重绘图层
|
||||
layer.render();
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [ 111.4453125, 32.84267363195431 ]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
.animate(true);
|
||||
scene.addLayer(threeJSLayer);
|
||||
});
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||
import { animate, easeInOut } from 'popmotion';
|
||||
|
||||
let isTravel = false;
|
||||
|
||||
function travel(
|
||||
mesh,
|
||||
path,
|
||||
duration,
|
||||
callback
|
||||
) {
|
||||
if (path.length < 2 || isTravel) return;
|
||||
isTravel = true;
|
||||
let startIndex = 0;
|
||||
let len = path.length;
|
||||
const currentP = path[0],
|
||||
nextP = path[1];
|
||||
const t = duration / len;
|
||||
|
||||
move(currentP, nextP);
|
||||
function move(currentP, nextP) {
|
||||
animate({
|
||||
from: {
|
||||
x: currentP.x,
|
||||
y: currentP.y,
|
||||
z: currentP.z
|
||||
},
|
||||
to: {
|
||||
x: nextP.x,
|
||||
y: nextP.y,
|
||||
z: nextP.z
|
||||
},
|
||||
ease: easeInOut,
|
||||
duration: t,
|
||||
repeatType: 'loop',
|
||||
onUpdate: o => {
|
||||
mesh.position.set(o.x, o.y, o.z);
|
||||
},
|
||||
onComplete: () => {
|
||||
startIndex++;
|
||||
if (startIndex < len - 1) {
|
||||
const currentP = path[startIndex],
|
||||
nextP = path[startIndex + 1];
|
||||
mesh.lookAt(nextP);
|
||||
|
||||
move(currentP, nextP);
|
||||
} else {
|
||||
isTravel = false;
|
||||
callback && callback();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [ 112, 35.39847 ],
|
||||
pitch: 45,
|
||||
rotation: 30,
|
||||
zoom: 5
|
||||
})
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.registerRenderService(ThreeRender);
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'
|
||||
)
|
||||
.then(d => d.json())
|
||||
.then(data => {
|
||||
const polygonlayer = new PolygonLayer({
|
||||
name: '01',
|
||||
zIndex: -1
|
||||
})
|
||||
.source(data)
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49'
|
||||
])
|
||||
.shape('fill')
|
||||
.select(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(polygonlayer);
|
||||
});
|
||||
|
||||
const threeJSLayer = new ThreeLayer({
|
||||
enableMultiPassRenderer: false,
|
||||
onAddMeshes: (threeScene, layer) => {
|
||||
// 添加光
|
||||
threeScene.add(new THREE.AmbientLight(0xffffff));
|
||||
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
|
||||
sunlight.position.set(0, 80000000, 100000000);
|
||||
sunlight.matrixWorldNeedsUpdate = true;
|
||||
threeScene.add(sunlight);
|
||||
|
||||
const lineData = [
|
||||
[ 116.71874999999999, 26.745610382199022 ],
|
||||
[ 117.3779296875, 28.8831596093235 ],
|
||||
[ 115.75195312499999, 31.466153715024294 ],
|
||||
[ 113.466796875, 33.32134852669881 ],
|
||||
[ 113.9501953125, 35.85343961959182 ],
|
||||
[ 115.400390625, 38.272688535980976 ],
|
||||
[ 116.5869140625, 40.3130432088809 ],
|
||||
[ 115.6201171875, 42.261049162113856 ],
|
||||
[ 112.236328125, 42.94033923363181 ],
|
||||
[ 109.3798828125, 41.04621681452063 ],
|
||||
[ 103.84277343749999, 39.80853604144591 ],
|
||||
[ 98.9208984375, 39.842286020743394 ],
|
||||
[ 95.2294921875, 40.713955826286046 ],
|
||||
[ 91.7138671875, 39.87601941962116 ],
|
||||
[ 90.8349609375, 37.125286284966805 ],
|
||||
[ 90.3076171875, 35.88905007936091 ],
|
||||
[ 90.703125, 33.284619968887675 ],
|
||||
[ 92.94433593749999, 31.98944183792288 ],
|
||||
[ 96.2841796875, 32.21280106801518 ],
|
||||
[ 98.87695312499999, 32.0639555946604 ],
|
||||
[ 102.919921875, 28.459033019728043 ],
|
||||
[ 107.9736328125, 28.497660832963472 ],
|
||||
[ 108.10546875, 24.206889622398023 ],
|
||||
[ 109.072265625, 23.039297747769726 ],
|
||||
[ 112.763671875, 24.44714958973082 ],
|
||||
[ 116.54296874999999, 25.958044673317843 ]
|
||||
];
|
||||
|
||||
const lineCoordData = lineData.map(d => {
|
||||
return layer.lnglatToCoord(d);
|
||||
});
|
||||
|
||||
|
||||
const rawPoints = [];
|
||||
lineCoordData.map(d => {
|
||||
rawPoints.push(new THREE.Vector3(d[0], d[1], 0));
|
||||
return '';
|
||||
});
|
||||
const curve = new THREE.CatmullRomCurve3(rawPoints);
|
||||
const points = curve.getPoints(200);
|
||||
const geometry = new THREE.BufferGeometry().setFromPoints(points);
|
||||
|
||||
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
|
||||
|
||||
const line = new THREE.LineLoop(geometry, material);
|
||||
threeScene.add(line);
|
||||
|
||||
|
||||
// 使用 Three.js glTFLoader 加载模型
|
||||
const loader = new GLTFLoader();
|
||||
loader.load(
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
|
||||
gltf => {
|
||||
// 根据 GeoJSON 数据放置模型
|
||||
const gltfScene = gltf.scene.clone();
|
||||
layer.getSource().data.dataArray.forEach(() => {
|
||||
layer.adjustMeshToMap(gltfScene);
|
||||
gltfScene.scale.set(500000, 500000, 500000);
|
||||
|
||||
const animations = gltf.animations;
|
||||
if (animations && animations.length) {
|
||||
const mixer = new THREE.AnimationMixer(gltfScene);
|
||||
// @ts-ignore
|
||||
for (let i = 0; i < animations.length; i++) {
|
||||
const animation = animations[i];
|
||||
|
||||
// There's .3333 seconds junk at the tail of the Monster animation that
|
||||
// keeps it from looping cleanly. Clip it at 3 seconds
|
||||
|
||||
const action = mixer.clipAction(animation);
|
||||
|
||||
action.play();
|
||||
}
|
||||
layer.addAnimateMixer(mixer);
|
||||
}
|
||||
|
||||
// 向场景中添加模型
|
||||
threeScene.add(gltfScene);
|
||||
});
|
||||
|
||||
|
||||
travelLoop();
|
||||
function travelLoop() {
|
||||
travel(gltfScene, points, 5000, () => {
|
||||
travelLoop();
|
||||
});
|
||||
}
|
||||
// 重绘图层
|
||||
layer.render();
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [ 112, 35.39847 ]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
.animate(true);
|
||||
scene.addLayer(threeJSLayer);
|
||||
});
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 121.4, 31.258134 ],
|
||||
pitch: 45,
|
||||
rotation: 30,
|
||||
zoom: 15
|
||||
})
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.registerRenderService(ThreeRender);
|
||||
|
||||
const threeJSLayer = new ThreeLayer({
|
||||
enableMultiPassRenderer: false,
|
||||
onAddMeshes: (threeScene, layer) => {
|
||||
threeScene.add(new THREE.AmbientLight(0xffffff));
|
||||
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
|
||||
sunlight.position.set(0, 80000000, 100000000);
|
||||
sunlight.matrixWorldNeedsUpdate = true;
|
||||
threeScene.add(sunlight);
|
||||
// 使用 Three.js glTFLoader 加载模型
|
||||
|
||||
const loader = new GLTFLoader();
|
||||
loader.load(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
|
||||
gltf => {
|
||||
// 根据 GeoJSON 数据放置模型
|
||||
layer.getSource().data.dataArray.forEach(() => {
|
||||
const gltfScene = gltf.scene;
|
||||
|
||||
layer.adjustMeshToMap(gltfScene);
|
||||
layer.setMeshScale(gltfScene, 10, 10, 10);
|
||||
|
||||
const animations = gltf.animations;
|
||||
if (animations && animations.length) {
|
||||
const mixer = new THREE.AnimationMixer(gltfScene);
|
||||
const animation = animations[2];
|
||||
const action = mixer.clipAction(animation);
|
||||
action.play();
|
||||
layer.addAnimateMixer(mixer);
|
||||
}
|
||||
// 向场景中添加模型
|
||||
threeScene.add(gltfScene);
|
||||
});
|
||||
// 重绘图层
|
||||
layer.render();
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [ 121.4, 31.258134 ]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
.animate(true);
|
||||
scene.addLayer(threeJSLayer);
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "第三方引擎",
|
||||
"en": "other engine"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "amap_ant.js",
|
||||
"title": "高德地图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*1_W2SIR8swwAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "amap_car.js",
|
||||
"title": "高德地图 car",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*C3JRTI_qlxEAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "mapbox_ant.js",
|
||||
"title": "mapbox 地图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*kflKRJvm3hYAAAAAAAAAAAAAARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Threejs
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Threejs
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -9,6 +9,10 @@ window.l7Maps = require('@antv/l7-maps');
|
|||
window.l7React = require('@antv/l7-react');
|
||||
window.l7Draw = require('@antv/l7-draw');
|
||||
window.l7District = require('@antv/l7-district');
|
||||
window.l7Three = require('@antv/l7-three');
|
||||
window.three = require('three');
|
||||
window.GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
|
||||
window.react = require('react');
|
||||
window.popmotion = require('popmotion');
|
||||
window.reactDom = require('react-dom');
|
||||
window.antd = require('antd');
|
||||
|
|
|
|||
|
|
@ -190,6 +190,14 @@ module.exports = {
|
|||
en: 'import other gl'
|
||||
},
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
slug: 'api/earth',
|
||||
title: {
|
||||
zh: '地球模式',
|
||||
en: 'Earth Mode'
|
||||
},
|
||||
order: 3
|
||||
}
|
||||
],
|
||||
examples: [
|
||||
|
|
@ -225,6 +233,22 @@ module.exports = {
|
|||
en: 'L7 Draw'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'engine',
|
||||
icon: 'map',
|
||||
title: {
|
||||
zh: '第三方引擎',
|
||||
en: 'other engine'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'earth',
|
||||
icon: 'map',
|
||||
title: {
|
||||
zh: '地球模式',
|
||||
en: 'Earth Mode'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'point',
|
||||
icon: 'point',
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
|
|||
'@antv/l7-renderer': path.resolve(__dirname, 'packages/renderer/src'),
|
||||
'@antv/l7-scene': path.resolve(__dirname, 'packages/scene/src'),
|
||||
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
|
||||
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src')
|
||||
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
|
||||
'@antv/l7-three': path.resolve(__dirname, 'packages/three/src')
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -307,7 +307,7 @@ class ScrollZoomHandler {
|
|||
private onTimeout(initialEvent: any) {
|
||||
this.type = 'wheel';
|
||||
this.delta -= this.lastValue;
|
||||
if (!this.active) {
|
||||
if (!this.active && this.start) {
|
||||
this.start(initialEvent);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue