1.0.2 • Published 6 years ago

aframe-wms-component v1.0.2

Weekly downloads
4
License
MIT
Repository
github
Last release
6 years ago

aframe-wms-component

An A-Frame component to deal with WMS (Web Map Service).

This library implements a WMS GetMap request, the result is a single image which is added into the component material "SRC:" parameter.

Make sure you request a valid WMS with the correct parameters.

Example with a globe: Example

Schema

PropertyDescriptionDefault ValueRequired
urlThe main URL of the WMS.true
bboxThe bonding box of the requested area.true
projectionThe projection. This projection must be available in the WMS.true
layersThe WMS layers which will be requested.true
widthImage request width. It is recommended to change this value according to your needs.250 pxfalse
heightImage request height. It is recommended to change this value according to your needs.250 pxfalse
versionThe WMS version.1.3.0false
formatThe image format.pngfalse
transparentIf true the resulting image will allow transparency.truefalse
stylesUsed for specify the WMS/layer styles.nonefalse

Installation

npm

Via npm:

npm install aframe-wms-component

Then

require('aframe');
require('aframe-wms-component');

Directly including the minified file

<html>
  <head>
    <title>A-Frame WMS Component - Simple example</title>
    <meta name="description" content="Simple example for WMS component in a flat panel."></meta>
        <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script> 
    <script src="https://unpkg.com/aframe-wms-component/dist/aframe-wms-component.min.js"></script> 
  </head>
  <body>
    <a-scene>
      <a-assets>
      </a-assets>
      <a-entity position="1 1.8 -2">
        <a-entity 
        material="color: #000;opacity:1;"
        geometry="primitive: plane; width:4;height:2;"
          wms="
          url: http://ows.terrestris.de/osm/service;
          bbox: -88,-180,88,180;
          projection: EPSG:4326;
          version: 1.3.0;
          format: PNG;
          layers: OSM-WMS;
          width: 4048;
          height: 2024;
          "
         /></a-entity>
        </a-entity>
    </a-scene>
  </body>
</html>

Examples

Simple plane

Rotating globe and a plane

Inverted globe

Further development

A WMS Get Feature Info request based on the raycaster may be implemented in future releases.