MIERUNE地図 - Cesium
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
src
README.md

README.md

MIERUNE地図 - Cesium


Getting Started

MIERUNE地図表示 -「Free」プラン

MIERUNE地図表示 -「Free」プラン

example path

./src/001

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Cesium example</title>

        <!--Cesium 読み込み-->
        <script src="https://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
        <link href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

        <link href="./css/stylesheet.css" rel="stylesheet"/>

    </head>
    <body>

        <div id="map"></div>

        <script src="./js/script.js"></script>

    </body>
</html>

stylesheet.css

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

script.js

// スタイル: mierune, mierune_mono
var style = "mierune_mono";

// URL設定
var url = "https://tile.mierune.co.jp/" + style + "/{z}/{x}/{y}.png";

// MIERUNE地図 読み込み
var m_map = new Cesium.UrlTemplateImageryProvider({
    url: url,
    credit: new Cesium.Credit("Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.", '', 'http://mierune.co.jp'),
    maximumLevel : 18
});

// 地図画面表示
var viewer = new Cesium.Viewer('map', {
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false
});
viewer.scene.imageryLayers.addImageryProvider(m_map);
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(139.767, 35.681, 1000000.0) 
});



MIERUNE地図表示 -「Standard, Premium, Global Scale」プラン

MIERUNE地図表示 -「Standard, Premium, Global Scale」プラン

example path

./src/002

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Cesium example</title>

        <!--Cesium 読み込み-->
        <script src="https://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
        <link href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

        <link href="./css/stylesheet.css" rel="stylesheet"/>

    </head>
    <body>

        <div id="map"></div>

        <script src="./js/script.js"></script>

    </body>
</html>

stylesheet.css

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#cesiumContainer {
  z-index: 0;
  height: 100%;
}

script.js

// 「Standard, Premium, Global Scale」プラン 認証キー
var apikey = "xxxxxxxxxx";

// スタイル: normal, gray, bright, blue, warm, MIERUNE
var style = "normal";

// URL設定
var url = "https://tile.cdn.mierune.co.jp/styles/" + style + "/{z}/{x}/{y}.png" + "?key=" + apikey;

// MIERUNE地図 読み込み
var m_map = new Cesium.UrlTemplateImageryProvider({
    url: url,
    credit: new Cesium.Credit("Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.", '', 'http://mierune.co.jp'),
    maximumLevel : 18
});

// 地図画面表示
var viewer = new Cesium.Viewer('map', {
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false
});
viewer.scene.imageryLayers.addImageryProvider(m_map);
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(139.767, 35.681, 1000000.0) 
});



マーカー・ポップアップ表示

マーカー・ポップアップ表示

example path

./src/003

script.js

// マーカー・ポップアップ設定
var Map_Point = viewer.entities.add({
    name : '東京駅だよ!!',
    position : Cesium.Cartesian3.fromDegrees(139.767, 35.681),
    point : {
        pixelSize : 10,
        color : Cesium.Color.BLUE,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 2
    }
});
viewer.zoomTo(viewer.entities);



Other information