mirror of
https://github.com/openglobus/openglobus.git
synced 2025-12-08 19:25:27 +00:00
174 lines
7.2 KiB
HTML
174 lines
7.2 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>OpenGlobus - Earth planet</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../../css/og.css" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="globus" style="width:100%;height:100%"></div>
|
|
<script type="module">
|
|
'use strict';
|
|
|
|
import { Globe } from '../../src/og/Globe.js';
|
|
import { XYZ } from '../../src/og/layer/XYZ.js';
|
|
import { WMS } from '../../src/og/layer/WMS.js';
|
|
import { Vector } from '../../src/og/layer/Vector.js';
|
|
import { GeoImage } from '../../src/og/layer/GeoImage.js';
|
|
import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
|
|
import { LayerSwitcher } from '../../src/og/control/LayerSwitcher.js';
|
|
|
|
var osm = new XYZ("OpenStreetMap", {
|
|
fading: true,
|
|
isBaseLayer: true,
|
|
url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
visibility: true,
|
|
attribution: 'Data @ OpenStreetMap contributors, ODbL'
|
|
});
|
|
|
|
var sat1 = new XYZ("MapQuest Satellite", {
|
|
fading: true,
|
|
shininess: 20,
|
|
specular: [0.00048, 0.00037, 0.00035],
|
|
diffuse: [0.88, 0.85, 0.8],
|
|
ambient: [0.15, 0.1, 0.23],
|
|
isBaseLayer: true,
|
|
url: "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
|
|
visibility: false,
|
|
attribution: `@2014 MapQuest - Portions @2014 "Map data @
|
|
<a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
|
|
<a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
|
|
});
|
|
|
|
var sat2 = new XYZ("MapQuest Satellite With Labels", {
|
|
fading: true,
|
|
shininess: 20,
|
|
specular: [0.00048, 0.00037, 0.00035],
|
|
diffuse: [0.88, 0.85, 0.8],
|
|
ambient: [0.15, 0.1, 0.23],
|
|
isBaseLayer: true,
|
|
url: "https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
|
|
visibility: false,
|
|
attribution: `@2014 MapQuest - Portions @2014 "Map data @
|
|
<a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
|
|
<a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
|
|
});
|
|
|
|
var dark = new XYZ("MapQuest Dark", {
|
|
fading: true,
|
|
shininess: 20,
|
|
specular: [0.00048, 0.00037, 0.00035],
|
|
diffuse: [0.88, 0.85, 0.8],
|
|
ambient: [0.15, 0.1, 0.23],
|
|
isBaseLayer: true,
|
|
url: "https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
|
|
visibility: false,
|
|
attribution: `@2014 MapQuest - Portions @2014 "Map data @
|
|
<a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
|
|
<a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
|
|
});
|
|
|
|
var light = new XYZ("MapQuest Light", {
|
|
fading: true,
|
|
shininess: 20,
|
|
specular: [0.00048, 0.00037, 0.00035],
|
|
diffuse: [0.88, 0.85, 0.8],
|
|
ambient: [0.15, 0.1, 0.23],
|
|
isBaseLayer: true,
|
|
url: "https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
|
|
visibility: false,
|
|
attribution: `@2014 MapQuest - Portions @2014 "Map data @
|
|
<a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
|
|
<a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
|
|
});
|
|
|
|
var states = new WMS("USA Population", {
|
|
fading: true,
|
|
extent: [[-128, 24], [-66, 49]],
|
|
visibility: false,
|
|
isBaseLayer: false,
|
|
url: "//openglobus.org:8080/geoserver/",
|
|
layers: "topp:states",
|
|
opacity: 0.4,
|
|
attribution: 'Hi!',
|
|
transparentColor: [1.0, 1.0, 1.0]
|
|
});
|
|
|
|
var colorado = new GeoImage("Colorado Lagoon from ISS", {
|
|
fading: true,
|
|
src: "colorado-lagoon.jpg",
|
|
corners: [[-67.53063210679933, -22.148203215209232], [-67.76790919786042, -22.472194951833597], [-67.98127275782282, -22.331289122713546], [-67.74288424259892, -21.991520350954644]],
|
|
visibility: false,
|
|
isBaseLayer: false,
|
|
attribution: `
|
|
<a href="https://vk.com/olegmks">Oleg Artemjev</a>`,
|
|
opacity: 1
|
|
});
|
|
|
|
var vector = new Vector("Vector Green Area", {
|
|
fading: true,
|
|
'visibility': false,
|
|
'isBaseLayer': false,
|
|
'diffuse': [0, 0, 0],
|
|
'ambient': [1, 1, 1],
|
|
'entities': [{
|
|
'geometry': {
|
|
'type': "Polygon",
|
|
'coordinates': [[[10, 20], [10, 30], [20, 30], [20, 20]]],
|
|
'style': {
|
|
'lineWidth': 8,
|
|
'fillColor': "rgba(0, 190, 0, 0.6)",
|
|
'lineColor': "green"
|
|
}
|
|
}
|
|
}, {
|
|
'lonlat': [14, 25],
|
|
'label': {
|
|
'text': "Green Area",
|
|
'outline': 0.5,
|
|
'outlineColor': "rgba(0,0,0,0.55)",
|
|
'size': 43,
|
|
'color': "#00ff00",
|
|
'face': "verdana",
|
|
'align': "center"
|
|
}
|
|
}, {
|
|
'geometry': {
|
|
'type': "Polygon",
|
|
'coordinates': [[[0, 17], [6, 36], [12, 17]]],
|
|
'style': {
|
|
'lineWidth': 8,
|
|
'fillColor': "rgba(190, 0, 0, 0.6)",
|
|
'lineColor': "red"
|
|
}
|
|
}
|
|
}, {
|
|
'lonlat': [5, 23],
|
|
'label': {
|
|
'text': "Red Area",
|
|
'outline': 0.2,
|
|
'outlineColor': "rgba(0,0,0,0.45)",
|
|
'size': 23,
|
|
'color': "#ff0000",
|
|
'face': "verdana",
|
|
'align': "center"
|
|
}
|
|
}]
|
|
});
|
|
|
|
var globus = new Globe({
|
|
"target": "globus",
|
|
"name": "Earth",
|
|
"terrain": new GlobusTerrain("OpenGlobus"),
|
|
"layers": [osm, sat1, sat2, light, dark, states, colorado, vector]
|
|
});
|
|
|
|
globus.planet.addControl(new LayerSwitcher());
|
|
|
|
window.planet = globus.planet;
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |