Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20170528.md

Created May 28, 2017 09:45
Show Gist options
  • Save frogcat/e85aec7a780ed0276b42bd2529952485 to your computer and use it in GitHub Desktop.
Save frogcat/e85aec7a780ed0276b42bd2529952485 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
20170528.md

農研機構・日本土壌インベントリー(土壌図) を Cesium で表示

  • 背景画像に地理院傾斜量図
  • 前面に土壌図()
Raw
cs.js
(function(window) {
var CS = {};
CS.map = function(element, options) {
options = options || {};
var obj = {
viewer: new Cesium.Viewer(element, {
timeline: false,
animation: false,
homeButton: false,
geocoder: false,
sceneModePicker: false,
baseLayerPicker: false,
fullscreenButton: false,
terrainExaggeration: options.terrainExaggeration || 1.0,
terrainProvider: new Cesium.CesiumTerrainProvider({
url: "https://assets.agi.com/stk-terrain/world",
requestWaterMask: true,
requestVertexNormals: true
}),
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
})
}),
setView: function(latLng, heading, pitch) {
this.viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(latLng.lng, latLng.lat, latLng.alt),
orientation: {
heading: Cesium.Math.toRadians(heading),
pitch: Cesium.Math.toRadians(pitch),
roll: 0
}
});
return this;
},
addLayer: function(layer) {
this.viewer.imageryLayers.addImageryProvider(layer.imageryProvider);
return this;
}
};
return obj;
};
CS.latLng = function(lat, lng, alt) {
return {
lat: lat,
lng: lng,
alt: alt
};
};
CS.tileLayer = function(url, options) {
var opt = {
url: url
};
if (options.attribution) opt.credit = options.attribution;
if (options.minZoom) opt.minimumLevel = options.minZoom;
if (options.maxZoom) opt.maximumLevel = options.maxZoom;
var imageryProvider = new Cesium.UrlTemplateImageryProvider(opt);
if (options.opacity) imageryProvider.defaultAlpha = options.opacity;
if (options.brightness) imageryProvider.defaultBrightness = options.brightness;
if (options.contrast) imageryProvider.defaultContrast = options.contrast;
if (options.gamma) imageryProvider.defaultGamma = options.gamma;
if (options.hue) imageryProvider.defaultHue = options.hue;
if (options.saturation) imageryProvider.defaultSaturation = options.saturation;
return {
imageryProvider: imageryProvider,
addTo: function(map) {
map.addLayer(this);
return this;
}
}
};
window.CS = CS;
})(window);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<title>cesium</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/Build/Cesium/Widgets/widgets.css" />
<script src="https://unpkg.com/[email protected]/Build/Cesium/Cesium.js"></script>
<script src="cs.js"></script>
</head>
<body>
<div id="container" style="position:absolute;top:0;left:0;bottom:0;right:0;user-select:none;"></div>
<script>
var map = CS.map("container", {
terrainExaggeration: 5.0
}).setView(CS.latLng(28.603885, 145.530003, 1119707), 320, -45);
CS.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/slopemap/{z}/{x}/{y}.png", {
attribution: "地理院タイル(傾斜量図)",
minZoom: 2,
maxZoom: 18
}).addTo(map);
CS.tileLayer("http://soil-inventory.dc.affrc.go.jp/tile/figure/{z}/{x}/{y}.png", {
attribution: "農研機構・日本土壌インベントリー(土壌図)",
minZoom: 2,
maxZoom: 15,
opacity: 0.2,
saturation: 1 / 0.2
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment