typebrook/arcgis.html

## arcgis.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to SceneLayer | Sample | ArcGIS API for JavaScript 4.16</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/SceneLayer"
      ], function (Map, SceneView, SceneLayer) {
        // Create Map
        var map = new Map({
          basemap: "dark-gray-vector",
          ground: "world-elevation"
        });

        // Create the SceneView
        var view = new SceneView({
          container: "viewDiv",
          map: map,
          camera: {
            position: [121.738843, 25.131318, 707],
            tilt: 81,
            heading: 50
          }
        });

        // Create SceneLayer and add to the map
        var sceneLayer = new SceneLayer({
            url: "https://mapserver01.nlsc.gov.tw/LOD1/i3s/rest/services/nlsc/SceneServer/layers/3"
        });
        map.add(sceneLayer);

        // Create MeshSymbol3D for symbolizing SceneLayer
        var symbol = {
          type: "mesh-3d", // autocasts as new MeshSymbol3D()
          symbolLayers: [
            {
              type: "fill", // autocasts as new FillSymbol3DLayer()
              // If the value of material is not assigned, the default color will be grey
              material: {
                color: [244, 247, 134]
              }
            }
          ]
        };
        // Add the renderer to sceneLayer
        sceneLayer.renderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: symbol
        };
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

## cesium.html
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer" style="width: 100%; height:100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url: "https://mapserver01.nlsc.gov.tw/LOD1/tiles3d/基隆市近似模型/tileset.json",
        }))
        Cesium.when(tileset.readyPromise).then(function (tileset) {viewer.flyTo(tileset)}) // fly to 3D tiles after loading!
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="initial-scale=1,maximum-scale=1,user-scalable=no"
	/>
	<title>Intro to SceneLayer \| Sample \| ArcGIS API for JavaScript 4.16</title>
	<style>
	html,
	body,
	#viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	</style>

	<link
	rel="stylesheet"
	href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
	/>
	<script src="https://js.arcgis.com/4.16/"></script>

	<script>
	require([
	"esri/Map",
	"esri/views/SceneView",
	"esri/layers/SceneLayer"
	], function (Map, SceneView, SceneLayer) {
	// Create Map
	var map = new Map({
	basemap: "dark-gray-vector",
	ground: "world-elevation"
	});

	// Create the SceneView
	var view = new SceneView({
	container: "viewDiv",
	map: map,
	camera: {
	position: [121.738843, 25.131318, 707],
	tilt: 81,
	heading: 50
	}
	});

	// Create SceneLayer and add to the map
	var sceneLayer = new SceneLayer({
	url: "https://mapserver01.nlsc.gov.tw/LOD1/i3s/rest/services/nlsc/SceneServer/layers/3"
	});
	map.add(sceneLayer);

	// Create MeshSymbol3D for symbolizing SceneLayer
	var symbol = {
	type: "mesh-3d", // autocasts as new MeshSymbol3D()
	symbolLayers: [
	{
	type: "fill", // autocasts as new FillSymbol3DLayer()
	// If the value of material is not assigned, the default color will be grey
	material: {
	color: [244, 247, 134]
	}
	}
	]
	};
	// Add the renderer to sceneLayer
	sceneLayer.renderer = {
	type: "simple", // autocasts as new SimpleRenderer()
	symbol: symbol
	};
	});
	</script>
	</head>

	<body>
	<div id="viewDiv"></div>
	</body>
	</html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script>
	<link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
	</head>
	<body>
	<div id="cesiumContainer" style="width: 100%; height:100%"></div>
	<script>
	var viewer = new Cesium.Viewer('cesiumContainer');
	var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
	url: "https://mapserver01.nlsc.gov.tw/LOD1/tiles3d/基隆市近似模型/tileset.json",
	}))
	Cesium.when(tileset.readyPromise).then(function (tileset) {viewer.flyTo(tileset)}) // fly to 3D tiles after loading!
	</script>
	</body>
	</html>