Skip to content
forked from sony/mapray-js

maprayJSはJavaScript製のライブラリです。 日本に限らず全世界の地図データも利用できます。 Maprayはクラウドサービスであり、クラウド側で地理空間用に最適化されたデータをmaprayJSを用いてGPUで表示することで軽快な動作が可能とのことです。 2Dでは分からなかったことも3D、可視化することで見えるものがありそうです。 maprayJSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

License

Notifications You must be signed in to change notification settings

komiyamma/mapray-js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mapray

Mapray JS is a JavaScript library for a high quality interactive 3D globes and map on the web. It is based on WebGL. WebSite

Installation

CDN

  <script src="https://api.mapray.com/mapray-js/v0.5.1/mapray.js"></script>

npm

npm install --save mapray-js

Usage

World Terrain data hosted by mapray cloud platform. Access Token is required to access to mapray cloud, it is under Closed Alpha Test and is released to a limited number of end-users. Mapray cloud managed by Sony Network Communications Inc. If you have any questions about the access token of mapray cloud or the services of mapray cloud, please contact us from the contact page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Globe</title>
    <script src="https://api.mapray.com/mapray-js/v0.5.1/mapray.js"></script>
</head>
<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    div#mapray-container {
        display: flex;
        height: 100%;
    }
</style>
<body>
    <div id="mapray-container"></div>
</body>
</html>

<script>
     // Set Access Token for mapray cloud
       var accessToken = "<your access token here>";

       // For Image tiles
       var imageProvider = new mapray.StandardImageProvider( "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 0, 18 );

       // Create viewer
       var viewer = new mapray.Viewer(
           "mapray-container", {
               image_provider: imageProvider,
               dem_provider: new mapray.CloudDemProvider(accessToken)
           }
       );

       // Setting the position of camera
       var home_pos = { longitude: 138.247739, latitude: 35.677604, height: 3000 };

       var home_view_to_gocs = mapray.GeoMath.iscs_to_gocs_matrix( home_pos, mapray.GeoMath.createMatrix());

       var cam_pos = mapray.GeoMath.createVector3( [-3000, 2600, 1000] );
       var cam_end_pos    = mapray.GeoMath.createVector3( [0, 0, 0] );
       var cam_up         = mapray.GeoMath.createVector3( [0, 0, 1] );

       var view_to_home = mapray.GeoMath.createMatrix();
       mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);

       var view_to_gocs = viewer.camera.view_to_gocs;
       mapray.GeoMath.mul_AA( home_view_to_gocs, view_to_home, view_to_gocs );

       viewer.camera.near = 30;
       viewer.camera.far = 500000;
</script>

Documentation

All documents only support Japanese.

API documents

npm run jsdoc

License

Mapray JS is licensed under the MIT license.

About

maprayJSはJavaScript製のライブラリです。 日本に限らず全世界の地図データも利用できます。 Maprayはクラウドサービスであり、クラウド側で地理空間用に最適化されたデータをmaprayJSを用いてGPUで表示することで軽快な動作が可能とのことです。 2Dでは分からなかったことも3D、可視化することで見えるものがありそうです。 maprayJSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.7%
  • GLSL 1.3%
  • HTML 1.0%