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

1. npm install
2. npm run dev-server
3. Navigate the browser to http://localhost:8080/demos/