❤
npm
Sign UpSign In

aframe-wms-component

1.0.2 • Public • Published

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

Property Description Default Value Required
url The main URL of the WMS. true
bbox The bonding box of the requested area. true
projection The projection. This projection must be available in the WMS. true
layers The WMS layers which will be requested. true
width Image request width. It is recommended to change this value according to your needs. 250 px false
height Image request height. It is recommended to change this value according to your needs. 250 px false
version The WMS version. 1.3.0 false
format The image format. png false
transparent If true the resulting image will allow transparency. true false
styles Used for specify the WMS/layer styles. none false

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.

Readme

Keywords

Package Sidebar

Install

npm i aframe-wms-component

Repository

github.com/lcalisto/aframe-wms-component

Homepage

github.com/lcalisto/aframe-wms-component

Weekly Downloads

2

Version

1.0.2

License

MIT

Last publish

Collaborators

  • lcalisto
Try on RunKit
Report malware