mirror of
https://github.com/openglobus/openglobus.git
synced 2025-12-08 19:25:27 +00:00
232 lines
8.3 KiB
JavaScript
232 lines
8.3 KiB
JavaScript
'use strict';
|
|
|
|
import { Globe } from '../../src/og/Globe.js';
|
|
import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
|
|
import { BilTerrain } from '../../src/og/terrain/BilTerrain.js';
|
|
import { MapboxTerrain } from '../../src/og/terrain/MapboxTerrain.js';
|
|
import { XYZ } from '../../src/og/layer/XYZ.js';
|
|
import { WMS } from '../../src/og/layer/WMS.js';
|
|
import { CanvasTiles } from '../../src/og/layer/CanvasTiles.js';
|
|
import { Vector } from '../../src/og/layer/Vector.js';
|
|
import { Entity } from '../../src/og/entity/Entity.js';
|
|
import { DebugInfo } from '../../src/og/control/DebugInfo.js';
|
|
import { ToggleWireframe } from '../../src/og/control/ToggleWireframe.js';
|
|
import * as math from '../../src/og/math.js';
|
|
import { LayerSwitcher } from '../../src/og/control/LayerSwitcher.js';
|
|
|
|
// document.getElementById("ambient-r").addEventListener("input", function (e) {
|
|
// osm.ambient.x = this.value;
|
|
// document.querySelector(".value.ambient-r").innerHTML = this.value;
|
|
// });
|
|
// document.getElementById("ambient-g").addEventListener("input", function (e) {
|
|
// osm.ambient.y = this.value;
|
|
// document.querySelector(".value.ambient-g").innerHTML = this.value;
|
|
// });
|
|
// document.getElementById("ambient-b").addEventListener("input", function (e) {
|
|
// osm.ambient.z = this.value;
|
|
// document.querySelector(".value.ambient-b").innerHTML = this.value;
|
|
// });
|
|
|
|
// document.getElementById("diffuse-r").addEventListener("input", function (e) {
|
|
// osm.diffuse.x = this.value;
|
|
// document.querySelector(".value.diffuse-r").innerHTML = this.value;
|
|
// });
|
|
// document.getElementById("diffuse-g").addEventListener("input", function (e) {
|
|
// osm.diffuse.y = this.value;
|
|
// document.querySelector(".value.diffuse-g").innerHTML = this.value;
|
|
// });
|
|
// document.getElementById("diffuse-b").addEventListener("input", function (e) {
|
|
// osm.diffuse.z = this.value;
|
|
// document.querySelector(".value.diffuse-b").innerHTML = this.value;
|
|
// });
|
|
|
|
// document.getElementById("specular-r").addEventListener("input", function (e) {
|
|
// osm.specular.x = this.value;
|
|
// document.querySelector(".value.specular-r").innerHTML = this.value;
|
|
// });
|
|
// document.getElementById("specular-g").addEventListener("input", function (e) {
|
|
// osm.specular.y = this.value;
|
|
// document.querySelector(".value.specular-g").innerHTML = this.value;
|
|
// });
|
|
// document.getElementById("specular-b").addEventListener("input", function (e) {
|
|
// osm.specular.z = this.value;
|
|
// document.querySelector(".value.specular-b").innerHTML = this.value;
|
|
// });
|
|
|
|
// document.getElementById("shininess").addEventListener("input", function (e) {
|
|
// osm.shininess = this.value;
|
|
// document.querySelector(".value.shininess").innerHTML = this.value;
|
|
// });
|
|
|
|
let cnv = document.createElement("canvas");
|
|
let ctx = cnv.getContext("2d");
|
|
cnv.width = 256;
|
|
cnv.height = 256;
|
|
|
|
const tg = new CanvasTiles("Tile grid", {
|
|
visibility: true,
|
|
isBaseLayer: false,
|
|
drawTile: function (material, applyCanvas) {
|
|
//Clear canvas
|
|
ctx.clearRect(0, 0, cnv.width, cnv.height);
|
|
|
|
//Draw border
|
|
ctx.beginPath();
|
|
ctx.rect(0, 0, cnv.width, cnv.height);
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeStyle = 'black';
|
|
ctx.stroke();
|
|
|
|
let size;
|
|
|
|
//Draw text
|
|
if (material.segment.tileZoom > 17) {
|
|
size = "18";
|
|
} else if (material.segment.tileZoom > 14) {
|
|
size = "26";
|
|
} else {
|
|
size = "32";
|
|
}
|
|
ctx.fillStyle = 'black';
|
|
ctx.font = 'normal ' + size + 'px Verdana';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);
|
|
|
|
//Draw canvas tile
|
|
applyCanvas(cnv);
|
|
}
|
|
});
|
|
|
|
let osm = new XYZ("OSM", {
|
|
'specular': [0.0003, 0.00012, 0.00001],
|
|
'shininess': 20,
|
|
'diffuse': [0.89, 0.9, 0.83],
|
|
'isBaseLayer': true,
|
|
'url': "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
'visibility': true,
|
|
'attribution': 'Data @ OpenStreetMap contributors, ODbL'
|
|
});
|
|
|
|
|
|
//let wien = new XYZ("512", {
|
|
// 'isBaseLayer': true,
|
|
// 'url': "//maps.wien.gv.at/basemap/bmaphidpi/normal/google3857/{z}/{y}/{x}.jpeg",
|
|
// 'visibility': false
|
|
//});
|
|
|
|
|
|
let modis = new XYZ("modis", {
|
|
'specular': [0.0003, 0.00012, 0.00001],
|
|
'shininess': 20,
|
|
'diffuse': [0.89, 0.9, 0.83],
|
|
'isBaseLayer': true,
|
|
'url': "//gibs-a.earthdata.nasa.gov/wmts/epsg3857/best/MODIS_Terra_CorrectedReflectance_TrueColor/default/2020-04-04/EPSG3857_250m/{z}/{y}/{x}.jpg",
|
|
'visibility': false,
|
|
'maxNativeZoom': 9
|
|
});
|
|
|
|
|
|
var states = new WMS("USA Population", {
|
|
extent: [[-127, 24.5], [-66.5, 48]],
|
|
opacity: 0.7,
|
|
visibility: false,
|
|
isBaseLayer: false,
|
|
url: "//95.211.82.211:8080/geoserver",
|
|
layers: "topp:states",
|
|
transparentColor: [1.0, 1.0, 1.0]
|
|
});
|
|
|
|
//let sat = new XYZ("MapQuest Satellite", {
|
|
// 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: "//api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?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>"`
|
|
//});
|
|
|
|
let sat = new XYZ("MapQuest Satellite", {
|
|
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: "http://api.tomtom.com/map/1/tile/basic/night/{z}/{x}/{y}.png?key=44LDLhblEzN2HswvgkU7wRFIOmoNUqFe",
|
|
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>"`
|
|
});
|
|
|
|
window.globe = new Globe({
|
|
'name': "Earth",
|
|
'target': "earth",
|
|
'terrain': new GlobusTerrain(),
|
|
'layers': [osm, sat, tg, states, modis],
|
|
'viewExtent': [7.86, 44.24, 11.29, 45.0]
|
|
});
|
|
|
|
function test(a) {
|
|
console.log(a);
|
|
};
|
|
|
|
//window.globe = new Globe({
|
|
// target: "earth",
|
|
// name: "Bil Terrain Source",
|
|
// terrain: new BilTerrain({
|
|
// url: "//95.211.82.211:8080/geoserver/og/",
|
|
// layers: "og:n44_e009_1arc_v3",
|
|
// imageSize: 128,
|
|
// extent: [[8.9, 44.0], [10.0, 45]]
|
|
// }),
|
|
// viewExtent: [7.86, 44.24, 11.29, 45.0],
|
|
// layers: [osm, sat, tg, states]
|
|
//});
|
|
|
|
globe.planet.addControl(new DebugInfo());
|
|
globe.planet.addControl(new ToggleWireframe({
|
|
isActive: false
|
|
}));
|
|
|
|
globe.planet.addControl(new LayerSwitcher());
|
|
|
|
let e1 = new Entity({
|
|
'name': 'strip1',
|
|
'strip': {
|
|
'color': [0 / 255, 38 / 255, 255 / 255],
|
|
'opacity': 0.27,
|
|
'path': [
|
|
[[586523.0151173624, 4392830.957760274, 4570544.574074627], [587043.0890180465, 4396726.110503412, 4574597.306676116]],
|
|
[[693687.4135420445, 4446600.854589337, 4502800.243641092], [694306.9328021071, 4450572.030680254, 4506821.6103556845]],
|
|
[[695057.6327224943, 4446368.161289945, 4502875.06522507], [695283.9105581088, 4447815.688108607, 4504340.988014539]],
|
|
[[695379.6262299116, 4446451.841945512, 4502776.850023308], [695603.3364033864, 4447882.307370998, 4504225.435734251]]
|
|
],
|
|
}
|
|
});
|
|
|
|
let e2 = new Entity({
|
|
'name': 'strip2',
|
|
'strip': {
|
|
'color': [0 / 255, 38 / 255, 255 / 255],
|
|
'opacity': 0.27,
|
|
'path': [
|
|
[[661936.3048841777, 4745603.382222995, 4189411.525681237], [1339051.734436527, 9600030.082993329, 8474892.113242555]],
|
|
[[1126928.1072783293, 4760811.647727539, 4071007.90108061], [2277324.752646721, 9620768.297494425, 8226795.481871399]]
|
|
],
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
let stripLayer = new Vector("test layer", {
|
|
'entities': [e1, e2],
|
|
'pickingEnabled': false,
|
|
'visibility': true
|
|
});
|
|
|
|
globe.planet.addLayer(stripLayer); |