diff --git a/.gitignore b/.gitignore index 4b788b6c6..1faa503d5 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ css/style.css node_modules npm-debug-log plugins +index.json diff --git a/index.json b/index.json index 3420cb8d4..d3f16883c 100644 --- a/index.json +++ b/index.json @@ -80,52 +80,10 @@ } } }, - "cesiumIontoken": "", - "cesium3dTiles": [ - { - "url": "OSM-Buildings", - "maximumScreenSpaceError": 2, - "outline": true, - "shadows": true, - "filter": "${feature['elementId']} !== 251329024 && ${feature['elementId']} !== 425027205 && ${feature['elementId']} !== 425002757", - "style": [ - [ - "${feature['building']} === 'civic' || ${feature['building']} === 'construction' || ${feature['building']} === 'church'", - "color('#ed6258', 1)" - ], - [ - "${feature['building']} === 'commercial' || ${feature['building']} === 'retail' || ${feature['building']} === 'office'", - "color('#af8b74', 1)" - ], - [ - "${feature['building']} === 'apartments' || ${feature['building']} === 'residential' || ${feature['building']} === 'house' || ${feature['building']} === 'yes' || ${feature['building']} === 'roof'", - "color('#c98754', 1)" - ], - [ - "${feature['building']} === 'warehouse' || ${feature['building']} === 'manufacture' || ${feature['building']} === 'industrial'", - "color('#919494', 1)" - ], - [ - "${feature['building']} === 'school' || ${feature['amenity']} === 'university' || ${feature['building']} === 'kindergarten'", - "color('#ef7f77', 1)" - ], - [ - "${feature['building']} === 'parking' || ${feature['amenity']} === 'parking' || ${feature['building']} === 'garages' || ${feature['building']} === 'garage'", - "color('#af8b74', 1)" - ], - [ - "${feature['building']} === 'farm_auxiliary' || ${feature['building']} === 'detached'", - "color('#a69774', 1)" - ], - [ - true, - "color('#ef7f77', 1)" - ] - ] - } - ], + "cesiumIontoken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODc3ZjRhMS05OTkzLTQ1Y2UtOTYwZi1jMmU4Zjg1MDAwN2YiLCJpZCI6MTA2MDg0LCJpYXQiOjE2Nzk1NjcyNTJ9.JYFj4MaEJdhIB7O2K5hrBFIXgMLU-ea9bBiK4r0xRn0", + "cesium3dTiles": [], "cesiumTerrainProvider": "", - "cesiumIonassetIdTerrain": "" + "cesiumIonassetIdTerrain": 1 } } ], @@ -141,61 +99,46 @@ }, "projectionCode": "EPSG:3857", "projectionExtent": [ - -20037508.34, - -20037508.34, - 20037508.34, - 20037508.34 + -20037508.342789244, -20037508.342789244, 20037508.342789244, + 20037508.342789244 ], - "extent": [ - -20037508.34, - -20037508.34, - 20037508.34, - 20037508.34 + "proj4Defs": [ + { + "code": "EPSG:3006", + "projection": "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs" + } ], - "center": [ - 1770000, - 8770000 + "extent": [ + -20037508.342789244, -20037508.342789244, 20037508.342789244, + 20037508.342789244 ], - "zoom": 7, + "center": [-105000, 5371000], + "tileGridOptions": { + "alignBottomLeft": false + }, + "zoom": 13, "resolutions": [ - 156543.03390625, - 78271.516953125, - 39135.7584765625, - 19567.87923828125, - 9783.939619140625, - 4891.9698095703125, - 2445.9849047851562, - 1222.9924523925781, - 611.4962261962891, - 305.74811309814453, - 152.87405654907226, - 76.43702827453613, - 38.218514137268066, - 19.109257068634033, - 9.554628534317017, - 4.777314267158508, - 2.388657133579254, - 1.194328566789627, - 0.5971642833948135, - 0.29858214169740677, - 0.14929107084870338, - 0.07464553542435169, - 0.037322767712175846, - 0.018661383856087923, - 0.009330691928043961, - 0.004665345964021981, - 0.0023326729820109904, - 0.0011663364910054952, - 5.831682455027476E-4, - 2.915841227513738E-4, - 1.457920613756869E-4 + 156543.033928041, 78271.51696402048, 39135.75848201023, 19567.87924100512, + 9783.939620502561, 4891.96981025128, 2445.98490512564, 1222.99245256282, + 611.49622628141, 305.7481131407048, 152.8740565703525, 76.43702828517624, + 38.21851414258813, 19.10925707129406, 9.554628535647032, 4.777314267823516, + 2.388657133911758, 1.194328566955879 ], "featureinfoOptions": { - "infowindow": "overlay" + "infowindow": "infowindow" }, "source": { "local": { - "url": "http://localhost/geoserver/wms" + "url": "http://localhost:11111/geoserver/wms", + "projection": "EPSG:3857" + }, + "local_wmts": { + "url": "http://localhost:11111/geoserver/gwc/service/wmts", + "matrixIdsPrefix": "EPSG:4326:", + "matrixSet": "EPSG:4326" + }, + "ahocevar": { + "url": "https://ahocevar.com/geoserver/wms" } }, "groups": [ @@ -207,18 +150,110 @@ ], "layers": [ { - "name": "origo-cities", - "title": "Origokommuner", + "name": "Test:sauveterre", + "source": "local", + "title": "Test:sauveterre", "group": "root", - "source": "data/origo-cities-3857.geojson", - "style": "origo-logo", - "type": "GEOJSON", - "attributes": [ - { - "name": "name" - } - ], - "visible": true + "queryable": true, + "style": "orto", + "type": "WMS", + "visible": true, + "attribution": "© Patriks Goa Grejer", + "format": "image/png" + }, + { + "name": "OSMSTUFF", + "title": "OSMSTUFF_TITLE", + "type": "THREEDTILE", + "url": "OSM-Buildings", + "group": "root", + "queryable": true, + "maximumScreenSpaceError": 16, + "outline": true, + "shadows": true, + "visible": false, + "filter": "${feature['elementId']} !== 251329024 && ${feature['elementId']} !== 425027205 && ${feature['elementId']} !== 425002757", + "style": [ + [ + "${feature['building']} === 'civic' || ${feature['building']} === 'construction' || ${feature['building']} === 'church'", + "color('#ed6258', 1)" + ], + [ + "${feature['building']} === 'commercial' || ${feature['building']} === 'retail' || ${feature['building']} === 'office'", + "color('#af8b74', 1)" + ], + [ + "${feature['building']} === 'apartments' || ${feature['building']} === 'residential' || ${feature['building']} === 'house' || ${feature['building']} === 'yes' || ${feature['building']} === 'roof'", + "color('#c98754', 1)" + ], + [ + "${feature['building']} === 'warehouse' || ${feature['building']} === 'manufacture' || ${feature['building']} === 'industrial'", + "color('#919494', 1)" + ], + [ + "${feature['building']} === 'school' || ${feature['amenity']} === 'university' || ${feature['building']} === 'kindergarten'", + "color('#ef7f77', 1)" + ], + [ + "${feature['building']} === 'parking' || ${feature['amenity']} === 'parking' || ${feature['building']} === 'garages' || ${feature['building']} === 'garage'", + "color('#af8b74', 1)" + ], + [ + "${feature['building']} === 'farm_auxiliary' || ${feature['building']} === 'detached'", + "color('#a69774', 1)" + ], + [true, "color('#ef7f77', 1)"] + ] + }, + { + "name": "threedtileChurch", + "title": "CHURCH", + "url": 1286474, + "group": "root", + "maximumScreenSpaceError": 16, + "outline": true, + "shadows": true, + "visible": true, + "type": "THREEDTILE" + }, + { + "name": "Test:sauveterre_4326", + "source": "local", + "title": "Test:sauveterre_4326", + "group": "root", + "queryable": true, + "style": "orto", + "type": "WMS", + "visible": true, + "attribution": "© Patriks Goa Grejer", + "format": "image/png" + }, + + { + "name": "tiger:poly_landmarks", + "source": "local", + "title": "tiger:poly_landmarks", + "group": "root", + "queryable": true, + "style": "orto", + "type": "WMS", + "visible": true, + "attribution": "© Patriks Goa Grejer", + "format": "image/png", + "renderMode": "image" + }, + { + "name": "topp:states", + "source": "local", + "title": "topp:states", + "group": "root", + "queryable": true, + "style": "orto", + "type": "WMS", + "visible": true, + "attribution": "© Patriks Goa Grejer", + "format": "image/png", + "renderMode": "image" }, { "name": "osm", @@ -326,4 +361,3 @@ ] } } - diff --git a/src/controls/globe/globe.js b/src/controls/globe/globe.js index 7fb4189f0..b1f8eb7c3 100644 --- a/src/controls/globe/globe.js +++ b/src/controls/globe/globe.js @@ -1,22 +1,19 @@ -import * as Cesium from 'cesium'; -import OLCesium from 'olcs/OLCesium'; -import proj4 from 'proj4'; -import { Component, Button, dom, Element as El } from '../../ui'; -import getAttributes from '../../getattributes'; +import * as Cesium from "cesium"; +import OLCesium from "olcs/OLCesium"; +import proj4 from "proj4"; +import { Component, Button, dom, Element as El } from "../../ui"; +import getAttributes from "../../getattributes"; import flatpickr from "flatpickr"; -import Point from 'ol/geom/Point'; -import Feature from 'ol/Feature'; +import Point from "ol/geom/Point"; +import Feature from "ol/Feature"; + +import { Threedtile } from "../../layer/threedtile"; // ol-cesium depends on a global Cesium window.Cesium = Cesium; const Globe = function Globe(options = {}) { - - let { - target, - globeOnStart, - showGlobe = true - } = options; + let { target, globeOnStart, showGlobe = true } = options; const { resolutionScale = window.devicePixelRatio, @@ -24,7 +21,7 @@ const Globe = function Globe(options = {}) { cesium3dTiles, cesiumTerrainProvider, cesiumIontoken, - cesiumIonassetIdTerrain + cesiumIonassetIdTerrain, } = options; let map; @@ -42,22 +39,30 @@ const Globe = function Globe(options = {}) { let scene; let htmlString; let el; + let silhouetteBlue; const buttons = []; // Toggles between 2D and 3D const toggleGlobe = () => { - // Check if map projection is EPSG:4326 or EPSG:3857. + // Check if map projection is EPSG:4326 or EPSG:3857. // If map has other projection, don't activate globe and console error - if (viewer.getProjectionCode() === 'EPSG:4326' || viewer.getProjectionCode() === 'EPSG:3857') { + if ( + viewer.getProjectionCode() === "EPSG:4326" || + viewer.getProjectionCode() === "EPSG:3857" + ) { oGlobe.setEnabled(!oGlobe.getEnabled()); } else { - console.error('Map projection must be EPSG:4326 or EPSG:3857 to be able to use globe mode.'); + console.error( + "Map projection must be EPSG:4326 or EPSG:3857 to be able to use globe mode." + ); } }; // Init map with globe or not const activeGlobeOnStart = () => { - const activeOnStart = globeOnStart ? toggleGlobe() : oGlobe.setEnabled(false); + const activeOnStart = globeOnStart + ? toggleGlobe() + : oGlobe.setEnabled(false); return activeOnStart; }; @@ -74,7 +79,9 @@ const Globe = function Globe(options = {}) { // TODO // Put the cesium credits in origo credits container in origo style const cesiumCredits = () => { - document.querySelectorAll('.cesium-credit-logoContainer')[0].parentNode.style.display = 'none'; + document.querySelectorAll( + ".cesium-credit-logoContainer" + )[0].parentNode.style.display = "none"; }; // Terrain providers @@ -84,7 +91,7 @@ const Globe = function Globe(options = {}) { requestVertexNormals: true, // Add as option for 3D Tiles request // requestWaterMask: true, - url: cesiumTerrainProvider + url: cesiumTerrainProvider, }); scene.terrainProvider = terrain; } else if (cesiumIonassetIdTerrain && cesiumIontoken) { @@ -92,23 +99,23 @@ const Globe = function Globe(options = {}) { requestVertexNormals: true, // Add as option for 3D Tiles request // requestWaterMask: true, - url: Cesium.IonResource.fromAssetId(cesiumIonassetIdTerrain) + url: Cesium.IonResource.fromAssetId(cesiumIonassetIdTerrain), }); scene.terrainProvider = terrain; } else if (cesiumIontoken) { // Cesium world terrain is used as default if token is present terrain = Cesium.createWorldTerrain({ - requestVertexNormals: true + requestVertexNormals: true, }); scene.terrainProvider = terrain; } }; // Hides 3D tiles elements by id, not in use, using filter instead - // TODO + // TODO // Create helper to get array of id's from defined bbox or polygon const hide3DtilesById = (ids, tilesets) => { - const elementid = '${elementId} === '; + const elementid = "${elementId} === "; const conditions = []; ids.forEach((id) => { conditions.push([elementid + id, false]); @@ -116,90 +123,91 @@ const Globe = function Globe(options = {}) { conditions.push([true, true]); tilesets.style = new Cesium.Cesium3DTileStyle({ show: { - conditions - } + conditions, + }, }); }; // 3D tiles providers const cesium3DtilesProviders = () => { - if (cesium3dTiles) { - cesium3dTiles.forEach((tilesAsset) => { - const url = tilesAsset.url; - let shadows = tilesAsset.shadows; - let conditions = tilesAsset.style || undefined; - let show = tilesAsset.filter || 'undefined'; - if (typeof url === 'number' && cesiumIontoken) { - tileset = new Cesium.Cesium3DTileset({ + const layers = map.getLayers(); + layers.forEach((layer) => { + if (layer instanceof Threedtile) { + const { + url, + style, + filter, + outline, + name, + maximumScreenSpaceError, + visible, + shadows, + } = layer.getProperties(); + let layerTileset; + + let conditions = style !== "default" ? style : undefined; + let show = filter || "undefined"; + if (typeof url === "number" && cesiumIontoken) { + layerTileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(url), - maximumScreenSpaceError: tilesAsset.maximumScreenSpaceError, - showOutline: tilesAsset.outline || false, + instanceFeatureIdLabel: name, + maximumScreenSpaceError: maximumScreenSpaceError, + showOutline: outline || false, dynamicScreenSpaceError: true, dynamicScreenSpaceErrorDensity: 0.00278, dynamicScreenSpaceErrorFactor: 4.0, dynamicScreenSpaceErrorHeightFalloff: 0.25, - shadows // SHADOWS PROBLEM Is this working? + shadows, // SHADOWS PROBLEM Is this working? + show: visible, }); - } else if (tilesAsset.url === 'OSM-Buildings') { - tileset = new Cesium.createOsmBuildings({ - shadows // SHADOWS PROBLEM Is this working? + } else if (url === "OSM-Buildings") { + layerTileset = new Cesium.createOsmBuildings({ + instanceFeatureIdLabel: name, + shadows, // SHADOWS PROBLEM Is this working? + show: visible, }); } else { - tileset = new Cesium.Cesium3DTileset({ + layerTileset = new Cesium.Cesium3DTileset({ url, - maximumScreenSpaceError: tilesAsset.maximumScreenSpaceError, - showOutline: tilesAsset.outline || false, + maximumScreenSpaceError: maximumScreenSpaceError, + showOutline: outline || false, dynamicScreenSpaceError: true, dynamicScreenSpaceErrorDensity: 0.00278, dynamicScreenSpaceErrorFactor: 4.0, dynamicScreenSpaceErrorHeightFalloff: 0.25, - shadows // SHADOWS PROBLEM Is this working? + shadows, // SHADOWS PROBLEM Is this working? + show: visible, }); } - // hide3DtilesById(tilesAsset.hide3DtilesById, tileset); - scene.primitives.add(tileset); + const tileset = scene.primitives.add(layerTileset); + layer.CesiumTileset = tileset; if (conditions) { - tileset.style = new Cesium.Cesium3DTileStyle({ + layerTileset.style = new Cesium.Cesium3DTileStyle({ color: { - conditions + conditions, }, - show + show, }); } - - }); - } + } + }); }; // Origo style on picked feature const pickedFeatureStyle = () => { - const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); - if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(scene)) { - const silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); + silhouetteBlue = + Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); silhouetteBlue.uniforms.color = Cesium.Color.ROYALBLUE; silhouetteBlue.uniforms.length = 0.1; silhouetteBlue.selected = []; scene.postProcessStages.add( - Cesium.PostProcessStageLibrary.createSilhouetteStage([ - silhouetteBlue - ]) + Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue]) ); - handler.setInputAction((movement) => { - silhouetteBlue.selected = []; - const pickedFeature = scene.pick(movement.position); - if (silhouetteBlue.selected[0] === pickedFeature) { - return; - } - silhouetteBlue.selected = [pickedFeature]; - }, Cesium.ScreenSpaceEventType.LEFT_CLICK); - } else { - console.warn('Silhouette for 3d objects is not supported'); } }; - // Use featureInfo "overlay" for 3D-tiles const get3DFeatureInfo = () => { const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); @@ -211,42 +219,58 @@ const Globe = function Globe(options = {}) { const feature = scene.pick(click.position); const cartesian = scene.pickPosition(click.position); - if (Cesium.defined(feature) && feature instanceof Cesium.Cesium3DTileFeature) { + if (silhouetteBlue.selected[0] === feature) { + return; + } else { + silhouetteBlue.selected = [feature]; + } + + if ( + Cesium.defined(feature) && + feature instanceof Cesium.Cesium3DTileFeature + ) { + const layerName = feature.primitive.instanceFeatureIdLabel; + const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const lon = Cesium.Math.toDegrees(Number(cartographic.longitude)); const lat = Cesium.Math.toDegrees(Number(cartographic.latitude)); - // Use alt for height - // const alt = cartographic.height; + coordinate = [lon, lat]; - if (viewer.getProjectionCode() === 'EPSG:3857') { - coordinate = proj4('EPSG:4326', 'EPSG:3857', [lon, lat]); + + if (viewer.getProjectionCode() === "EPSG:3857") { + coordinate = proj4("EPSG:4326", "EPSG:3857", [lon, lat]); } const propertyIds = feature.getPropertyIds(); const contentItems = []; - propertyIds.forEach(propertyId => { + propertyIds.forEach((propertyId) => { const propId = feature.getProperty(propertyId); - title = feature.getProperty('name'); + title = feature.getProperty("name"); if (title === undefined) { - title = `Byggnadsid: ${feature.getProperty('elementId')}`; + title = `Byggnadsid: ${feature.getProperty("elementId")}`; } if (propId !== undefined) { - const content = ``; //skapar en ny olFeature här baserat på 2D-koordinaterna att skicka in till featureInfo //pga doRender() vill ha en sån. Utan Feature renderas popup på fel ställe, //även om man skickar med koordinater till featureInfo.render() obj.feature = new Feature({ geometry: new Point(coordinate), - name: 'DummyPoint', + title: `${title}`, + name: "DummyPoint", + content: `${contentItems.join(" ")}`, }); - featureInfo.render([obj], 'overlay', coordinate, coordinate); + featureInfo.showFeatureInfo(obj); } else if (!Cesium.defined(feature)) { featureInfo.clear(); } else if (feature.primitive.olFeature) { @@ -254,12 +278,12 @@ const Globe = function Globe(options = {}) { const primitive = feature.primitive.olFeature; const layer = feature.primitive.olLayer; - obj.feature = feature; - obj.title = feature.primitive.olLayer.get('title'); + obj.feature = primitive; + obj.title = feature.primitive.olLayer.get("title"); obj.content = getAttributes(primitive, layer); obj.layer = layer; - featureInfo.render([obj], 'overlay', coordinate); + featureInfo.render([obj], "overlay", coordinate); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }; @@ -283,8 +307,8 @@ const Globe = function Globe(options = {}) { // Change font-family const initFlatpickr = () => { flatpickrEl = El({ - tagName: 'div', - cls: 'flex column z-index-ontop-top-times20' + tagName: "div", + cls: "flex column z-index-ontop-top-times20", }); htmlString = flatpickrEl.render(); @@ -301,17 +325,29 @@ const Globe = function Globe(options = {}) { // Configure options for Cesium.Scene const sceneSettings = () => { - settings.enableAtmosphere = settings.enableAtmosphere ? scene.skyAtmosphere.show = true : scene.skyAtmosphere.show = false; - settings.enableFog = settings.enableFog ? scene.fog.enabled = true : scene.fog.enabled = false; - settings.enableShadows = settings.enableShadows ? scene.shadows = true : scene.shadows = false; + settings.enableAtmosphere = settings.enableAtmosphere + ? (scene.skyAtmosphere.show = true) + : (scene.skyAtmosphere.show = false); + settings.enableFog = settings.enableFog + ? (scene.fog.enabled = true) + : (scene.fog.enabled = false); + settings.enableShadows = settings.enableShadows + ? (scene.shadows = true) + : (scene.shadows = false); }; // Configure options for Cesium.Globe const globeSettings = () => { const globe = scene.globe; - settings.depthTestAgainstTerrain = settings.depthTestAgainstTerrain ? globe.depthTestAgainstTerrain = true : globe.depthTestAgainstTerrain = false; - settings.enableGroundAtmosphere = settings.enableGroundAtmosphere ? globe.showGroundAtmosphere = true : globe.showGroundAtmosphere = false; - settings.enableLighting = settings.enableLighting ? globe.enableLighting = true : globe.enableLighting = false; + settings.depthTestAgainstTerrain = settings.depthTestAgainstTerrain + ? (globe.depthTestAgainstTerrain = true) + : (globe.depthTestAgainstTerrain = false); + settings.enableGroundAtmosphere = settings.enableGroundAtmosphere + ? (globe.showGroundAtmosphere = true) + : (globe.showGroundAtmosphere = false); + settings.enableLighting = settings.enableLighting + ? (globe.enableLighting = true) + : (globe.enableLighting = false); if (settings.skyBox) { const url = settings.skyBox.url; scene.skyBox = new Cesium.SkyBox({ @@ -321,36 +357,36 @@ const Globe = function Globe(options = {}) { positiveY: `${url}${settings.skyBox.images.pY}`, negativeY: `${url}${settings.skyBox.images.nY}`, positiveZ: `${url}${settings.skyBox.images.pZ}`, - negativeZ: `${url}${settings.skyBox.images.nZ}` - } + negativeZ: `${url}${settings.skyBox.images.nZ}`, + }, }); } settings.skyBox = false; }; - // Asynchronously calls to component functions + // Asynchronously calls to component functions const callFuncAsync = async () => { await Promise.all([ terrainProviders(), cesium3DtilesProviders(), get3DFeatureInfo(), - pickedFeatureStyle(), showGlobeOption(), activeGlobeOnStart(), globeSettings(), sceneSettings(), - cesiumCredits() + cesiumCredits(), + pickedFeatureStyle(), ]); }; return Component({ - name: 'globe', + name: "globe", onAdd(evt) { viewer = evt.target; if (!target) target = `${viewer.getMain().getNavigation().getId()}`; oGlobeTarget = viewer.getId(); map = viewer.getMap(); - featureInfo = viewer.getControlByName('featureInfo'); + featureInfo = viewer.getControlByName("featureInfo"); // Init flatpickr to set the datetime in oGlobe.time initFlatpickr(); @@ -364,50 +400,50 @@ const Globe = function Globe(options = {}) { terrainExaggeration: 1, time: function () { return Cesium.JulianDate.fromDate(new Date(fp.element.value)); - } + }, }); // OLCesium needs to be global window.oGlobe = oGlobe; - // Gets Cesium.Scene + // Gets Cesium.Scene scene = oGlobe.getCesiumScene(); // setResolutionScale as configuration option oGlobe.setResolutionScale(resolutionScale); - // Asynchronously calls to component functions + // Asynchronously calls to component functions callFuncAsync(); - this.on('render', this.onRender); + this.on("render", this.onRender); this.addComponents(buttons); this.render(); }, onInit() { globeEl = El({ - tagName: 'div', - cls: 'flex column z-index-ontop-top-times20' + tagName: "div", + cls: "flex column z-index-ontop-top-times20", }); globeButton = Button({ - cls: 'o-measure padding-small margin-bottom-smaller icon-smaller round light box-shadow', + cls: "o-measure padding-small margin-bottom-smaller icon-smaller round light box-shadow", click() { // Toggles globe on/off // TODO // Toggle flatpickrButton aswell toggleGlobe(); }, - icon: '#fa-cube', - tooltipText: 'Globe', - tooltipPlacement: 'east' + icon: "#fa-cube", + tooltipText: "Globe", + tooltipPlacement: "east", }); buttons.push(globeButton); flatpickrButton = Button({ - cls: 'o-measure-length padding-small margin-bottom-smaller icon-smaller round light box-shadow', + cls: "o-measure-length padding-small margin-bottom-smaller icon-smaller round light box-shadow", click() { // Toggles datetime picker fp.open(); }, - icon: '#ic_clock_24px', - tooltipText: 'Datetime picker', - tooltipPlacement: 'east' + icon: "#ic_clock_24px", + tooltipText: "Datetime picker", + tooltipPlacement: "east", }); buttons.push(flatpickrButton); }, @@ -422,8 +458,8 @@ const Globe = function Globe(options = {}) { el = dom.html(htmlString); document.getElementById(globeEl.getId()).appendChild(el); - this.dispatch('render'); - } + this.dispatch("render"); + }, }); }; diff --git a/src/layer/layertype.js b/src/layer/layertype.js index 8a6a5a59b..a2079bf02 100644 --- a/src/layer/layertype.js +++ b/src/layer/layertype.js @@ -1,17 +1,18 @@ -import wfs from './wfs'; -import agsFeature from './agsfeature'; -import agsMap from './agsmap'; -import topojson from './topojson'; -import geojson from './geojson'; -import gpx from './gpx'; -import kml from './kml'; -import wms from './wms'; -import wmts from './wmts'; -import agsTile from './agstile'; -import xyz from './xyz'; -import osm from './osm'; -import vectortile from './vectortile'; -import feature from './featurelayer'; +import wfs from "./wfs"; +import agsFeature from "./agsfeature"; +import agsMap from "./agsmap"; +import topojson from "./topojson"; +import geojson from "./geojson"; +import gpx from "./gpx"; +import kml from "./kml"; +import wms from "./wms"; +import wmts from "./wmts"; +import agsTile from "./agstile"; +import xyz from "./xyz"; +import osm from "./osm"; +import vectortile from "./vectortile"; +import feature from "./featurelayer"; +import { threedtile } from "./threedtile"; const type = {}; @@ -29,5 +30,6 @@ type.XYZ = xyz; type.OSM = osm; type.VECTORTILE = vectortile; type.FEATURE = feature; +type.THREEDTILE = threedtile; export default type; diff --git a/src/layer/threedtile.js b/src/layer/threedtile.js new file mode 100644 index 000000000..50050fd2c --- /dev/null +++ b/src/layer/threedtile.js @@ -0,0 +1,35 @@ +import Layer from "ol/layer/Layer"; +import Source from "ol/source/Source"; +import LayerProperty from "ol/layer/Property.js"; + +const superOptions = { + render: function () {}, +}; +class Threedtile extends Layer { + constructor(options) { + super(superOptions); + for (const [key, value] of Object.entries(options)) { + key === "visible" + ? this.set(LayerProperty.VISIBLE, value) + : (this.values_[key] = value); + } + this.setVisible = function (visible) { + this.set(LayerProperty.VISIBLE, visible); + this.CesiumTileset.show = !this.CesiumTileset.show; + }; + this.setSource(new Source({ projection: "EPSG:4326" })); + this.getMaxResolution = function () { + return 10000000; + }; + this.getMinResolution = function () { + return 0; + }; + } +} + +const threedtile = function threedtile(options) { + //const threedtileOptions = Object.assign(layerOptions); + + return new Threedtile(options); +}; +export { threedtile, Threedtile };