Takuya Miyashita
This site
Web
Start:
*Google Earth Engine - カラーバーの表示 [#cd965655]
**テスト用の基本図 (colorbar なしの図) [#r1616f0a]
下記のようにコードを描いて下の図の状態を基本に,colorbar ...
#codeprettify(lang-js){{
// load
var image = ee.Image('users/miyashitafwk/topotif_tokyo');
// print information to console
print(image);
// Pull the package from the GitHub repo which stores col...
// See https://github.com/gee-community/ee-palettes for m...
var palettes = require('users/gena/packages:palettes');
var vis = {
min: -5.0,
max: 100.0,
palette: palettes.crameri.tofino[50],
};
// show topohraphy (scientific colors)
Map.addLayer(image, vis, 'topo_tokyo_scientific'); // var...
Map.centerObject(image, 11); // varname, zoom level
}}
#ref(https://main-t-miyashita.ssl-lolipop.jp/hydrocoast/i...
~
~
**colorbar 縦向き [#aab5e1d7]
#codeprettify(lang-js){{
//LEGEND (Vertical, Gradient, position can be changed int...
//Source: https://mygeoblog.com/2017/03/02/creating-a-gra...
// set position of panel
var legendpos = ui.Panel({
style: {
position: 'bottom-right',
padding: '8px 15px'
}
});
// Create legend title
var legendTitle = ui.Label({
value: 'Elevation (m)',
style: {
fontWeight: 'bold',
fontSize: '16px',
margin: '0 0 4px 0',
padding: '0'
}
});
// Add the title to the panel
legendpos.add(legendTitle);
// create the legend image
var lon = ee.Image.pixelLonLat().select('latitude');
var gradient = lon.multiply((vis.max-vis.min)/100).add(vi...
var legendImage = gradient.visualize(vis);
// create text on top of legend
var panel = ui.Panel({
widgets: [
ui.Label(vis['max'])
],
});
legendpos.add(panel);
// create thumbnail from the image
var thumbnail = ui.Thumbnail({
image: legendImage,
params: {bbox:'0,0,10,100', dimensions:'10x200'},
style: {padding: '1px', position: 'bottom-center'}
});
// add the thumbnail to the legend
legendpos.add(thumbnail);
// create text on top of legend
var panel = ui.Panel({
widgets: [
ui.Label(vis['min'])
],
});
legendpos.add(panel);
Map.add(legendpos);
}}
#ref(https://main-t-miyashita.ssl-lolipop.jp/hydrocoast/i...
~
~
**colorbar 横向き [#k2d47b5f]
#codeprettify(lang-js){{
var palette_topo = palettes.crameri.tofino[50]
//LEGEND VERSION 1 (Horizontal, Centered, position is not...
// Source: https://gis.stackexchange.com/questions/421937...
// Creates a 50-step color bar thumbnail image for use in...
function makeColorBarParams(palette) {
return {
bbox: [0, 0, 50, 0.1],
dimensions: '100x10',
format: 'png',
min: 0,
max: 50,
palette: palette_topo,
};
}
// Create the colour bar for the legend
var colorBar = ui.Thumbnail({
image: ee.Image.pixelLonLat().select('longitude').int(),
params: makeColorBarParams(vis.palette),
style: {position: 'bottom-left', stretch: 'horizontal',...
});
// Create a panel with three numbers for the legend
var legendLabels = ui.Panel({
widgets: [
ui.Label(vis.min, {margin: '4px 8px'}),
ui.Label(
((vis.max-vis.min) / 2+vis.min),
{margin: '4px 8px', textAlign: 'center', stretch:...
ui.Label(vis.max, {margin: '4px 8px'})
],
layout: ui.Panel.Layout.flow('horizontal')
});
// Legend title
var legendTitle = ui.Label({
value: 'Elevation (m)',
style: {fontWeight: 'bold', textAlign: 'middle'}
});
// Add the legendPanel to the map
var legendPanel = ui.Panel([legendTitle, colorBar, legend...
// Legend position
var legendpos = ui.Panel({
style: {
position: 'top-left',
padding: '8px 15px'
}
});
legendpos.add(legendPanel);
Map.add(legendpos);
}}
#ref(https://main-t-miyashita.ssl-lolipop.jp/hydrocoast/i...
~
~
**参考 [#r005064a]
-[[Creating a vertical color bar in Google Earth Engine>h...
End:
*Google Earth Engine - カラーバーの表示 [#cd965655]
**テスト用の基本図 (colorbar なしの図) [#r1616f0a]
下記のようにコードを描いて下の図の状態を基本に,colorbar ...
#codeprettify(lang-js){{
// load
var image = ee.Image('users/miyashitafwk/topotif_tokyo');
// print information to console
print(image);
// Pull the package from the GitHub repo which stores col...
// See https://github.com/gee-community/ee-palettes for m...
var palettes = require('users/gena/packages:palettes');
var vis = {
min: -5.0,
max: 100.0,
palette: palettes.crameri.tofino[50],
};
// show topohraphy (scientific colors)
Map.addLayer(image, vis, 'topo_tokyo_scientific'); // var...
Map.centerObject(image, 11); // varname, zoom level
}}
#ref(https://main-t-miyashita.ssl-lolipop.jp/hydrocoast/i...
~
~
**colorbar 縦向き [#aab5e1d7]
#codeprettify(lang-js){{
//LEGEND (Vertical, Gradient, position can be changed int...
//Source: https://mygeoblog.com/2017/03/02/creating-a-gra...
// set position of panel
var legendpos = ui.Panel({
style: {
position: 'bottom-right',
padding: '8px 15px'
}
});
// Create legend title
var legendTitle = ui.Label({
value: 'Elevation (m)',
style: {
fontWeight: 'bold',
fontSize: '16px',
margin: '0 0 4px 0',
padding: '0'
}
});
// Add the title to the panel
legendpos.add(legendTitle);
// create the legend image
var lon = ee.Image.pixelLonLat().select('latitude');
var gradient = lon.multiply((vis.max-vis.min)/100).add(vi...
var legendImage = gradient.visualize(vis);
// create text on top of legend
var panel = ui.Panel({
widgets: [
ui.Label(vis['max'])
],
});
legendpos.add(panel);
// create thumbnail from the image
var thumbnail = ui.Thumbnail({
image: legendImage,
params: {bbox:'0,0,10,100', dimensions:'10x200'},
style: {padding: '1px', position: 'bottom-center'}
});
// add the thumbnail to the legend
legendpos.add(thumbnail);
// create text on top of legend
var panel = ui.Panel({
widgets: [
ui.Label(vis['min'])
],
});
legendpos.add(panel);
Map.add(legendpos);
}}
#ref(https://main-t-miyashita.ssl-lolipop.jp/hydrocoast/i...
~
~
**colorbar 横向き [#k2d47b5f]
#codeprettify(lang-js){{
var palette_topo = palettes.crameri.tofino[50]
//LEGEND VERSION 1 (Horizontal, Centered, position is not...
// Source: https://gis.stackexchange.com/questions/421937...
// Creates a 50-step color bar thumbnail image for use in...
function makeColorBarParams(palette) {
return {
bbox: [0, 0, 50, 0.1],
dimensions: '100x10',
format: 'png',
min: 0,
max: 50,
palette: palette_topo,
};
}
// Create the colour bar for the legend
var colorBar = ui.Thumbnail({
image: ee.Image.pixelLonLat().select('longitude').int(),
params: makeColorBarParams(vis.palette),
style: {position: 'bottom-left', stretch: 'horizontal',...
});
// Create a panel with three numbers for the legend
var legendLabels = ui.Panel({
widgets: [
ui.Label(vis.min, {margin: '4px 8px'}),
ui.Label(
((vis.max-vis.min) / 2+vis.min),
{margin: '4px 8px', textAlign: 'center', stretch:...
ui.Label(vis.max, {margin: '4px 8px'})
],
layout: ui.Panel.Layout.flow('horizontal')
});
// Legend title
var legendTitle = ui.Label({
value: 'Elevation (m)',
style: {fontWeight: 'bold', textAlign: 'middle'}
});
// Add the legendPanel to the map
var legendPanel = ui.Panel([legendTitle, colorBar, legend...
// Legend position
var legendpos = ui.Panel({
style: {
position: 'top-left',
padding: '8px 15px'
}
});
legendpos.add(legendPanel);
Map.add(legendpos);
}}
#ref(https://main-t-miyashita.ssl-lolipop.jp/hydrocoast/i...
~
~
**参考 [#r005064a]
-[[Creating a vertical color bar in Google Earth Engine>h...
Page:
Edit with a page name which already exists