코드조각 저장소

CesiumJS + VWorld 본문

Programing/GIS &

CesiumJS + VWorld

basic 2021. 7. 5. 18:13

작업 중 필요해서 VWorld WMTS 오픈 API 서비스를 이용하기 위해 작성함 샘플 코드 입니다.

CesiumJS Git 소스 코드의 Sample App 기반으로 코딩되어 있습니다. Cesium ION KEY, VWorld api key는 개인적으로 발급받아 적용하셔야 합니다.

service URL

요청 URL 조립에 삽질을 좀 했지만 잘 동작하는 것 같습니다.

VWorld WMTS on Cesium

<!DOCTYPE html>
<html lang="en">
  <head>    
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      const vworld_key = '<<발급키>>';
      const Cesium = window.Cesium;
      Cesium.Ion.defaultAccessToken = '<<Cesium ION 발급 키 >>'


      var layers = [{layer : 'Base', tileType : 'png'}, 
                    {layer : 'gray', tileType : 'png'},
                    {layer : 'midnight', tileType : 'png'},
                    {layer : 'Hybrid', tileType : 'png'},
                    {layer : 'Satellite', tileType : 'jpeg'} ]

      var selLayer = layers[4];

      var wms = new Cesium.WebMapTileServiceImageryProvider({
              url : `http://api.vworld.kr/req/wmts/1.0.0/${vworld_key}/${selLayer.layer}/{TileMatrix}/{TileRow}/{TileCol}.${selLayer.tileType}`,
              layer : 'Base',
              style : 'default',
              maximumLevel: 19,
              credit : new Cesium.Credit('VWorld Korea')
      });

      var viewer = new Cesium.Viewer("cesiumContainer",{
        imageryProvider: wms              
            //  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            //   url:
            //     "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",
            // })
      });	  
      
      viewer.camera.setView({
              destination: new Cesium.Cartesian3(-3756512.992115552, 5003744.628566555, 4786760.616010258)
              });              

    </script>
  </body>
</html>
'Programing/GIS &' Related Articles more
Comments