From 9b017c999e73bc26e6aaa52e11e8c00e37659aa4 Mon Sep 17 00:00:00 2001 From: shihui Date: Thu, 23 Sep 2021 15:07:26 +0800 Subject: [PATCH 1/7] style: lint style --- docs/api/renderer/three.zh.md | 50 +++++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/docs/api/renderer/three.zh.md b/docs/api/renderer/three.zh.md index 0e81d01f00..3fed80b1b3 100644 --- a/docs/api/renderer/three.zh.md +++ b/docs/api/renderer/three.zh.md @@ -45,7 +45,7 @@ const threeJSLayer = new ThreeLayer({ 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); }, @@ -63,46 +63,53 @@ 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] 缩放比例 + +- 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: Object3D threejs 对象 +- lnglat: ILngLat[number, number] 经纬度 +- altitude = 0 相对高度 用户可以通过该方法将 object 对象从当前位置向指定位置移动（地图经纬度坐标） ### setObjectLngLat(object, lnglat, altibute): void - - object: Object3D threejs 对象 - - lnglat: ILngLat[number, number] 经纬度 - - altitude = 0 相对高度 + +- object: Object3D threejs 对象 +- lnglat: ILngLat[number, number] 经纬度 +- altitude = 0 相对高度 用户可以通过该方法设置 object 对象的位置（地图经纬度坐标） ### lnglatToCoord(lnglat): [number, number] - - lnglat: ILngLat[number, number] 经纬度 + +- lnglat: ILngLat[number, number] 经纬度 用户可以通过该方法将经纬度坐标转化成 threejs 世界坐标 ### adjustMeshToMap(object): void - - object: Object3D threejs 对象 + +- object: Object3D threejs 对象 用户在添加 threejs 对象的前可以通过该方法调整 3D 对象的姿态，保证添加对象能正确显示 @@ -111,10 +118,11 @@ L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与 ✨ 用户不一定使用该方法调整物体的姿态，也可以自己实现 ### setMeshScale(object, x, y, z): void - - object: Object3D threejs 对象 - - x: number = 1 x 轴方向的缩放比例 - - y: number = 1 y 轴方向的缩放比例 - - z: number = 1 z 轴方向的缩放比例 + +- object: Object3D threejs 对象 +- x: number = 1 x 轴方向的缩放比例 +- y: number = 1 y 轴方向的缩放比例 +- z: number = 1 z 轴方向的缩放比例 用户可以通过该方法设置 threejs 对象缩放 @@ -123,7 +131,8 @@ L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与 ✨ 同样的，可以直接修改 threejs 的 position、rotation 等调整 3D 对象的姿态 ### addAnimateMixer(mixer): void - - mixer: AnimationMixer threejs 的动画混合器 + +- mixer: AnimationMixer threejs 的动画混合器 用户通过该方法管理加载模型的动画 @@ -132,6 +141,7 @@ L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与 用户可以使用 threejs 提供的能力加载其支持的任意模型 ### 简单案例 + ✨ 以加载 gltf 模型为例 ```javascript @@ -166,4 +176,4 @@ const threeJSLayer = new ThreeLayer({ }).source(data) .animate(true) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层） -``` \ No newline at end of file +``` From 7f053ee1b05c442e5fd087a9f63822e3ab969d79 Mon Sep 17 00:00:00 2001 From: shihui Date: Wed, 13 Oct 2021 16:51:20 +0800 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=E6=96=87=E6=A1=A3=E6=A1=88?= =?UTF-8?q?=E4=BE=8B=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/earth/earth.en.md | 6 + docs/api/earth/earth.zh.md | 134 ++++++++++ docs/api/earth/flyline.en.md | 6 + docs/api/earth/flyline.zh.md | 179 +++++++++++++ docs/api/earth/point.en.md | 6 + docs/api/earth/point.zh.md | 179 +++++++++++++ examples/earth/arc3d/demo/flyline.js | 91 +++++++ examples/earth/arc3d/demo/meta.json | 13 + examples/earth/arc3d/index.en.md | 4 + examples/earth/arc3d/index.zh.md | 4 + examples/earth/point/demo/cylinder.js | 322 +++++++++++++++++++++++ examples/earth/point/demo/meta.json | 18 ++ examples/earth/point/demo/point.js | 322 +++++++++++++++++++++++ examples/earth/point/index.en.md | 4 + examples/earth/point/index.zh.md | 4 + examples/engine/three/demo/amap_ant.js | 102 +++++++ examples/engine/three/demo/amap_car.js | 218 +++++++++++++++ examples/engine/three/demo/mapbox_ant.js | 73 +++++ examples/engine/three/demo/meta.json | 23 ++ examples/engine/three/index.en.md | 4 + examples/engine/three/index.zh.md | 4 + gatsby-browser.js | 4 + gatsby-config.js | 24 ++ gatsby-node.js | 3 +- packages/map/src/handler/scroll_zoom.ts | 2 +- 25 files changed, 1747 insertions(+), 2 deletions(-) create mode 100644 docs/api/earth/earth.en.md create mode 100644 docs/api/earth/earth.zh.md create mode 100644 docs/api/earth/flyline.en.md create mode 100644 docs/api/earth/flyline.zh.md create mode 100644 docs/api/earth/point.en.md create mode 100644 docs/api/earth/point.zh.md create mode 100644 examples/earth/arc3d/demo/flyline.js create mode 100644 examples/earth/arc3d/demo/meta.json create mode 100644 examples/earth/arc3d/index.en.md create mode 100644 examples/earth/arc3d/index.zh.md create mode 100644 examples/earth/point/demo/cylinder.js create mode 100644 examples/earth/point/demo/meta.json create mode 100644 examples/earth/point/demo/point.js create mode 100644 examples/earth/point/index.en.md create mode 100644 examples/earth/point/index.zh.md create mode 100644 examples/engine/three/demo/amap_ant.js create mode 100644 examples/engine/three/demo/amap_car.js create mode 100644 examples/engine/three/demo/mapbox_ant.js create mode 100644 examples/engine/three/demo/meta.json create mode 100644 examples/engine/three/index.en.md create mode 100644 examples/engine/three/index.zh.md diff --git a/docs/api/earth/earth.en.md b/docs/api/earth/earth.en.md new file mode 100644 index 0000000000..6f5e1d2178 --- /dev/null +++ b/docs/api/earth/earth.en.md @@ -0,0 +1,6 @@ +--- +title: Earth Mode +order: 1 +--- + +`markdown:docs/api/earth/earth.zh.md` diff --git a/docs/api/earth/earth.zh.md b/docs/api/earth/earth.zh.md new file mode 100644 index 0000000000..4e75b04989 --- /dev/null +++ b/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, + }); +``` diff --git a/docs/api/earth/flyline.en.md b/docs/api/earth/flyline.en.md new file mode 100644 index 0000000000..c6ffe9ce38 --- /dev/null +++ b/docs/api/earth/flyline.en.md @@ -0,0 +1,6 @@ +--- +title: Earth Flyline +order: 3 +--- + +`markdown:docs/api/earth/flyline.zh.md` diff --git a/docs/api/earth/flyline.zh.md b/docs/api/earth/flyline.zh.md new file mode 100644 index 0000000000..613d146f76 --- /dev/null +++ b/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) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层） + +``` diff --git a/docs/api/earth/point.en.md b/docs/api/earth/point.en.md new file mode 100644 index 0000000000..202f4023c2 --- /dev/null +++ b/docs/api/earth/point.en.md @@ -0,0 +1,6 @@ +--- +title: Earth Point +order: 3 +--- + +`markdown:docs/api/earth/point.zh.md` diff --git a/docs/api/earth/point.zh.md b/docs/api/earth/point.zh.md new file mode 100644 index 0000000000..096a5e4ea2 --- /dev/null +++ b/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) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层） + +``` diff --git a/examples/earth/arc3d/demo/flyline.js b/examples/earth/arc3d/demo/flyline.js new file mode 100644 index 0000000000..e2ad50618d --- /dev/null +++ b/examples/earth/arc3d/demo/flyline.js @@ -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); +}); diff --git a/examples/earth/arc3d/demo/meta.json b/examples/earth/arc3d/demo/meta.json new file mode 100644 index 0000000000..d968c4288a --- /dev/null +++ b/examples/earth/arc3d/demo/meta.json @@ -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" + } + ] +} diff --git a/examples/earth/arc3d/index.en.md b/examples/earth/arc3d/index.en.md new file mode 100644 index 0000000000..fec0af9b93 --- /dev/null +++ b/examples/earth/arc3d/index.en.md @@ -0,0 +1,4 @@ +--- +title: flyline +order: 0 +--- diff --git a/examples/earth/arc3d/index.zh.md b/examples/earth/arc3d/index.zh.md new file mode 100644 index 0000000000..3b8309e6b9 --- /dev/null +++ b/examples/earth/arc3d/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 飞线 +order: 0 +--- diff --git a/examples/earth/point/demo/cylinder.js b/examples/earth/point/demo/cylinder.js new file mode 100644 index 0000000000..d0ef62c1a2 --- /dev/null +++ b/examples/earth/point/demo/cylinder.js @@ -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); +}); diff --git a/examples/earth/point/demo/meta.json b/examples/earth/point/demo/meta.json new file mode 100644 index 0000000000..3fb6c01221 --- /dev/null +++ b/examples/earth/point/demo/meta.json @@ -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" + } + ] +} diff --git a/examples/earth/point/demo/point.js b/examples/earth/point/demo/point.js new file mode 100644 index 0000000000..56ec26a22b --- /dev/null +++ b/examples/earth/point/demo/point.js @@ -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); +}); diff --git a/examples/earth/point/index.en.md b/examples/earth/point/index.en.md new file mode 100644 index 0000000000..2102c8ae24 --- /dev/null +++ b/examples/earth/point/index.en.md @@ -0,0 +1,4 @@ +--- +title: PointLayer +order: 0 +--- diff --git a/examples/earth/point/index.zh.md b/examples/earth/point/index.zh.md new file mode 100644 index 0000000000..e5acc5dbef --- /dev/null +++ b/examples/earth/point/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 点图层 +order: 0 +--- diff --git a/examples/engine/three/demo/amap_ant.js b/examples/engine/three/demo/amap_ant.js new file mode 100644 index 0000000000..f667238f85 --- /dev/null +++ b/examples/engine/three/demo/amap_ant.js @@ -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); +}); diff --git a/examples/engine/three/demo/amap_car.js b/examples/engine/three/demo/amap_car.js new file mode 100644 index 0000000000..c4d795e174 --- /dev/null +++ b/examples/engine/three/demo/amap_car.js @@ -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); +}); diff --git a/examples/engine/three/demo/mapbox_ant.js b/examples/engine/three/demo/mapbox_ant.js new file mode 100644 index 0000000000..bf4f1d7c88 --- /dev/null +++ b/examples/engine/three/demo/mapbox_ant.js @@ -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); +}); diff --git a/examples/engine/three/demo/meta.json b/examples/engine/three/demo/meta.json new file mode 100644 index 0000000000..34f45dfcb6 --- /dev/null +++ b/examples/engine/three/demo/meta.json @@ -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" + } + ] +} diff --git a/examples/engine/three/index.en.md b/examples/engine/three/index.en.md new file mode 100644 index 0000000000..b8320b39ee --- /dev/null +++ b/examples/engine/three/index.en.md @@ -0,0 +1,4 @@ +--- +title: Threejs +order: 0 +--- diff --git a/examples/engine/three/index.zh.md b/examples/engine/three/index.zh.md new file mode 100644 index 0000000000..b8320b39ee --- /dev/null +++ b/examples/engine/three/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Threejs +order: 0 +--- diff --git a/gatsby-browser.js b/gatsby-browser.js index c321f47f8f..3c91432bdd 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -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'); diff --git a/gatsby-config.js b/gatsby-config.js index c403875504..a48dc53ee5 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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', diff --git a/gatsby-node.js b/gatsby-node.js index 9493d394d5..fbcc964515 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -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') } }; diff --git a/packages/map/src/handler/scroll_zoom.ts b/packages/map/src/handler/scroll_zoom.ts index d2a0fb32e0..0c113db979 100644 --- a/packages/map/src/handler/scroll_zoom.ts +++ b/packages/map/src/handler/scroll_zoom.ts @@ -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); } } From dee7c9664d2936c8f5c8cc52adc3bb904a532919 Mon Sep 17 00:00:00 2001 From: shihui Date: Wed, 13 Oct 2021 16:53:13 +0800 Subject: [PATCH 3/7] style: lint style --- examples/engine/three/demo/amap_car.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/engine/three/demo/amap_car.js b/examples/engine/three/demo/amap_car.js index c4d795e174..dc11c87790 100644 --- a/examples/engine/three/demo/amap_car.js +++ b/examples/engine/three/demo/amap_car.js @@ -16,7 +16,7 @@ function travel( if (path.length < 2 || isTravel) return; isTravel = true; let startIndex = 0; - let len = path.length; + const len = path.length; const currentP = path[0], nextP = path[1]; const t = duration / len; From 14c7b633d5f3181a93eb9eeea8ead1a282571bda Mon Sep 17 00:00:00 2001 From: shihui Date: Thu, 14 Oct 2021 10:40:11 +0800 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E5=AE=98=E7=BD=91=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E5=A2=9E=E5=8A=A0=E5=9C=B0=E7=90=83=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E7=82=B9=E5=9B=BE=E5=B1=82=E3=80=81=E9=A3=9E=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E5=B1=82=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/earth/flyline.zh.md | 186 ++++---------------------- docs/api/earth/point.zh.md | 182 +++---------------------- examples/earth/arc3d/demo/flyline.js | 5 +- examples/earth/point/demo/cylinder.js | 4 +- examples/earth/point/demo/point.js | 6 +- 5 files changed, 47 insertions(+), 336 deletions(-) diff --git a/docs/api/earth/flyline.zh.md b/docs/api/earth/flyline.zh.md index 613d146f76..1b8b7f7cd3 100644 --- a/docs/api/earth/flyline.zh.md +++ b/docs/api/earth/flyline.zh.md @@ -7,173 +7,35 @@ order: 3 ## 简介 -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 可能会存在兼容问题 +用户在地球模式下使用飞线图层无需做额外的操作，L7 会自动识别地球模式并相关的转化 ## 使用 ```javascript // 1、引入对应模块 -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import * as THREE from 'three'; +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, + }); ... // 2、注册服务 -scene.registerRenderService(ThreeRender); -... -// 3、构建 threejs 图层对象并在其中添加 threejs 构建的网格对象 -const threeJSLayer = new ThreeLayer({ - onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => { - threeScene.add(new THREE.AmbientLight(0xffffff)); +scene.addLayer(flyLine); - 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) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层） - -``` +``` \ No newline at end of file diff --git a/docs/api/earth/point.zh.md b/docs/api/earth/point.zh.md index 096a5e4ea2..9862956dad 100644 --- a/docs/api/earth/point.zh.md +++ b/docs/api/earth/point.zh.md @@ -6,174 +6,30 @@ 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 可能会存在兼容问题 +用户在地球模式下使用点图层无需做额外的操作，L7 会自动识别地球模式并相关的转化 ## 使用 ```javascript -// 1、引入对应模块 -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import * as THREE from 'three'; +// 1、构建 pointlayer +const pointlayer = new PointLayer() + .source( + data, + { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, + }, + ) + // .shape('circle') // cylinder + .color('#f00') + .size(20) // .size('', () => [1, 1, 10]) + ... -// 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) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层） +// 2、添加 pointlayer 图层对象 +scene.addLayer(pointlayer); ``` diff --git a/examples/earth/arc3d/demo/flyline.js b/examples/earth/arc3d/demo/flyline.js index e2ad50618d..02a053423a 100644 --- a/examples/earth/arc3d/demo/flyline.js +++ b/examples/earth/arc3d/demo/flyline.js @@ -51,16 +51,13 @@ const earthlayer = new EarthLayer() 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', { parser: { - type: 'image', - extent: [ 121.168, 30.2828, 121.384, 30.4219 ] + type: 'image' } } ) .color('#2E8AE6') .shape('fill') .style({ - opacity: 1.0, - radius: 40, globelOtions: { ambientRatio: 0.6, // 环境光 diffuseRatio: 0.4, // 漫反射 diff --git a/examples/earth/point/demo/cylinder.js b/examples/earth/point/demo/cylinder.js index d0ef62c1a2..1d5a9d0ef0 100644 --- a/examples/earth/point/demo/cylinder.js +++ b/examples/earth/point/demo/cylinder.js @@ -281,12 +281,10 @@ const earthlayer = new EarthLayer() 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', { parser: { - type: 'image', - extent: [ 121.168, 30.2828, 121.384, 30.4219 ] + type: 'image' } } ) - .color('#2E8AE6') .shape('fill') .style({ opacity: 1.0, diff --git a/examples/earth/point/demo/point.js b/examples/earth/point/demo/point.js index 56ec26a22b..34eb5c79e7 100644 --- a/examples/earth/point/demo/point.js +++ b/examples/earth/point/demo/point.js @@ -281,13 +281,11 @@ const earthlayer = new EarthLayer() 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', { parser: { - type: 'image', - extent: [ 121.168, 30.2828, 121.384, 30.4219 ] + type: 'image' } } ) - .color('#2E8AE6') - .shape('fill') + .shape('base') .style({ opacity: 1.0, radius: 40, From 01e93569a718d8cdf3c7d7cb8183a78df8c3294b Mon Sep 17 00:00:00 2001 From: shihui Date: Thu, 14 Oct 2021 10:41:51 +0800 Subject: [PATCH 5/7] style: lint style --- docs/api/earth/flyline.zh.md | 2 +- docs/api/earth/point.zh.md | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/api/earth/flyline.zh.md b/docs/api/earth/flyline.zh.md index 1b8b7f7cd3..463ef749b7 100644 --- a/docs/api/earth/flyline.zh.md +++ b/docs/api/earth/flyline.zh.md @@ -38,4 +38,4 @@ const flyLine = new LineLayer({ blend: 'normal' }) // 2、注册服务 scene.addLayer(flyLine); -``` \ No newline at end of file +``` diff --git a/docs/api/earth/point.zh.md b/docs/api/earth/point.zh.md index 9862956dad..678705e978 100644 --- a/docs/api/earth/point.zh.md +++ b/docs/api/earth/point.zh.md @@ -6,6 +6,7 @@ order: 3 `markdown:docs/common/style.md` ## 简介 + 用户在地球模式下使用点图层无需做额外的操作，L7 会自动识别地球模式并相关的转化 ## 使用 @@ -26,7 +27,7 @@ const pointlayer = new PointLayer() // .shape('circle') // cylinder .color('#f00') .size(20) // .size('', () => [1, 1, 10]) - + ... // 2、添加 pointlayer 图层对象 From 9f3fc1ff0d532795eaeeb913f334b484fccde469 Mon Sep 17 00:00:00 2001 From: shihui Date: Thu, 14 Oct 2021 10:56:08 +0800 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=9C=B0?= =?UTF-8?q?=E7=90=83=E6=A8=A1=E5=BC=8F=E9=A3=9E=E7=BA=BF=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/earth/arc3d/demo/flyline.js | 60 +++++++++++----------------- 1 file changed, 24 insertions(+), 36 deletions(-) diff --git a/examples/earth/arc3d/demo/flyline.js b/examples/earth/arc3d/demo/flyline.js index 02a053423a..a437fd4362 100644 --- a/examples/earth/arc3d/demo/flyline.js +++ b/examples/earth/arc3d/demo/flyline.js @@ -8,44 +8,30 @@ const scene = new Scene({ // 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 flydata = [{"coord":[[104.195397,35.86166],[100.992541,15.870032]]},{"coord":[[104.195397,35.86166],[114.727669,4.535277]]},{"coord":[[104.195397,35.86166],[9.501785,56.26392]]},{"coord":[[104.195397,35.86166],[-66.590149,18.220833]]},{"coord":[[104.195397,35.86166],[174.885971,-40.900557]]},{"coord":[[104.195397,35.86166],[104.990963,12.565679]]},{"coord":[[104.195397,35.86166],[6.129582999999999,49.815273]]},{"coord":[[104.195397,35.86166],[8.468945999999999,60.47202399999999]]},{"coord":[[104.195397,35.86166],[108.277199,14.058324]]},{"coord":[[104.195397,35.86166],[-95.712891,37.09024]]},{"coord":[[104.195397,35.86166],[121.49917,25.12653]]},{"coord":[[104.195397,35.86166],[-9.429499000000002,6.428055]]},{"coord":[[104.195397,35.86166],[127.766922,35.907757]]},{"coord":[[104.195397,35.86166],[10.451526,51.165691]]},{"coord":[[104.195397,35.86166],[23.881275,55.169438]]},{"coord":[[104.195397,35.86166],[34.851612,31.046051]]},{"coord":[[104.195397,35.86166],[53.847818,23.424076]]},{"coord":[[104.195397,35.86166],[102.495496,19.85627]]},{"coord":[[104.195397,35.86166],[21.824312,39.074208]]},{"coord":[[104.195397,35.86166],[25.48583,42.733883]]},{"coord":[[104.195397,35.86166],[15.472962,49.81749199999999]]},{"coord":[[104.195397,35.86166],[78.96288,20.593684]]},{"coord":[[104.195397,35.86166],[-3.435973,55.378051]]},{"coord":[[104.195397,35.86166],[33.429859,35.126413]]},{"coord":[[104.195397,35.86166],[8.227511999999999,46.818188]]},{"coord":[[104.195397,35.86166],[114.066662,22.588638]]},{"coord":[[104.195397,35.86166],[14.550072,47.516231]]},{"coord":[[104.195397,35.86166],[2.213749,46.227638]]},{"coord":[[104.195397,35.86166],[12.56738,41.87194]]},{"coord":[[104.195397,35.86166],[105.318756,61.52401]]},{"coord":[[104.195397,35.86166],[80.77179699999999,7.873053999999999]]},{"coord":[[104.195397,35.86166],[5.291265999999999,52.132633]]},{"coord":[[104.195397,35.86166],[35.243322,38.963745]]},{"coord":[[104.195397,35.86166],[18.643501,60.12816100000001]]},{"coord":[[104.195397,35.86166],[25.748151,61.92410999999999]]},{"coord":[[104.195397,35.86166],[-3.74922,40.46366700000001]]},{"coord":[[104.195397,35.86166],[113.551538,22.109432]]},{"coord":[[104.195397,35.86166],[4.469936,50.503887]]},{"coord":[[104.195397,35.86166],[-106.346771,56.130366]]},{"coord":[[104.195397,35.86166],[138.252924,36.204824]]},{"coord":[[104.195397,35.86166],[17.679076,43.915886]]},{"coord":[[104.195397,35.86166],[-88.49765,17.189877]]},{"coord":[[104.195397,35.86166],[25.013607,58.595272]]},{"coord":[[104.195397,35.86166],[101.975766,4.210484]]},{"coord":[[104.195397,35.86166],[-8.24389,53.41291]]},{"coord":[[104.195397,35.86166],[-8.224454,39.39987199999999]]},{"coord":[[104.195397,35.86166],[133.775136,-25.274398]]},{"coord":[[104.195397,35.86166],[121.774017,12.879721]]}] +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 }); + const earthlayer = new EarthLayer() .source( 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', @@ -84,5 +70,7 @@ scene.on('loaded', () => { scene.addLayer(atomLayer); scene.addLayer(bloomLayer); + scene.addLayer(flyLine); + earthlayer.setEarthTime(4.0); }); From 63d681947176762986ccae30abbb43ff63c7678e Mon Sep 17 00:00:00 2001 From: shihui Date: Thu, 14 Oct 2021 10:57:10 +0800 Subject: [PATCH 7/7] style: lint style --- examples/earth/arc3d/demo/flyline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/earth/arc3d/demo/flyline.js b/examples/earth/arc3d/demo/flyline.js index a437fd4362..adb73acf50 100644 --- a/examples/earth/arc3d/demo/flyline.js +++ b/examples/earth/arc3d/demo/flyline.js @@ -8,7 +8,7 @@ const scene = new Scene({ // TODO: 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色 scene.setBgColor('#333'); -const flydata = [{"coord":[[104.195397,35.86166],[100.992541,15.870032]]},{"coord":[[104.195397,35.86166],[114.727669,4.535277]]},{"coord":[[104.195397,35.86166],[9.501785,56.26392]]},{"coord":[[104.195397,35.86166],[-66.590149,18.220833]]},{"coord":[[104.195397,35.86166],[174.885971,-40.900557]]},{"coord":[[104.195397,35.86166],[104.990963,12.565679]]},{"coord":[[104.195397,35.86166],[6.129582999999999,49.815273]]},{"coord":[[104.195397,35.86166],[8.468945999999999,60.47202399999999]]},{"coord":[[104.195397,35.86166],[108.277199,14.058324]]},{"coord":[[104.195397,35.86166],[-95.712891,37.09024]]},{"coord":[[104.195397,35.86166],[121.49917,25.12653]]},{"coord":[[104.195397,35.86166],[-9.429499000000002,6.428055]]},{"coord":[[104.195397,35.86166],[127.766922,35.907757]]},{"coord":[[104.195397,35.86166],[10.451526,51.165691]]},{"coord":[[104.195397,35.86166],[23.881275,55.169438]]},{"coord":[[104.195397,35.86166],[34.851612,31.046051]]},{"coord":[[104.195397,35.86166],[53.847818,23.424076]]},{"coord":[[104.195397,35.86166],[102.495496,19.85627]]},{"coord":[[104.195397,35.86166],[21.824312,39.074208]]},{"coord":[[104.195397,35.86166],[25.48583,42.733883]]},{"coord":[[104.195397,35.86166],[15.472962,49.81749199999999]]},{"coord":[[104.195397,35.86166],[78.96288,20.593684]]},{"coord":[[104.195397,35.86166],[-3.435973,55.378051]]},{"coord":[[104.195397,35.86166],[33.429859,35.126413]]},{"coord":[[104.195397,35.86166],[8.227511999999999,46.818188]]},{"coord":[[104.195397,35.86166],[114.066662,22.588638]]},{"coord":[[104.195397,35.86166],[14.550072,47.516231]]},{"coord":[[104.195397,35.86166],[2.213749,46.227638]]},{"coord":[[104.195397,35.86166],[12.56738,41.87194]]},{"coord":[[104.195397,35.86166],[105.318756,61.52401]]},{"coord":[[104.195397,35.86166],[80.77179699999999,7.873053999999999]]},{"coord":[[104.195397,35.86166],[5.291265999999999,52.132633]]},{"coord":[[104.195397,35.86166],[35.243322,38.963745]]},{"coord":[[104.195397,35.86166],[18.643501,60.12816100000001]]},{"coord":[[104.195397,35.86166],[25.748151,61.92410999999999]]},{"coord":[[104.195397,35.86166],[-3.74922,40.46366700000001]]},{"coord":[[104.195397,35.86166],[113.551538,22.109432]]},{"coord":[[104.195397,35.86166],[4.469936,50.503887]]},{"coord":[[104.195397,35.86166],[-106.346771,56.130366]]},{"coord":[[104.195397,35.86166],[138.252924,36.204824]]},{"coord":[[104.195397,35.86166],[17.679076,43.915886]]},{"coord":[[104.195397,35.86166],[-88.49765,17.189877]]},{"coord":[[104.195397,35.86166],[25.013607,58.595272]]},{"coord":[[104.195397,35.86166],[101.975766,4.210484]]},{"coord":[[104.195397,35.86166],[-8.24389,53.41291]]},{"coord":[[104.195397,35.86166],[-8.224454,39.39987199999999]]},{"coord":[[104.195397,35.86166],[133.775136,-25.274398]]},{"coord":[[104.195397,35.86166],[121.774017,12.879721]]}] +const flydata = [{ coord: [[ 104.195397, 35.86166 ], [ 100.992541, 15.870032 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 114.727669, 4.535277 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 9.501785, 56.26392 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -66.590149, 18.220833 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 174.885971, -40.900557 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 104.990963, 12.565679 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 6.129582999999999, 49.815273 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 8.468945999999999, 60.47202399999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 108.277199, 14.058324 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -95.712891, 37.09024 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 121.49917, 25.12653 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -9.429499000000002, 6.428055 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 127.766922, 35.907757 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 10.451526, 51.165691 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 23.881275, 55.169438 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 34.851612, 31.046051 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 53.847818, 23.424076 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 102.495496, 19.85627 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 21.824312, 39.074208 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.48583, 42.733883 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 15.472962, 49.81749199999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 78.96288, 20.593684 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -3.435973, 55.378051 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 33.429859, 35.126413 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 8.227511999999999, 46.818188 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 114.066662, 22.588638 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 14.550072, 47.516231 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 2.213749, 46.227638 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 12.56738, 41.87194 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 105.318756, 61.52401 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 80.77179699999999, 7.873053999999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 5.291265999999999, 52.132633 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 35.243322, 38.963745 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 18.643501, 60.12816100000001 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.748151, 61.92410999999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -3.74922, 40.46366700000001 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 113.551538, 22.109432 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 4.469936, 50.503887 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -106.346771, 56.130366 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 138.252924, 36.204824 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 17.679076, 43.915886 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -88.49765, 17.189877 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 25.013607, 58.595272 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 101.975766, 4.210484 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -8.24389, 53.41291 ]] }, { coord: [[ 104.195397, 35.86166 ], [ -8.224454, 39.39987199999999 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 133.775136, -25.274398 ]] }, { coord: [[ 104.195397, 35.86166 ], [ 121.774017, 12.879721 ]] }]; const flyLine = new LineLayer({ blend: 'normal' }) .source(flydata, { parser: {