wxs3map v0.0.3
Wxs3Map
NOTE: This is a fork of wxs.threejs, for the original version please refer to the original reposityory.
Wxs3Map is a lightweight JavaScript library build on top of the great three.js library.
The main purpose is to facilitate showing small 3d-blocks of the world, using the OGC services WCS for elevation data and WMS/WMTS for textures (maps or sattelite/aerial photos).
Usage
The recommended way to use wxs.threejs2 is by some tool like Webpack or browserify:
npm install wxs3map --save
And then
import Wxs3Map from 'wxs3map';
If you want to include this as a "traditional" js package, add the build/Wxs3Map.min.js to your project, as well as build/trackball.js.
and the libraries:
- three.js
- underscore
- proj4js
Configuration
A new 3d-scene is created using the following syntax
var threeDMap = window.Wxs3Map.default(options);
Here options is an object of the following structure:
| Option | Type | Default | Description |
|---|---|---|---|
| div | String | null | Id of div to place scene in |
| bbox | String | null | Bounding box of area to show |
| bboxCrs | String | EPSG:4326 | Crs of bbox |
| wireframe | Boolean | false | Show wireframe (for debugging) |
| zMult | Number | 1 | Factor to adjust z-values (height) by |
| crs | String | EPSG:32633 | Internal coordinate system of scene |
| texture | TextureOptions | Configure texture, see below | |
| terrain | TerrainOptions | Configure terrain, see below | |
| profiles | ProfileOptions[] | Configure texture, see below |
TextureOptions
| Option | Type | Default | Description |
|---|---|---|---|
| type | String | wms | Type of texture (wms or image) |
| wmsUrl | String | http://openwms.statkart.no/skwms1/wms.topo2 | Url to wms server |
| wmsLayers | String | topo2_WMS | Wms layers to use |
| wmsFormat | String | image/png | Wms format |
| imgUrl | String | null | Path to image used for texture if type = image |
TerrainOptions
| Option | Type | Default | Description |
|---|---|---|---|
| pixelsPerVertex | Integer | 8 | Resolution of the height model in the image |
| wcsResolution | Integer | 10 | Resolution of grid cell in meters |
| coverage | String | land_utm33_10m | Wcs coverage to use |
| format | String | geotiff | WCS format (geotiff or xyz) |
| showBox | Boolean | true | Show a box around the terrain slice |
| boxColor | Hex color | 0xdddddd | Color of the box around the terrain slice |
ProfileOptions
Development
npm installnpm run dev-server- Navigate the browser to http://localhost:8080/demos/