diff --git a/.npmrc b/.npmrc index 7549542..8b13789 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1 @@ -registry=https://registry.npmmirror.com + diff --git a/README.md b/README.md index 3ea573d..40d9896 100644 --- a/README.md +++ b/README.md @@ -1,75 +1,31 @@ # maplibre-three-plugin + `maplibre-three-plugin` is a bridge plugin that cleverly connects [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) with [Three.js](https://threejs.org/), enabling developers to implement 3D rendering and animation on maps. -## Install +## Install ```shell -npm install @dvgis/maplibre-three-plugin +npm install @dvgis/maplibre-three-plugin ---------------------------------------- -yarn add @dvgis/maplibre-three-plugin` +yarn add @dvgis/maplibre-three-plugin ``` -## Start - +## Quickly Start + `maplibre-three-plugin` depends on three, please make sure three is installed before using it. ```javascript - import maplibregl from 'maplibre-gl'; - import 'maplibre-gl/dist/maplibre-gl.css'; - import {MapScene} from '@dvgis/maplibre-three-plugin' - - const map = new maplibregl.Map({ - container: 'map', // container id - style: 'https://demotiles.maplibre.org/style.json', // style URL - center: [0, 0], // starting position [lng, lat] - zoom: 1 // starting zoom - }); - const mapScene = new MapScene(map) -``` - -## MapScene - -### constructor(map,[options]) - -- params - - `{maplibregl.Map} map ` : map instance - - `{Object} options ` : config - -```js -{ - scene: null, - camera:null, - renderer: null, - preserveDrawingBuffer: false, - renderLoop: (ins) =>{} -} - +import maplibregl from 'maplibre-gl' +import 'maplibre-gl/dist/maplibre-gl.css' +import { MapScene } from '@dvgis/maplibre-three-plugin' + +const map = new maplibregl.Map({ + container: 'map', // container id + style: 'https://demotiles.maplibre.org/style.json', // style URL + center: [0, 0], // starting position [lng, lat] + zoom: 1, // starting zoom +}) +const mapScene = new MapScene(map) ``` -### properties - -- `{maplibregl.Map} map` -- `{HttmElement} canvas` -- `{THREE.Scene} scene` -- `{THREE.Camera} camera` -- `{THREE.WebGLRenderer} renderer` -- `{THREE.Group} world` - -### methods - -- projectedUnitsPerMeter(lat) - -- lngLatToVector3(lng,lat,alt) - -- vector3ToLngLat(v3) - - - - - - - - - - - +## Examples diff --git a/examples/box.html b/examples/box.html deleted file mode 100644 index e69de29..0000000 diff --git a/examples/data/GroundVehicle.glb b/examples/data/GroundVehicle.glb deleted file mode 100644 index bef1899..0000000 Binary files a/examples/data/GroundVehicle.glb and /dev/null differ diff --git a/examples/fbx.html b/examples/fbx.html deleted file mode 100644 index e69de29..0000000 diff --git a/examples/glb.html b/examples/glb.html deleted file mode 100644 index 97054eb..0000000 --- a/examples/glb.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - -
- - - - - \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index d1aef93..32f0d6a 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,70 +1,71 @@ - + - - - - - - - + .map-container { + width: 100%; + height: 100%; + overflow: hidden; + } + - -
- - - + - - \ No newline at end of file + map.on('style.load', (e) => { + let position = SceneTransform.lngLatToVector3(120, 31, 0) + const geometry = new THREE.BoxGeometry(10, 10, 10) + const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }) + const cube = new THREE.Mesh(geometry, material) + cube.position.copy(position) + mapScene.world.add(cube) + }) + + + diff --git a/src/index.js b/src/index.js index 939dfd5..df0605f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,8 @@ -import { MapScene } from './modules' +import { MapScene, SceneTransform } from './modules' if (window.THREE) { window.MapScene = MapScene + window.SceneTransform = SceneTransform } -export { MapScene } +export { MapScene, SceneTransform } diff --git a/src/modules/index.js b/src/modules/index.js index 488d77c..baae406 100644 --- a/src/modules/index.js +++ b/src/modules/index.js @@ -1 +1,2 @@ export { default as MapScene } from './scene/MapScene' +export { default as SceneTransform } from './transform/SceneTransform' diff --git a/src/modules/scene/MapScene.js b/src/modules/scene/MapScene.js index 80e3d9f..5e8f058 100644 --- a/src/modules/scene/MapScene.js +++ b/src/modules/scene/MapScene.js @@ -1,12 +1,6 @@ -import { Group, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from 'three' +import { Group, PerspectiveCamera, Scene, WebGLRenderer } from 'three' import CameraSync from '../camera/CameraSync.js' -import { - DEG2RAD, - EARTH_CIRCUMFERENCE, - EARTH_RADIUS, - PROJECTION_WORLD_SIZE, - WORLD_SIZE, -} from '../constants' +import { WORLD_SIZE } from '../constants' const DEF_OPTS = { scene: null, @@ -90,7 +84,7 @@ class MapScene { * @private */ _onStyleLoad() { - let _this = this + const _this = this this._map.addLayer({ id: 'map_scene_layer', type: 'custom', @@ -115,71 +109,6 @@ class MapScene { this._options.renderLoop(this) return this } - - /** - * - * @param lat - * @returns {number} - */ - projectedUnitsPerMeter(lat) { - return Math.abs(WORLD_SIZE / Math.cos(DEG2RAD * lat) / EARTH_CIRCUMFERENCE) - } - - /** - * - * @param lng - * @param lat - * @param alt - * @returns {Vector3} - */ - lngLatToVector3(lng, lat, alt = 0) { - let v = [0, 0, 0] - if (Array.isArray(lng)) { - v = [ - -EARTH_RADIUS * DEG2RAD * lng[0] * PROJECTION_WORLD_SIZE, - -EARTH_RADIUS * - Math.log(Math.tan(Math.PI * 0.25 + 0.5 * DEG2RAD * lng[1])) * - PROJECTION_WORLD_SIZE, - ] - if (!lng[2]) { - v.push(0) - } else { - v.push(lng[2] * this.projectedUnitsPerMeter(lng[1])) - } - } else { - v = [ - -EARTH_RADIUS * DEG2RAD * lng * PROJECTION_WORLD_SIZE, - -EARTH_RADIUS * - Math.log(Math.tan(Math.PI * 0.25 + 0.5 * DEG2RAD * lat)) * - PROJECTION_WORLD_SIZE, - ] - if (!alt) { - v.push(0) - } else { - v.push(alt * this.projectedUnitsPerMeter(lat)) - } - } - return new Vector3(v[0], v[1], v[2]) - } - - /** - * - * @param v - * @returns {{lng: number, alt: number, lat: number}} - */ - vector3ToLngLat(v) { - let result = { lng: 0, lat: 0, alt: 0 } - if (v) { - result.lng = -v.x / (EARTH_RADIUS * DEG2RAD * PROJECTION_WORLD_SIZE) - result.lat = - (2 * - (Math.atan(Math.exp(v.y / (PROJECTION_WORLD_SIZE * -EARTH_RADIUS))) - - Math.PI / 4)) / - DEG2RAD - result.alt = v.z / this.projectedUnitsPerMeter(result.lat) - } - return result - } } export default MapScene diff --git a/src/modules/transform/SceneTransform.js b/src/modules/transform/SceneTransform.js new file mode 100644 index 0000000..7b6b70c --- /dev/null +++ b/src/modules/transform/SceneTransform.js @@ -0,0 +1,77 @@ +import { Vector3 } from 'three' +import { + DEG2RAD, + EARTH_CIRCUMFERENCE, + EARTH_RADIUS, + PROJECTION_WORLD_SIZE, + WORLD_SIZE, +} from '../constants' + +class SceneTransform { + /** + * + * @param lat + * @returns {number} + */ + static projectedUnitsPerMeter(lat) { + return Math.abs(WORLD_SIZE / Math.cos(DEG2RAD * lat) / EARTH_CIRCUMFERENCE) + } + + /** + * + * @param lng + * @param lat + * @param alt + * @returns {Vector3} + */ + static lngLatToVector3(lng, lat, alt = 0) { + let v = [0, 0, 0] + if (Array.isArray(lng)) { + v = [ + -EARTH_RADIUS * DEG2RAD * lng[0] * PROJECTION_WORLD_SIZE, + -EARTH_RADIUS * + Math.log(Math.tan(Math.PI * 0.25 + 0.5 * DEG2RAD * lng[1])) * + PROJECTION_WORLD_SIZE, + ] + if (!lng[2]) { + v.push(0) + } else { + v.push(lng[2] * this.projectedUnitsPerMeter(lng[1])) + } + } else { + v = [ + -EARTH_RADIUS * DEG2RAD * lng * PROJECTION_WORLD_SIZE, + -EARTH_RADIUS * + Math.log(Math.tan(Math.PI * 0.25 + 0.5 * DEG2RAD * lat)) * + PROJECTION_WORLD_SIZE, + ] + if (!alt) { + v.push(0) + } else { + v.push(alt * this.projectedUnitsPerMeter(lat)) + } + } + return new Vector3(v[0], v[1], v[2]) + } + + /** + * + * @param v + * @returns {{lng: number, alt: number, lat: number}} + */ + static vector3ToLngLat(v) { + let result = { lng: 0, lat: 0, alt: 0 } + if (v) { + result.lng = -v.x / (EARTH_RADIUS * DEG2RAD * PROJECTION_WORLD_SIZE) + result.lat = + (2 * + (Math.atan(Math.exp(v.y / (PROJECTION_WORLD_SIZE * -EARTH_RADIUS))) - + Math.PI / 4)) / + DEG2RAD + result.alt = v.z / this.projectedUnitsPerMeter(result.lat) + } + return result + } +} + +export default SceneTransform