mirror of https://github.com/CesiumGS/cesium.git
Merge pull request #12913 from CesiumGS/google-azure-2d-imagery
Google2D & Azure2D ImageryProvider classes
This commit is contained in:
Luke McKinstry
GitHub
commit
0e357283da
|
|
@ -0,0 +1,94 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="Imagery tiles from Google Maps with additional parameters to create overlays and custom styles."
|
||||
/>
|
||||
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
|
||||
<title>Cesium Demo</title>
|
||||
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
||||
<script type="module" src="../load-cesium-es6.js"></script>
|
||||
</head>
|
||||
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
|
||||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
<script id="cesium_sandcastle_script">
|
||||
window.startup = async function (Cesium) {
|
||||
"use strict";
|
||||
//Sandcastle_Begin
|
||||
const assetId = 3830184;
|
||||
|
||||
const base = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.Google2DImageryProvider.fromIonAssetId({
|
||||
assetId,
|
||||
mapType: "satellite",
|
||||
}),
|
||||
);
|
||||
|
||||
const overlay = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.Google2DImageryProvider.fromIonAssetId({
|
||||
assetId,
|
||||
overlayLayerType: "layerRoadmap",
|
||||
styles: [
|
||||
{
|
||||
stylers: [{ hue: "#00ffe6" }, { saturation: -20 }],
|
||||
},
|
||||
{
|
||||
featureType: "road",
|
||||
elementType: "geometry",
|
||||
stylers: [{ lightness: 100 }, { visibility: "simplified" }],
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
viewer.imageryLayers.add(base);
|
||||
viewer.imageryLayers.add(overlay);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
});
|
||||
//Sandcastle_End
|
||||
Sandcastle.finishedLoading();
|
||||
};
|
||||
if (typeof Cesium !== "undefined") {
|
||||
window.startupCalled = true;
|
||||
window.startup(Cesium).catch((error) => {
|
||||
"use strict";
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<meta name="description" content="Global imagery data from Google Maps." />
|
||||
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
|
||||
<title>Cesium Demo</title>
|
||||
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
||||
<script type="module" src="../load-cesium-es6.js"></script>
|
||||
</head>
|
||||
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
|
||||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
<script id="cesium_sandcastle_script">
|
||||
window.startup = async function (Cesium) {
|
||||
"use strict";
|
||||
//Sandcastle_Begin
|
||||
const assetId = 3830184;
|
||||
|
||||
const google = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.IonImageryProvider.fromAssetId(assetId),
|
||||
);
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
viewer.imageryLayers.add(google);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
}); //Sandcastle_End
|
||||
Sandcastle.finishedLoading();
|
||||
};
|
||||
if (typeof Cesium !== "undefined") {
|
||||
window.startupCalled = true;
|
||||
window.startup(Cesium).catch((error) => {
|
||||
"use strict";
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,98 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<meta name="description" content="Global imagery assets available from Cesium ion." />
|
||||
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
|
||||
<title>Cesium Demo</title>
|
||||
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
||||
<script type="module" src="../load-cesium-es6.js"></script>
|
||||
</head>
|
||||
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
|
||||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
<script id="cesium_sandcastle_script">
|
||||
window.startup = async function (Cesium) {
|
||||
"use strict";
|
||||
//Sandcastle_Begin
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
const menuOptions = [];
|
||||
|
||||
const dropdownOptions = [
|
||||
{ label: "Google Maps 2D Contour", assetId: 3830186 },
|
||||
{ label: "Google Maps 2D Labels Only", assetId: 3830185 },
|
||||
{ label: "Google Maps 2D Roadmap", assetId: 3830184 },
|
||||
{ label: "Google Maps 2D Satellite", assetId: 3830182 },
|
||||
{ label: "Google Maps 2D Satellite with Labels", assetId: 3830183 },
|
||||
{ label: "Bing Maps Aerial", assetId: 2 },
|
||||
{ label: "Bing Maps Aerial with Labels", assetId: 3 },
|
||||
{ label: "Bing Maps Road", assetId: 4 },
|
||||
{ label: "Bing Maps Labels Only", assetId: 2411391 },
|
||||
{ label: "Sentinel-2", assetId: 3954 },
|
||||
];
|
||||
|
||||
function showLayer(assetId) {
|
||||
viewer.imageryLayers.removeAll(true);
|
||||
const layer = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.IonImageryProvider.fromAssetId(assetId),
|
||||
);
|
||||
viewer.imageryLayers.add(layer);
|
||||
}
|
||||
|
||||
dropdownOptions.forEach((opt) => {
|
||||
const option = {
|
||||
text: opt.label,
|
||||
onselect: function () {
|
||||
showLayer(opt.assetId);
|
||||
},
|
||||
};
|
||||
menuOptions.push(option);
|
||||
});
|
||||
|
||||
Sandcastle.addToolbarMenu(menuOptions);
|
||||
|
||||
showLayer(3830186);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
}); //Sandcastle_End
|
||||
Sandcastle.finishedLoading();
|
||||
};
|
||||
if (typeof Cesium !== "undefined") {
|
||||
window.startupCalled = true;
|
||||
window.startup(Cesium).catch((error) => {
|
||||
"use strict";
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<meta name="description" content="Global imagery data from Azure Maps." />
|
||||
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
|
||||
<title>Cesium Demo</title>
|
||||
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
||||
<script type="module" src="../load-cesium-es6.js"></script>
|
||||
</head>
|
||||
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
|
||||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
<script id="cesium_sandcastle_script">
|
||||
window.startup = async function (Cesium) {
|
||||
"use strict";
|
||||
//Sandcastle_Begin
|
||||
Cesium.Ion.defaultServer = "https://api.ion-staging.cesium.com";
|
||||
Cesium.Ion.defaultAccessToken = "";
|
||||
|
||||
const assetId = 1683;
|
||||
|
||||
const azure = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.IonImageryProvider.fromAssetId(assetId),
|
||||
);
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
viewer.imageryLayers.add(azure);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
}); //Sandcastle_End
|
||||
Sandcastle.finishedLoading();
|
||||
};
|
||||
if (typeof Cesium !== "undefined") {
|
||||
window.startupCalled = true;
|
||||
window.startup(Cesium).catch((error) => {
|
||||
"use strict";
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -20,6 +20,7 @@
|
|||
|
||||
#### Additions :tada:
|
||||
|
||||
- Adds Google2DImageryProvider to load imagery from [Google Maps](https://developers.google.com/maps/documentation/tile/2d-tiles-overview) [#12913](https://github.com/CesiumGS/cesium/pull/12913)
|
||||
- Adds an async factory method for the Material class that allows callers to wait on resource loading. [#10566](https://github.com/CesiumGS/cesium/issues/10566)
|
||||
|
||||
## 1.133.1 - 2025-09-08
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@ GoogleMaps.defaultApiKey = undefined;
|
|||
* Gets or sets the default Google Map Tiles API endpoint.
|
||||
*
|
||||
* @type {string|Resource}
|
||||
* @default https://tile.googleapis.com/v1/
|
||||
* @default https://tile.googleapis.com/
|
||||
*/
|
||||
GoogleMaps.mapTilesApiEndpoint = new Resource({
|
||||
url: "https://tile.googleapis.com/v1/",
|
||||
url: "https://tile.googleapis.com/",
|
||||
});
|
||||
|
||||
GoogleMaps.getDefaultCredit = function () {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,12 @@ function IonResource(endpoint, endpointResource) {
|
|||
retryAttempts: 1,
|
||||
retryCallback: retryCallback,
|
||||
};
|
||||
} else if (["GOOGLE_2D_MAPS", "AZURE_MAPS"].includes(externalType)) {
|
||||
options = {
|
||||
url: endpoint.options.url,
|
||||
retryAttempts: 1,
|
||||
retryCallback: retryCallback,
|
||||
};
|
||||
} else if (
|
||||
externalType === "3DTILES" ||
|
||||
externalType === "STK_TERRAIN_SERVER"
|
||||
|
|
@ -84,7 +90,7 @@ if (defined(Object.create)) {
|
|||
* @param {object} [options] An object with the following properties:
|
||||
* @param {string} [options.accessToken=Ion.defaultAccessToken] The access token to use.
|
||||
* @param {string|Resource} [options.server=Ion.defaultServer] The resource to the Cesium ion API server.
|
||||
* @returns {Promise<IonResource>} A Promise to am instance representing the Cesium ion Asset.
|
||||
* @returns {Promise<IonResource>} A Promise to an instance representing the Cesium ion Asset.
|
||||
*
|
||||
* @example
|
||||
* // Load a Cesium3DTileset with asset ID of 124624234
|
||||
|
|
@ -207,7 +213,7 @@ IonResource.prototype._makeRequest = function (options) {
|
|||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
**/
|
||||
IonResource._createEndpointResource = function (assetId, options) {
|
||||
//>>includeStart('debug', pragmas.debug);
|
||||
Check.defined("assetId", assetId);
|
||||
|
|
@ -226,6 +232,13 @@ IonResource._createEndpointResource = function (assetId, options) {
|
|||
resourceOptions.queryParameters = { access_token: accessToken };
|
||||
}
|
||||
|
||||
if (defined(options.queryParameters)) {
|
||||
resourceOptions.queryParameters = {
|
||||
...resourceOptions.queryParameters,
|
||||
...options.queryParameters,
|
||||
};
|
||||
}
|
||||
|
||||
addClientHeaders(resourceOptions);
|
||||
|
||||
return server.getDerivedResource(resourceOptions);
|
||||
|
|
@ -267,9 +280,21 @@ function retryCallback(that, error) {
|
|||
ionRoot._pendingPromise = endpointResource
|
||||
.fetchJson()
|
||||
.then(function (newEndpoint) {
|
||||
//Set the token for root resource so new derived resources automatically pick it up
|
||||
// Set the token for root resource so new derived resources automatically pick it up
|
||||
ionRoot._ionEndpoint = newEndpoint;
|
||||
return newEndpoint;
|
||||
// Reset the session token for Google 2D imagery
|
||||
if (newEndpoint.externalType === "GOOGLE_2D_MAPS") {
|
||||
ionRoot.setQueryParameters({
|
||||
session: newEndpoint.options.session,
|
||||
key: newEndpoint.options.key,
|
||||
});
|
||||
}
|
||||
if (newEndpoint.externalType === "AZURE_MAPS") {
|
||||
ionRoot.setQueryParameters({
|
||||
"subscription-key": newEndpoint.options["subscription-key"],
|
||||
});
|
||||
}
|
||||
return ionRoot._ionEndpoint;
|
||||
})
|
||||
.finally(function (newEndpoint) {
|
||||
// Pass or fail, we're done with this promise, the next failure should use a new one.
|
||||
|
|
@ -284,4 +309,5 @@ function retryCallback(that, error) {
|
|||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
export default IonResource;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,308 @@
|
|||
import Check from "../Core/Check.js";
|
||||
import Credit from "../Core/Credit.js";
|
||||
import defined from "../Core/defined.js";
|
||||
import Resource from "../Core/Resource.js";
|
||||
import IonResource from "../Core/IonResource.js";
|
||||
import UrlTemplateImageryProvider from "./UrlTemplateImageryProvider.js";
|
||||
|
||||
const trailingSlashRegex = /\/$/;
|
||||
|
||||
/**
|
||||
* @typedef {object} Azure2DImageryProvider.ConstructorOptions
|
||||
*
|
||||
* Initialization options for the Azure2DImageryProvider constructor
|
||||
*
|
||||
* @property {object} options Object with the following properties:
|
||||
* @property {string} [options.url="https://atlas.microsoft.com/"] The Azure server url.
|
||||
* @property {string} [options.tilesetId="microsoft.imagery"] The Azure tileset ID. Valid options are {@link microsoft.imagery}, {@link microsoft.base.road}, and {@link microsoft.base.labels.road}
|
||||
* @property {string} options.subscriptionKey The public subscription key for the imagery.
|
||||
* @property {Ellipsoid} [options.ellipsoid=Ellipsoid.default] The ellipsoid. If not specified, the default ellipsoid is used.
|
||||
* @property {number} [options.minimumLevel=0] The minimum level-of-detail supported by the imagery provider. Take care when specifying
|
||||
* this that the number of tiles at the minimum level is small, such as four or less. A larger number is likely
|
||||
* to result in rendering problems.
|
||||
* @property {number} [options.maximumLevel=22] The maximum level-of-detail supported by the imagery provider.
|
||||
* @property {Rectangle} [options.rectangle=Rectangle.MAX_VALUE] The rectangle, in radians, covered by the image.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Provides 2D image tiles from Azure.
|
||||
*
|
||||
* @alias Azure2DImageryProvider
|
||||
* @constructor
|
||||
* @private
|
||||
* @param {Azure2DImageryProvider.ConstructorOptions} options Object describing initialization options
|
||||
*
|
||||
* @example
|
||||
* // Azure 2D imagery provider
|
||||
* const azureImageryProvider = new Cesium.Azure2DImageryProvider({
|
||||
* subscriptionKey: "subscription-key",
|
||||
* tilesetId: "microsoft.base.road"
|
||||
* });
|
||||
*/
|
||||
function Azure2DImageryProvider(options) {
|
||||
options = options ?? {};
|
||||
options.maximumLevel = options.maximumLevel ?? 22;
|
||||
options.minimumLevel = options.minimumLevel ?? 0;
|
||||
|
||||
const subscriptionKey =
|
||||
options.subscriptionKey ?? options["subscription-key"];
|
||||
//>>includeStart('debug', pragmas.debug);
|
||||
Check.defined("options.tilesetId", options.tilesetId);
|
||||
Check.defined("options.subscriptionKey", subscriptionKey);
|
||||
//>>includeEnd('debug');
|
||||
|
||||
const resource =
|
||||
options.url instanceof IonResource
|
||||
? options.url
|
||||
: Resource.createIfNeeded(options.url ?? "https://atlas.microsoft.com/");
|
||||
|
||||
let templateUrl = resource.getUrlComponent();
|
||||
if (!trailingSlashRegex.test(templateUrl)) {
|
||||
templateUrl += "/";
|
||||
}
|
||||
templateUrl += `map/tile`;
|
||||
|
||||
resource.url = templateUrl;
|
||||
|
||||
resource.setQueryParameters({
|
||||
"api-version": "2024-04-01",
|
||||
tilesetId: options.tilesetId,
|
||||
zoom: `{z}`,
|
||||
x: `{x}`,
|
||||
y: `{y}`,
|
||||
"subscription-key": subscriptionKey,
|
||||
});
|
||||
|
||||
let credit;
|
||||
if (defined(options.credit)) {
|
||||
credit = options.credit;
|
||||
if (typeof credit === "string") {
|
||||
credit = new Credit(credit);
|
||||
}
|
||||
}
|
||||
|
||||
const provider = new UrlTemplateImageryProvider({
|
||||
...options,
|
||||
url: resource,
|
||||
credit: credit,
|
||||
});
|
||||
provider._resource = resource;
|
||||
this._imageryProvider = provider;
|
||||
|
||||
// This will be defined for ion resources
|
||||
this._tileCredits = resource.credits;
|
||||
}
|
||||
|
||||
Object.defineProperties(Azure2DImageryProvider.prototype, {
|
||||
/**
|
||||
* Gets the URL of the Azure 2D Imagery server.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {string}
|
||||
* @readonly
|
||||
*/
|
||||
url: {
|
||||
get: function () {
|
||||
return this._imageryProvider.url;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the rectangle, in radians, of the imagery provided by the instance.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {Rectangle}
|
||||
* @readonly
|
||||
*/
|
||||
rectangle: {
|
||||
get: function () {
|
||||
return this._imageryProvider.rectangle;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the width of each tile, in pixels.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
tileWidth: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tileWidth;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the height of each tile, in pixels.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
tileHeight: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tileHeight;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the maximum level-of-detail that can be requested.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {number|undefined}
|
||||
* @readonly
|
||||
*/
|
||||
maximumLevel: {
|
||||
get: function () {
|
||||
return this._imageryProvider.maximumLevel;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the minimum level-of-detail that can be requested. Generally,
|
||||
* a minimum level should only be used when the rectangle of the imagery is small
|
||||
* enough that the number of tiles at the minimum level is small. An imagery
|
||||
* provider with more than a few tiles at the minimum level will lead to
|
||||
* rendering problems.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
minimumLevel: {
|
||||
get: function () {
|
||||
return this._imageryProvider.minimumLevel;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the tiling scheme used by the provider.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {TilingScheme}
|
||||
* @readonly
|
||||
*/
|
||||
tilingScheme: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tilingScheme;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the tile discard policy. If not undefined, the discard policy is responsible
|
||||
* for filtering out "missing" tiles via its shouldDiscardImage function. If this function
|
||||
* returns undefined, no tiles are filtered.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {TileDiscardPolicy}
|
||||
* @readonly
|
||||
*/
|
||||
tileDiscardPolicy: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tileDiscardPolicy;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets an event that is raised when the imagery provider encounters an asynchronous error.. By subscribing
|
||||
* to the event, you will be notified of the error and can potentially recover from it. Event listeners
|
||||
* are passed an instance of {@link TileProviderError}.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {Event}
|
||||
* @readonly
|
||||
*/
|
||||
errorEvent: {
|
||||
get: function () {
|
||||
return this._imageryProvider.errorEvent;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the credit to display when this imagery provider is active. Typically this is used to credit
|
||||
* the source of the imagery.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {Credit}
|
||||
* @readonly
|
||||
*/
|
||||
credit: {
|
||||
get: function () {
|
||||
return this._imageryProvider.credit;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the proxy used by this provider.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {Proxy}
|
||||
* @readonly
|
||||
*/
|
||||
proxy: {
|
||||
get: function () {
|
||||
return this._imageryProvider.proxy;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets a value indicating whether or not the images provided by this imagery provider
|
||||
* include an alpha channel. If this property is false, an alpha channel, if present, will
|
||||
* be ignored. If this property is true, any images without an alpha channel will be treated
|
||||
* as if their alpha is 1.0 everywhere. When this property is false, memory usage
|
||||
* and texture upload time are reduced.
|
||||
* @memberof Azure2DImageryProvider.prototype
|
||||
* @type {boolean}
|
||||
* @readonly
|
||||
*/
|
||||
hasAlphaChannel: {
|
||||
get: function () {
|
||||
return this._imageryProvider.hasAlphaChannel;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Gets the credits to be displayed when a given tile is displayed.
|
||||
*
|
||||
* @param {number} x The tile X coordinate.
|
||||
* @param {number} y The tile Y coordinate.
|
||||
* @param {number} level The tile level;
|
||||
* @returns {Credit[]|undefined} The credits to be displayed when the tile is displayed.
|
||||
*/
|
||||
Azure2DImageryProvider.prototype.getTileCredits = function (x, y, level) {
|
||||
return this._imageryProvider.getTileCredits(x, y, level);
|
||||
};
|
||||
|
||||
/**
|
||||
* Requests the image for a given tile.
|
||||
*
|
||||
* @param {number} x The tile X coordinate.
|
||||
* @param {number} y The tile Y coordinate.
|
||||
* @param {number} level The tile level.
|
||||
* @param {Request} [request] The request object. Intended for internal use only.
|
||||
* @returns {Promise<ImageryTypes>|undefined} A promise for the image that will resolve when the image is available, or
|
||||
* undefined if there are too many active requests to the server, and the request should be retried later.
|
||||
*/
|
||||
Azure2DImageryProvider.prototype.requestImage = function (
|
||||
x,
|
||||
y,
|
||||
level,
|
||||
request,
|
||||
) {
|
||||
return this._imageryProvider.requestImage(x, y, level, request);
|
||||
};
|
||||
|
||||
/**
|
||||
* Picking features is not currently supported by this imagery provider, so this function simply returns
|
||||
* undefined.
|
||||
*
|
||||
* @param {number} x The tile X coordinate.
|
||||
* @param {number} y The tile Y coordinate.
|
||||
* @param {number} level The tile level.
|
||||
* @param {number} longitude The longitude at which to pick features.
|
||||
* @param {number} latitude The latitude at which to pick features.
|
||||
* @return {undefined} Undefined since picking is not supported.
|
||||
*/
|
||||
Azure2DImageryProvider.prototype.pickFeatures = function (
|
||||
x,
|
||||
y,
|
||||
level,
|
||||
longitude,
|
||||
latitude,
|
||||
) {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
// Exposed for tests
|
||||
export default Azure2DImageryProvider;
|
||||
|
|
@ -194,7 +194,7 @@ function appendCss(container) {
|
|||
.cesium-credit-lightbox.cesium-credit-lightbox-expanded {
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
max-width: 370px;
|
||||
max-width: 470px;
|
||||
}
|
||||
.cesium-credit-lightbox.cesium-credit-lightbox-mobile {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,614 @@
|
|||
import Credit from "../Core/Credit.js";
|
||||
import Frozen from "../Core/Frozen.js";
|
||||
import defined from "../Core/defined.js";
|
||||
import DeveloperError from "../Core/DeveloperError.js";
|
||||
import Resource from "../Core/Resource.js";
|
||||
import IonResource from "../Core/IonResource.js";
|
||||
import Check from "../Core/Check.js";
|
||||
import UrlTemplateImageryProvider from "./UrlTemplateImageryProvider.js";
|
||||
import GoogleMaps from "../Core/GoogleMaps.js";
|
||||
|
||||
const trailingSlashRegex = /\/$/;
|
||||
|
||||
/**
|
||||
* @typedef {Object} Google2DImageryProvider.ConstructorOptions
|
||||
*
|
||||
* Initialization options for the Google2DImageryProvider constructor
|
||||
*
|
||||
* @property {object} options Object with the following properties:
|
||||
* @property {string} options.key The Google api key to send with tile requests.
|
||||
* @property {string} options.session The Google session token that tracks the current state of your map and viewport.
|
||||
* @property {string|Resource|IonResource} options.url The Google 2D maps endpoint.
|
||||
* @property {string} options.tileWidth The width of each tile in pixels.
|
||||
* @property {string} options.tileHeight The height of each tile in pixels.
|
||||
* @property {Ellipsoid} [options.ellipsoid=Ellipsoid.default] The ellipsoid. If not specified, the default ellipsoid is used.
|
||||
* @property {number} [options.minimumLevel=0] The minimum level-of-detail supported by the imagery provider. Take care when specifying
|
||||
* this that the number of tiles at the minimum level is small, such as four or less. A larger number is likely
|
||||
* to result in rendering problems.
|
||||
* @property {number} [options.maximumLevel=22] The maximum level-of-detail supported by the imagery provider.
|
||||
* @property {Rectangle} [options.rectangle=Rectangle.MAX_VALUE] The rectangle, in radians, covered by the image.
|
||||
*/
|
||||
|
||||
/**
|
||||
* <div class="notice">
|
||||
* This object is normally not instantiated directly, use {@link Google2DImageryProvider.fromIonAssetId} or {@link Google2DImageryProvider.fromUrl}.
|
||||
* </div>
|
||||
*
|
||||
*
|
||||
* Provides 2D image tiles from {@link https://developers.google.com/maps/documentation/tile/2d-tiles-overview|Google 2D Tiles}.
|
||||
*
|
||||
* Google 2D Tiles can only be used with the Google geocoder.
|
||||
*
|
||||
* @alias Google2DImageryProvider
|
||||
* @constructor
|
||||
*
|
||||
* @param {Google2DImageryProvider.ConstructorOptions} options Object describing initialization options
|
||||
*
|
||||
* @example
|
||||
* // Google 2D imagery provider
|
||||
* const googleTilesProvider = Cesium.Google2DImageryProvider.fromIonAssetId({
|
||||
* assetId: 3830184
|
||||
* });
|
||||
* @example
|
||||
* // Use your own Google api key
|
||||
* Cesium.GoogleMaps.defaultApiKey = "your-api-key";
|
||||
*
|
||||
* const googleTilesProvider = Cesium.Google2DImageryProvider.fromUrl({
|
||||
* mapType: "SATELLITE"
|
||||
* });
|
||||
*
|
||||
|
||||
*
|
||||
* @see {@link https://developers.google.com/maps/documentation/tile/2d-tiles-overview}
|
||||
* @see {@link https://developers.google.com/maps/documentation/tile/session_tokens}
|
||||
* @see {@link https://en.wikipedia.org/wiki/IETF_language_tag|IETF Language Tags}
|
||||
* @see {@link https://cldr.unicode.org/|Common Locale Data Repository region identifiers}
|
||||
*/
|
||||
|
||||
function Google2DImageryProvider(options) {
|
||||
options = options ?? Frozen.EMPTY_OBJECT;
|
||||
this._maximumLevel = options.maximumLevel ?? 22;
|
||||
this._minimumLevel = options.minimumLevel ?? 0;
|
||||
|
||||
//>>includeStart("debug", pragmas.debug);
|
||||
Check.defined("options.session", options.session);
|
||||
Check.defined("options.tileWidth", options.tileWidth);
|
||||
Check.defined("options.tileHeight", options.tileHeight);
|
||||
Check.defined("options.key", options.key);
|
||||
//>>includeEnd("debug");
|
||||
|
||||
this._session = options.session;
|
||||
this._key = options.key;
|
||||
this._tileWidth = options.tileWidth;
|
||||
this._tileHeight = options.tileHeight;
|
||||
|
||||
const resource =
|
||||
options.url instanceof IonResource
|
||||
? options.url
|
||||
: Resource.createIfNeeded(options.url ?? GoogleMaps.mapTilesApiEndpoint);
|
||||
|
||||
let templateUrl = resource.getUrlComponent();
|
||||
if (!trailingSlashRegex.test(templateUrl)) {
|
||||
templateUrl += "/";
|
||||
}
|
||||
const tilesUrl = `${templateUrl}v1/2dtiles/{z}/{x}/{y}`;
|
||||
this._viewportUrl = `${templateUrl}tile/v1/viewport`;
|
||||
|
||||
resource.url = tilesUrl;
|
||||
|
||||
resource.setQueryParameters({
|
||||
session: encodeURIComponent(options.session),
|
||||
key: encodeURIComponent(options.key),
|
||||
});
|
||||
|
||||
let credit;
|
||||
if (defined(options.credit)) {
|
||||
credit = options.credit;
|
||||
if (typeof credit === "string") {
|
||||
credit = new Credit(credit);
|
||||
}
|
||||
}
|
||||
|
||||
const provider = new UrlTemplateImageryProvider({
|
||||
url: resource,
|
||||
credit: credit,
|
||||
tileWidth: options.tileWidth,
|
||||
tileHeight: options.tileHeight,
|
||||
ellipsoid: options.ellipsoid,
|
||||
rectangle: options.rectangle,
|
||||
maximumLevel: this._maximumLevel,
|
||||
minimumLevel: this._minimumLevel,
|
||||
});
|
||||
provider._resource = resource;
|
||||
this._imageryProvider = provider;
|
||||
|
||||
// This will be defined for ion resources
|
||||
this._tileCredits = resource.credits;
|
||||
this._attributionsByLevel = undefined;
|
||||
// Asynchronously request and populate _attributionsByLevel
|
||||
this.getViewportCredits();
|
||||
}
|
||||
|
||||
Object.defineProperties(Google2DImageryProvider.prototype, {
|
||||
/**
|
||||
* Gets the URL of the Google 2D Imagery server.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {string}
|
||||
* @readonly
|
||||
*/
|
||||
url: {
|
||||
get: function () {
|
||||
return this._imageryProvider.url;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the rectangle, in radians, of the imagery provided by the instance.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {Rectangle}
|
||||
* @readonly
|
||||
*/
|
||||
rectangle: {
|
||||
get: function () {
|
||||
return this._imageryProvider.rectangle;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the width of each tile, in pixels.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
tileWidth: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tileWidth;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the height of each tile, in pixels.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
tileHeight: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tileHeight;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the maximum level-of-detail that can be requested.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {number|undefined}
|
||||
* @readonly
|
||||
*/
|
||||
maximumLevel: {
|
||||
get: function () {
|
||||
return this._imageryProvider.maximumLevel;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the minimum level-of-detail that can be requested. Generally,
|
||||
* a minimum level should only be used when the rectangle of the imagery is small
|
||||
* enough that the number of tiles at the minimum level is small. An imagery
|
||||
* provider with more than a few tiles at the minimum level will lead to
|
||||
* rendering problems.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
minimumLevel: {
|
||||
get: function () {
|
||||
return this._imageryProvider.minimumLevel;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the tiling scheme used by the provider.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {TilingScheme}
|
||||
* @readonly
|
||||
*/
|
||||
tilingScheme: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tilingScheme;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the tile discard policy. If not undefined, the discard policy is responsible
|
||||
* for filtering out "missing" tiles via its shouldDiscardImage function. If this function
|
||||
* returns undefined, no tiles are filtered.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {TileDiscardPolicy}
|
||||
* @readonly
|
||||
*/
|
||||
tileDiscardPolicy: {
|
||||
get: function () {
|
||||
return this._imageryProvider.tileDiscardPolicy;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets an event that is raised when the imagery provider encounters an asynchronous error. By subscribing
|
||||
* to the event, you will be notified of the error and can potentially recover from it. Event listeners
|
||||
* are passed an instance of {@link TileProviderError}.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {Event}
|
||||
* @readonly
|
||||
*/
|
||||
errorEvent: {
|
||||
get: function () {
|
||||
return this._imageryProvider.errorEvent;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the credit to display when this imagery provider is active. Typically this is used to credit
|
||||
* the source of the imagery.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {Credit}
|
||||
* @readonly
|
||||
*/
|
||||
credit: {
|
||||
get: function () {
|
||||
return this._imageryProvider.credit;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the proxy used by this provider.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {Proxy}
|
||||
* @readonly
|
||||
*/
|
||||
proxy: {
|
||||
get: function () {
|
||||
return this._imageryProvider.proxy;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets a value indicating whether or not the images provided by this imagery provider
|
||||
* include an alpha channel. If this property is false, an alpha channel, if present, will
|
||||
* be ignored. If this property is true, any images without an alpha channel will be treated
|
||||
* as if their alpha is 1.0 everywhere. When this property is false, memory usage
|
||||
* and texture upload time are reduced.
|
||||
* @memberof Google2DImageryProvider.prototype
|
||||
* @type {boolean}
|
||||
* @readonly
|
||||
*/
|
||||
hasAlphaChannel: {
|
||||
get: function () {
|
||||
return this._imageryProvider.hasAlphaChannel;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Creates an {@link ImageryProvider} which provides 2D global tiled imagery from {@link https://developers.google.com/maps/documentation/tile/2d-tiles-overview|Google 2D Tiles}, streamed using the Cesium ion REST API.
|
||||
* @param {object} options Object with the following properties:
|
||||
* @param {string} options.assetId The Cesium ion asset id.
|
||||
* @param {"satellite" | "terrain" | "roadmap"} [options.mapType="satellite"] The map type of the Google map imagery. Valid options are satellite, terrain, and roadmap. If overlayLayerType is set, mapType is ignored and a transparent overlay is returned. If overlayMapType is undefined, then a basemap of mapType is returned. layerRoadmap overlayLayerType is included in terrain and roadmap mapTypes.
|
||||
* @param {string} [options.language="en_US"] an IETF language tag that specifies the language used to display information on the tiles
|
||||
* @param {string} [options.region="US"] A Common Locale Data Repository region identifier (two uppercase letters) that represents the physical location of the user.
|
||||
* @param {"layerRoadmap" | "layerStreetview" | "layerTraffic"} [options.overlayLayerType] Returns a transparent overlay map with the specified layerType. If no value is provided, a basemap of mapType is returned. Use multiple instances of Google2DImageryProvider to add multiple Google Maps overlays to a scene. layerRoadmap is included in terrain and roadmap mapTypes, so adding as overlay to terrain or roadmap has no effect.
|
||||
* @param {Object} [options.styles] An array of JSON style objects that specify the appearance and detail level of map features such as roads, parks, and built-up areas. Styling is used to customize the standard Google base map. The styles parameter is valid only if the mapType is roadmap. For the complete style syntax, see the ({@link https://developers.google.com/maps/documentation/tile/style-reference|Google Style Reference}).
|
||||
* @param {Ellipsoid} [options.ellipsoid=Ellipsoid.default] The ellipsoid. If not specified, the default ellipsoid is used.
|
||||
* @param {number} [options.minimumLevel=0] The minimum level-of-detail supported by the imagery provider. Take care when specifying
|
||||
* this that the number of tiles at the minimum level is small, such as four or less. A larger number is likely
|
||||
* to result in rendering problems.
|
||||
* @param {number} [options.maximumLevel=22] The maximum level-of-detail supported by the imagery provider.
|
||||
* @param {Rectangle} [options.rectangle=Rectangle.MAX_VALUE] The rectangle, in radians, covered by the image.
|
||||
* @param {Credit|string} [options.credit] A credit for the data source, which is displayed on the canvas.
|
||||
*
|
||||
* @returns {Promise<Google2DImageryProvider>} A promise that resolves to the created Google2DImageryProvider.
|
||||
*
|
||||
* @example
|
||||
* // Google 2D imagery provider
|
||||
* const googleTilesProvider = Cesium.Google2DImageryProvider.fromIonAssetId({
|
||||
* assetId: 3830184
|
||||
* });
|
||||
* @example
|
||||
* // Google 2D roadmap overlay with custom styles
|
||||
* const googleTileProvider = Cesium.Google2DImageryProvider.fromIonAssetId({
|
||||
* assetId: 3830184,
|
||||
* overlayLayerType: "layerRoadmap",
|
||||
* styles: [
|
||||
* {
|
||||
* stylers: [{ hue: "#00ffe6" }, { saturation: -20 }],
|
||||
* },
|
||||
* {
|
||||
* featureType: "road",
|
||||
* elementType: "geometry",
|
||||
* stylers: [{ lightness: 100 }, { visibility: "simplified" }],
|
||||
* },
|
||||
* ],
|
||||
* });
|
||||
*/
|
||||
Google2DImageryProvider.fromIonAssetId = async function (options) {
|
||||
options = options ?? {};
|
||||
options.mapType = options.mapType ?? "satellite";
|
||||
options.language = options.language ?? "en_US";
|
||||
options.region = options.region ?? "US";
|
||||
|
||||
const overlayLayerType = options.overlayLayerType;
|
||||
//>>includeStart("debug", pragmas.debug);
|
||||
if (defined(overlayLayerType)) {
|
||||
Check.typeOf.string("options.overlayLayerType", overlayLayerType);
|
||||
}
|
||||
Check.defined("options.assetId", options.assetId);
|
||||
//>>includeEnd("debug");
|
||||
|
||||
const queryOptions = buildQueryOptions(options);
|
||||
|
||||
const endpointResource = IonResource._createEndpointResource(
|
||||
options.assetId,
|
||||
{
|
||||
queryParameters: {
|
||||
options: JSON.stringify(queryOptions),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const endpoint = await endpointResource.fetchJson();
|
||||
const endpointOptions = { ...endpoint.options };
|
||||
delete endpointOptions.url;
|
||||
|
||||
const providerOptions = {
|
||||
language: options.language,
|
||||
region: options.region,
|
||||
ellipsoid: options.ellipsoid,
|
||||
minimumLevel: options.minimumLevel,
|
||||
maximumLevel: options.maximumLevel,
|
||||
rectangle: options.rectangle,
|
||||
credit: options.credit,
|
||||
};
|
||||
|
||||
return new Google2DImageryProvider({
|
||||
...endpointOptions,
|
||||
...providerOptions,
|
||||
url: new IonResource(endpoint, endpointResource),
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an {@link ImageryProvider} which provides 2D global tiled imagery from {@link https://developers.google.com/maps/documentation/tile/2d-tiles-overview|Google 2D Tiles}.
|
||||
* @param {object} options Object with the following properties:
|
||||
* @param {string} [options.key=GoogleMaps.defaultApiKey] Your API key to access Google 2D Tiles. See {@link https://developers.google.com/maps/documentation/javascript/get-api-key} for instructions on how to create your own key.
|
||||
* @param {"satellite" | "terrain" | "roadmap"} [options.mapType="satellite"] The map type of the Google map imagery. Valid options are satellite, terrain, and roadmap. If overlayLayerType is set, mapType is ignored and a transparent overlay is returned. If overlayMapType is undefined, then a basemap of mapType is returned. layerRoadmap overlayLayerType is included in terrain and roadmap mapTypes.
|
||||
* @param {string} [options.language="en_US"] an IETF language tag that specifies the language used to display information on the tiles
|
||||
* @param {string} [options.region="US"] A Common Locale Data Repository region identifier (two uppercase letters) that represents the physical location of the user.
|
||||
* @param {"layerRoadmap" | "layerStreetview" | "layerTraffic"} [options.overlayLayerType] Returns a transparent overlay map with the specified layerType. If no value is provided, a basemap of mapType is returned. Use multiple instances of Google2DImageryProvider to add multiple Google Maps overlays to a scene. layerRoadmap is included in terrain and roadmap mapTypes, so adding as overlay to terrain or roadmap has no effect.
|
||||
* @param {Object} [options.styles] An array of JSON style objects that specify the appearance and detail level of map features such as roads, parks, and built-up areas. Styling is used to customize the standard Google base map. The styles parameter is valid only if the mapType is roadmap. For the complete style syntax, see the ({@link https://developers.google.com/maps/documentation/tile/style-reference|Google Style Reference}).
|
||||
* @param {Ellipsoid} [options.ellipsoid=Ellipsoid.default] The ellipsoid. If not specified, the default ellipsoid is used.
|
||||
* @param {number} [options.minimumLevel=0] The minimum level-of-detail supported by the imagery provider. Take care when specifying
|
||||
* this that the number of tiles at the minimum level is small, such as four or less. A larger number is likely
|
||||
* to result in rendering problems.
|
||||
* @param {number} [options.maximumLevel=22] The maximum level-of-detail supported by the imagery provider.
|
||||
* @param {Rectangle} [options.rectangle=Rectangle.MAX_VALUE] The rectangle, in radians, covered by the image.
|
||||
* @param {Credit|string} [options.credit] A credit for the data source, which is displayed on the canvas.
|
||||
*
|
||||
* @returns {Promise<Google2DImageryProvider>} A promise that resolves to the created Google2DImageryProvider.
|
||||
*
|
||||
* @example
|
||||
* // Use your own Google api key
|
||||
* Cesium.GoogleMaps.defaultApiKey = "your-api-key";
|
||||
*
|
||||
* const googleTilesProvider = Cesium.Google2DImageryProvider.fromUrl({
|
||||
* mapType: "satellite"
|
||||
* });
|
||||
* @example
|
||||
* // Google 2D roadmap overlay with custom styles
|
||||
* Cesium.GoogleMaps.defaultApiKey = "your-api-key";
|
||||
*
|
||||
* const googleTileProvider = Cesium.Google2DImageryProvider.fromUrl({
|
||||
* overlayLayerType: "layerRoadmap",
|
||||
* styles: [
|
||||
* {
|
||||
* stylers: [{ hue: "#00ffe6" }, { saturation: -20 }],
|
||||
* },
|
||||
* {
|
||||
* featureType: "road",
|
||||
* elementType: "geometry",
|
||||
* stylers: [{ lightness: 100 }, { visibility: "simplified" }],
|
||||
* },
|
||||
* ],
|
||||
* });
|
||||
*/
|
||||
Google2DImageryProvider.fromUrl = async function (options) {
|
||||
options = options ?? {};
|
||||
options.mapType = options.mapType ?? "satellite";
|
||||
options.language = options.language ?? "en_US";
|
||||
options.region = options.region ?? "US";
|
||||
options.url = options.url ?? GoogleMaps.mapTilesApiEndpoint;
|
||||
options.key = options.key ?? GoogleMaps.defaultApiKey;
|
||||
|
||||
const overlayLayerType = options.overlayLayerType;
|
||||
//>>includeStart("debug", pragmas.debug);
|
||||
if (defined(overlayLayerType)) {
|
||||
Check.typeOf.string("overlayLayerType", overlayLayerType);
|
||||
}
|
||||
if (!defined(options.key) && !defined(GoogleMaps.defaultApiKey)) {
|
||||
throw new DeveloperError(
|
||||
"options.key or GoogleMaps.defaultApiKey is required.",
|
||||
);
|
||||
}
|
||||
//>>includeEnd("debug");
|
||||
|
||||
const sessionJson = await createGoogleImagerySession(options);
|
||||
return new Google2DImageryProvider({
|
||||
...sessionJson,
|
||||
...options,
|
||||
credit: options.credit ?? GoogleMaps.getDefaultCredit(),
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the credits to be displayed when a given tile is displayed.
|
||||
*
|
||||
* @param {number} x The tile X coordinate.
|
||||
* @param {number} y The tile Y coordinate.
|
||||
* @param {number} level The tile level;
|
||||
* @returns {Credit[]|undefined} The credits to be displayed when the tile is displayed.
|
||||
*/
|
||||
Google2DImageryProvider.prototype.getTileCredits = function (x, y, level) {
|
||||
const hasAttributions = defined(this._attributionsByLevel);
|
||||
|
||||
if (!hasAttributions || !defined(this._tileCredits)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const innerCredits = this._attributionsByLevel.get(level);
|
||||
if (!defined(this._tileCredits)) {
|
||||
return innerCredits;
|
||||
}
|
||||
|
||||
return this._tileCredits.concat(innerCredits);
|
||||
};
|
||||
|
||||
/**
|
||||
* Requests the image for a given tile.
|
||||
*
|
||||
* @param {number} x The tile X coordinate.
|
||||
* @param {number} y The tile Y coordinate.
|
||||
* @param {number} level The tile level.
|
||||
* @param {Request} [request] The request object. Intended for internal use only.
|
||||
* @returns {Promise<ImageryTypes>|undefined} A promise for the image that will resolve when the image is available, or
|
||||
* undefined if there are too many active requests to the server, and the request should be retried later.
|
||||
*/
|
||||
Google2DImageryProvider.prototype.requestImage = function (
|
||||
x,
|
||||
y,
|
||||
level,
|
||||
request,
|
||||
) {
|
||||
return this._imageryProvider.requestImage(x, y, level, request);
|
||||
};
|
||||
|
||||
/**
|
||||
* Picking features is not currently supported by this imagery provider, so this function simply returns
|
||||
* undefined.
|
||||
*
|
||||
* @param {number} x The tile X coordinate.
|
||||
* @param {number} y The tile Y coordinate.
|
||||
* @param {number} level The tile level.
|
||||
* @param {number} longitude The longitude at which to pick features.
|
||||
* @param {number} latitude The latitude at which to pick features.
|
||||
* @return {undefined} Undefined since picking is not supported.
|
||||
*/
|
||||
Google2DImageryProvider.prototype.pickFeatures = function (
|
||||
x,
|
||||
y,
|
||||
level,
|
||||
longitude,
|
||||
latitude,
|
||||
) {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get attribution for imagery from Google Maps to display in the credits
|
||||
* @private
|
||||
* @return {Promise<Map<Credit[]>>} The list of attribution sources to display in the credits.
|
||||
*/
|
||||
Google2DImageryProvider.prototype.getViewportCredits = async function () {
|
||||
const maximumLevel = this._maximumLevel;
|
||||
|
||||
const promises = [];
|
||||
for (let level = 0; level < maximumLevel + 1; level++) {
|
||||
promises.push(
|
||||
fetchViewportAttribution(
|
||||
this._viewportUrl,
|
||||
this._key,
|
||||
this._session,
|
||||
level,
|
||||
),
|
||||
);
|
||||
}
|
||||
const results = await Promise.all(promises);
|
||||
|
||||
const attributionsByLevel = new Map();
|
||||
for (let level = 0; level < maximumLevel + 1; level++) {
|
||||
const credits = [];
|
||||
const attributions = results[level];
|
||||
if (attributions) {
|
||||
const levelCredits = new Credit(attributions);
|
||||
credits.push(levelCredits);
|
||||
}
|
||||
attributionsByLevel.set(level, credits);
|
||||
}
|
||||
|
||||
this._attributionsByLevel = attributionsByLevel;
|
||||
|
||||
return attributionsByLevel;
|
||||
};
|
||||
|
||||
async function fetchViewportAttribution(url, key, session, level) {
|
||||
const viewport = await Resource.fetch({
|
||||
url: url,
|
||||
queryParameters: {
|
||||
key,
|
||||
session,
|
||||
zoom: level,
|
||||
north: 90,
|
||||
south: -90,
|
||||
east: 180,
|
||||
west: -180,
|
||||
},
|
||||
data: JSON.stringify(Frozen.EMPTY_OBJECT),
|
||||
});
|
||||
const viewportJson = JSON.parse(viewport);
|
||||
return viewportJson.copyright;
|
||||
}
|
||||
|
||||
function buildQueryOptions(options) {
|
||||
const { mapType, overlayLayerType, styles } = options;
|
||||
|
||||
const queryOptions = {
|
||||
mapType,
|
||||
overlay: false,
|
||||
};
|
||||
|
||||
if (mapType === "terrain" && !defined(overlayLayerType)) {
|
||||
queryOptions.layerTypes = ["layerRoadmap"];
|
||||
}
|
||||
|
||||
if (defined(overlayLayerType)) {
|
||||
queryOptions.mapType = "satellite";
|
||||
queryOptions.overlay = true;
|
||||
queryOptions.layerTypes = [overlayLayerType];
|
||||
}
|
||||
if (defined(styles)) {
|
||||
queryOptions.styles = styles;
|
||||
}
|
||||
return queryOptions;
|
||||
}
|
||||
|
||||
async function createGoogleImagerySession(options) {
|
||||
const { language, region, key, url } = options;
|
||||
|
||||
const queryOptions = buildQueryOptions(options);
|
||||
|
||||
let baseUrl = url.url ?? url;
|
||||
if (!trailingSlashRegex.test(baseUrl)) {
|
||||
baseUrl += "/";
|
||||
}
|
||||
|
||||
const response = await Resource.post({
|
||||
url: `${baseUrl}v1/createSession`,
|
||||
queryParameters: { key: key },
|
||||
data: JSON.stringify({
|
||||
...queryOptions,
|
||||
language,
|
||||
region,
|
||||
}),
|
||||
});
|
||||
const responseJson = JSON.parse(response);
|
||||
return responseJson;
|
||||
}
|
||||
|
||||
export default Google2DImageryProvider;
|
||||
|
|
@ -13,6 +13,8 @@ import SingleTileImageryProvider from "./SingleTileImageryProvider.js";
|
|||
import UrlTemplateImageryProvider from "./UrlTemplateImageryProvider.js";
|
||||
import WebMapServiceImageryProvider from "./WebMapServiceImageryProvider.js";
|
||||
import WebMapTileServiceImageryProvider from "./WebMapTileServiceImageryProvider.js";
|
||||
import Google2DImageryProvider from "./Google2DImageryProvider.js";
|
||||
import Azure2DImageryProvider from "./Azure2DImageryProvider.js";
|
||||
|
||||
// These values are the list of supported external imagery
|
||||
// assets in the Cesium ion beta. They are subject to change.
|
||||
|
|
@ -52,6 +54,18 @@ const ImageryProviderAsyncMapping = {
|
|||
...options,
|
||||
});
|
||||
},
|
||||
GOOGLE_2D_MAPS: (ionResource, options) => {
|
||||
return new Google2DImageryProvider({
|
||||
...options,
|
||||
url: ionResource,
|
||||
});
|
||||
},
|
||||
AZURE_MAPS: (ionResource, options) => {
|
||||
return new Azure2DImageryProvider({
|
||||
...options,
|
||||
url: ionResource,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -308,7 +322,14 @@ IonImageryProvider.fromAssetId = async function (assetId, options) {
|
|||
const options = { ...endpoint.options };
|
||||
const url = options.url;
|
||||
delete options.url;
|
||||
imageryProvider = await factory(url, options);
|
||||
if (["GOOGLE_2D_MAPS", "AZURE_MAPS"].includes(endpoint.externalType)) {
|
||||
imageryProvider = await factory(
|
||||
new IonResource(endpoint, endpointResource),
|
||||
options,
|
||||
);
|
||||
} else {
|
||||
imageryProvider = await factory(url, options);
|
||||
}
|
||||
}
|
||||
|
||||
const provider = new IonImageryProvider(options);
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ async function createGooglePhotorealistic3DTileset(apiOptions, tilesetOptions) {
|
|||
}
|
||||
|
||||
const resource = new Resource({
|
||||
url: `${GoogleMaps.mapTilesApiEndpoint}3dtiles/root.json`,
|
||||
url: `${GoogleMaps.mapTilesApiEndpoint}v1/3dtiles/root.json`,
|
||||
queryParameters: {
|
||||
key: key,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,194 @@
|
|||
import {
|
||||
Math as CesiumMath,
|
||||
Rectangle,
|
||||
Request,
|
||||
RequestScheduler,
|
||||
Resource,
|
||||
WebMercatorTilingScheme,
|
||||
Imagery,
|
||||
ImageryLayer,
|
||||
ImageryProvider,
|
||||
ImageryState,
|
||||
Azure2DImageryProvider,
|
||||
} from "../../index.js";
|
||||
|
||||
import pollToPromise from "../../../../Specs/pollToPromise.js";
|
||||
|
||||
describe("Scene/Azure2DImageryProvider", function () {
|
||||
afterEach(function () {
|
||||
Resource._Implementations.createImage =
|
||||
Resource._DefaultImplementations.createImage;
|
||||
});
|
||||
|
||||
it("conforms to ImageryProvider interface", function () {
|
||||
expect(Azure2DImageryProvider).toConformToInterface(ImageryProvider);
|
||||
});
|
||||
|
||||
it("requires the subscription key to be specified", function () {
|
||||
expect(function () {
|
||||
return new Azure2DImageryProvider({
|
||||
tilesetId: "a-tileset-id",
|
||||
});
|
||||
}).toThrowDeveloperError(
|
||||
"options.subscriptionKey is required, actual value was undefined",
|
||||
);
|
||||
});
|
||||
|
||||
it("requires tilesetId to be specified", function () {
|
||||
expect(function () {
|
||||
return new Azure2DImageryProvider({
|
||||
subscriptionKey: "a-subscription-key",
|
||||
});
|
||||
}).toThrowDeveloperError(
|
||||
"options.tilesetId is required, actual value was undefined",
|
||||
);
|
||||
});
|
||||
|
||||
it("requestImage returns a promise for an image and loads it for cross-origin use", function () {
|
||||
const provider = new Azure2DImageryProvider({
|
||||
subscriptionKey: "test-subscriptionKey",
|
||||
tilesetId: "a-tileset-id",
|
||||
});
|
||||
|
||||
expect(provider.url).toEqual(
|
||||
"https://atlas.microsoft.com/map/tile?api-version=2024-04-01&tilesetId=a-tileset-id&zoom={z}&x={x}&y={y}&subscription-key=test-subscriptionKey",
|
||||
);
|
||||
expect(provider.tileWidth).toEqual(256);
|
||||
expect(provider.tileHeight).toEqual(256);
|
||||
expect(provider.maximumLevel).toBe(22);
|
||||
expect(provider.tilingScheme).toBeInstanceOf(WebMercatorTilingScheme);
|
||||
expect(provider.rectangle).toEqual(new WebMercatorTilingScheme().rectangle);
|
||||
|
||||
spyOn(Resource._Implementations, "createImage").and.callFake(
|
||||
function (request, crossOrigin, deferred) {
|
||||
// Just return any old image.
|
||||
Resource._DefaultImplementations.createImage(
|
||||
new Request({ url: "Data/Images/Red16x16.png" }),
|
||||
crossOrigin,
|
||||
deferred,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return provider.requestImage(0, 0, 0).then(function (image) {
|
||||
expect(Resource._Implementations.createImage).toHaveBeenCalled();
|
||||
expect(image).toBeImageOrImageBitmap();
|
||||
});
|
||||
});
|
||||
|
||||
it("rectangle passed to constructor does not affect tile numbering", function () {
|
||||
const rectangle = new Rectangle(0.1, 0.2, 0.3, 0.4);
|
||||
const provider = new Azure2DImageryProvider({
|
||||
subscriptionKey: "test-subscriptionKey",
|
||||
tilesetId: "a-tileset-id",
|
||||
rectangle: rectangle,
|
||||
});
|
||||
|
||||
expect(provider.tileWidth).toEqual(256);
|
||||
expect(provider.tileHeight).toEqual(256);
|
||||
expect(provider.maximumLevel).toBe(22);
|
||||
expect(provider.tilingScheme).toBeInstanceOf(WebMercatorTilingScheme);
|
||||
expect(provider.rectangle).toEqualEpsilon(rectangle, CesiumMath.EPSILON14);
|
||||
expect(provider.tileDiscardPolicy).toBeUndefined();
|
||||
|
||||
spyOn(Resource._Implementations, "createImage").and.callFake(
|
||||
function (request, crossOrigin, deferred) {
|
||||
expect(request.url).toContain("zoom=0&x=0&y=0");
|
||||
|
||||
// Just return any old image.
|
||||
Resource._DefaultImplementations.createImage(
|
||||
new Request({ url: "Data/Images/Red16x16.png" }),
|
||||
crossOrigin,
|
||||
deferred,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return provider.requestImage(0, 0, 0).then(function (image) {
|
||||
expect(Resource._Implementations.createImage).toHaveBeenCalled();
|
||||
expect(image).toBeImageOrImageBitmap();
|
||||
});
|
||||
});
|
||||
|
||||
it("uses maximumLevel passed to constructor", function () {
|
||||
const provider = new Azure2DImageryProvider({
|
||||
subscriptionKey: "test-subscriptionKey",
|
||||
tilesetId: "a-tileset-id",
|
||||
maximumLevel: 5,
|
||||
});
|
||||
expect(provider.maximumLevel).toEqual(5);
|
||||
});
|
||||
|
||||
it("uses minimumLevel passed to constructor", function () {
|
||||
const provider = new Azure2DImageryProvider({
|
||||
subscriptionKey: "test-subscriptionKey",
|
||||
tilesetId: "a-tileset-id",
|
||||
minimumLevel: 1,
|
||||
});
|
||||
expect(provider.minimumLevel).toEqual(1);
|
||||
});
|
||||
|
||||
it("turns the supplied credit into a logo", function () {
|
||||
const creditText = "Thanks to our awesome made up source of this imagery!";
|
||||
const providerWithCredit = new Azure2DImageryProvider({
|
||||
subscriptionKey: "test-subscriptionKey",
|
||||
tilesetId: "a-tileset-id",
|
||||
credit: creditText,
|
||||
});
|
||||
expect(providerWithCredit.credit.html).toEqual(creditText);
|
||||
});
|
||||
|
||||
it("raises error event when image cannot be loaded", function () {
|
||||
const provider = new Azure2DImageryProvider({
|
||||
subscriptionKey: "test-subscriptionKey",
|
||||
tilesetId: "a-tileset-id",
|
||||
});
|
||||
|
||||
const layer = new ImageryLayer(provider);
|
||||
|
||||
let tries = 0;
|
||||
provider.errorEvent.addEventListener(function (error) {
|
||||
expect(error.timesRetried).toEqual(tries);
|
||||
++tries;
|
||||
if (tries < 3) {
|
||||
error.retry = true;
|
||||
}
|
||||
setTimeout(function () {
|
||||
RequestScheduler.update();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
Resource._Implementations.createImage = function (
|
||||
request,
|
||||
crossOrigin,
|
||||
deferred,
|
||||
) {
|
||||
if (tries === 2) {
|
||||
// Succeed after 2 tries
|
||||
Resource._DefaultImplementations.createImage(
|
||||
new Request({ url: "Data/Images/Red16x16.png" }),
|
||||
crossOrigin,
|
||||
deferred,
|
||||
);
|
||||
} else {
|
||||
// fail
|
||||
setTimeout(function () {
|
||||
deferred.reject();
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const imagery = new Imagery(layer, 0, 0, 0);
|
||||
imagery.addReference();
|
||||
layer._requestImagery(imagery);
|
||||
RequestScheduler.update();
|
||||
|
||||
return pollToPromise(function () {
|
||||
return imagery.state === ImageryState.RECEIVED;
|
||||
}).then(function () {
|
||||
expect(imagery.image).toBeImageOrImageBitmap();
|
||||
expect(tries).toEqual(2);
|
||||
imagery.releaseReference();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
import {
|
||||
Math as CesiumMath,
|
||||
Rectangle,
|
||||
Request,
|
||||
RequestScheduler,
|
||||
Resource,
|
||||
WebMercatorTilingScheme,
|
||||
Imagery,
|
||||
ImageryLayer,
|
||||
ImageryProvider,
|
||||
ImageryState,
|
||||
Google2DImageryProvider,
|
||||
} from "../../index.js";
|
||||
|
||||
import pollToPromise from "../../../../Specs/pollToPromise.js";
|
||||
|
||||
describe("Scene/Google2DImageryProvider", function () {
|
||||
beforeEach(function () {
|
||||
RequestScheduler.clearForSpecs();
|
||||
spyOn(
|
||||
Google2DImageryProvider.prototype,
|
||||
"getViewportCredits",
|
||||
).and.returnValue(Promise.resolve(""));
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
Resource._Implementations.createImage =
|
||||
Resource._DefaultImplementations.createImage;
|
||||
});
|
||||
|
||||
it("conforms to ImageryProvider interface", function () {
|
||||
expect(Google2DImageryProvider).toConformToInterface(ImageryProvider);
|
||||
});
|
||||
|
||||
it("requires the session token to be specified", function () {
|
||||
expect(function () {
|
||||
return new Google2DImageryProvider({});
|
||||
}).toThrowDeveloperError();
|
||||
});
|
||||
|
||||
it("requires the tileWidth to be specified", function () {
|
||||
expect(function () {
|
||||
return new Google2DImageryProvider({
|
||||
session: "a-session-token",
|
||||
});
|
||||
}).toThrowDeveloperError();
|
||||
});
|
||||
|
||||
it("requires the key to be specified", function () {
|
||||
expect(function () {
|
||||
return new Google2DImageryProvider({
|
||||
session: "a-session-token",
|
||||
tileHeight: 256,
|
||||
tileWidth: 256,
|
||||
});
|
||||
}).toThrowDeveloperError();
|
||||
});
|
||||
|
||||
it("fromIonAssetId throws if assetId is not provided", async function () {
|
||||
await expectAsync(
|
||||
Google2DImageryProvider.fromIonAssetId(),
|
||||
).toBeRejectedWithDeveloperError(
|
||||
"options.assetId is required, actual value was undefined",
|
||||
);
|
||||
});
|
||||
|
||||
it("requestImage returns a promise for an image and loads it for cross-origin use", function () {
|
||||
const provider = new Google2DImageryProvider({
|
||||
session: "test-session-token",
|
||||
key: "test-key",
|
||||
tileWidth: 256,
|
||||
tileHeight: 256,
|
||||
});
|
||||
|
||||
expect(provider.url).toEqual(
|
||||
"https://tile.googleapis.com/v1/2dtiles/{z}/{x}/{y}?session=test-session-token&key=test-key",
|
||||
);
|
||||
expect(provider.tileWidth).toEqual(256);
|
||||
expect(provider.tileHeight).toEqual(256);
|
||||
expect(provider.maximumLevel).toBe(22);
|
||||
expect(provider.tilingScheme).toBeInstanceOf(WebMercatorTilingScheme);
|
||||
expect(provider.rectangle).toEqual(new WebMercatorTilingScheme().rectangle);
|
||||
|
||||
spyOn(Resource._Implementations, "createImage").and.callFake(
|
||||
function (request, crossOrigin, deferred) {
|
||||
// Just return any old image.
|
||||
Resource._DefaultImplementations.createImage(
|
||||
new Request({ url: "Data/Images/Red16x16.png" }),
|
||||
crossOrigin,
|
||||
deferred,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return provider.requestImage(0, 0, 0).then(function (image) {
|
||||
expect(Resource._Implementations.createImage).toHaveBeenCalled();
|
||||
expect(image).toBeImageOrImageBitmap();
|
||||
});
|
||||
});
|
||||
|
||||
it("rectangle passed to constructor does not affect tile numbering", function () {
|
||||
const rectangle = new Rectangle(0.1, 0.2, 0.3, 0.4);
|
||||
const provider = new Google2DImageryProvider({
|
||||
session: "test-session-token",
|
||||
key: "test-key",
|
||||
tileWidth: 256,
|
||||
tileHeight: 256,
|
||||
rectangle: rectangle,
|
||||
});
|
||||
|
||||
expect(provider.tileWidth).toEqual(256);
|
||||
expect(provider.tileHeight).toEqual(256);
|
||||
expect(provider.maximumLevel).toBe(22);
|
||||
expect(provider.tilingScheme).toBeInstanceOf(WebMercatorTilingScheme);
|
||||
expect(provider.rectangle).toEqualEpsilon(rectangle, CesiumMath.EPSILON14);
|
||||
expect(provider.tileDiscardPolicy).toBeUndefined();
|
||||
|
||||
spyOn(Resource._Implementations, "createImage").and.callFake(
|
||||
function (request, crossOrigin, deferred) {
|
||||
expect(request.url).toContain("/0/0/0");
|
||||
|
||||
// Just return any old image.
|
||||
Resource._DefaultImplementations.createImage(
|
||||
new Request({ url: "Data/Images/Red16x16.png" }),
|
||||
crossOrigin,
|
||||
deferred,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return provider.requestImage(0, 0, 0).then(function (image) {
|
||||
expect(Resource._Implementations.createImage).toHaveBeenCalled();
|
||||
expect(image).toBeImageOrImageBitmap();
|
||||
});
|
||||
});
|
||||
|
||||
it("uses maximumLevel passed to constructor", function () {
|
||||
const provider = new Google2DImageryProvider({
|
||||
session: "test-session-token",
|
||||
key: "test-key",
|
||||
tileWidth: 256,
|
||||
tileHeight: 256,
|
||||
maximumLevel: 5,
|
||||
});
|
||||
expect(provider.maximumLevel).toEqual(5);
|
||||
});
|
||||
|
||||
it("uses minimumLevel passed to constructor", function () {
|
||||
const provider = new Google2DImageryProvider({
|
||||
session: "test-session-token",
|
||||
key: "test-key",
|
||||
tileWidth: 256,
|
||||
tileHeight: 256,
|
||||
minimumLevel: 1,
|
||||
});
|
||||
expect(provider.minimumLevel).toEqual(1);
|
||||
});
|
||||
|
||||
it("turns the supplied credit into a logo", function () {
|
||||
const creditText = "Thanks to our awesome made up source of this imagery!";
|
||||
const providerWithCredit = new Google2DImageryProvider({
|
||||
session: "test-session-token",
|
||||
key: "test-key",
|
||||
tileWidth: 256,
|
||||
tileHeight: 256,
|
||||
credit: creditText,
|
||||
});
|
||||
expect(providerWithCredit.credit.html).toEqual(creditText);
|
||||
});
|
||||
|
||||
it("raises error event when image cannot be loaded", function () {
|
||||
const provider = new Google2DImageryProvider({
|
||||
session: "test-session-token",
|
||||
key: "test-key",
|
||||
tileWidth: 256,
|
||||
tileHeight: 256,
|
||||
});
|
||||
|
||||
const layer = new ImageryLayer(provider);
|
||||
|
||||
let tries = 0;
|
||||
provider.errorEvent.addEventListener(function (error) {
|
||||
expect(error.timesRetried).toEqual(tries);
|
||||
++tries;
|
||||
if (tries < 3) {
|
||||
error.retry = true;
|
||||
}
|
||||
setTimeout(function () {
|
||||
RequestScheduler.update();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
Resource._Implementations.createImage = function (
|
||||
request,
|
||||
crossOrigin,
|
||||
deferred,
|
||||
) {
|
||||
if (tries === 2) {
|
||||
// Succeed after 2 tries
|
||||
Resource._DefaultImplementations.createImage(
|
||||
new Request({ url: "Data/Images/Red16x16.png" }),
|
||||
crossOrigin,
|
||||
deferred,
|
||||
);
|
||||
} else {
|
||||
// fail
|
||||
setTimeout(function () {
|
||||
deferred.reject();
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const imagery = new Imagery(layer, 0, 0, 0);
|
||||
imagery.addReference();
|
||||
layer._requestImagery(imagery);
|
||||
RequestScheduler.update();
|
||||
|
||||
return pollToPromise(function () {
|
||||
return imagery.state === ImageryState.RECEIVED;
|
||||
}).then(function () {
|
||||
expect(imagery.image).toBeImageOrImageBitmap();
|
||||
expect(tries).toEqual(2);
|
||||
imagery.releaseReference();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import * as Cesium from "cesium";
|
||||
|
||||
Cesium.Ion.defaultServer = "https://api.ion-staging.cesium.com";
|
||||
Cesium.Ion.defaultAccessToken = "";
|
||||
|
||||
const assetId = 1683;
|
||||
|
||||
const azure = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.IonImageryProvider.fromAssetId(assetId),
|
||||
);
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
viewer.imageryLayers.add(azure);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
});
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
legacyId: Azure 2D Tiles.html
|
||||
title: Azure 2D Tiles
|
||||
description: Global imagery data from Azure Maps.
|
||||
development: true
|
||||
labels:
|
||||
- Imagery
|
||||
- Development
|
||||
thumbnail: thumbnail.jpg
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import * as Cesium from "cesium";
|
||||
|
||||
const assetId = 3830184;
|
||||
|
||||
const base = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.Google2DImageryProvider.fromIonAssetId({
|
||||
assetId,
|
||||
mapType: "satellite",
|
||||
}),
|
||||
);
|
||||
|
||||
const overlay = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.Google2DImageryProvider.fromIonAssetId({
|
||||
assetId,
|
||||
overlayLayerType: "layerRoadmap",
|
||||
styles: [
|
||||
{
|
||||
stylers: [{ hue: "#00ffe6" }, { saturation: -20 }],
|
||||
},
|
||||
{
|
||||
featureType: "road",
|
||||
elementType: "geometry",
|
||||
stylers: [{ lightness: 100 }, { visibility: "simplified" }],
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
viewer.imageryLayers.add(base);
|
||||
viewer.imageryLayers.add(overlay);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
legacyId: Google 2D Tiles with Roadmap Styles.html
|
||||
title: Google 2D Tiles with Custom Styles
|
||||
description: Imagery tiles from Google Maps with additional parameters to create overlays and custom styles.
|
||||
labels:
|
||||
- Imagery
|
||||
- Showcases
|
||||
thumbnail: thumbnail.jpg
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import * as Cesium from "cesium";
|
||||
|
||||
const assetId = 3830184;
|
||||
|
||||
const google = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.IonImageryProvider.fromAssetId(assetId),
|
||||
);
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
viewer.imageryLayers.add(google);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
legacyId: Google 2D Tiles.html
|
||||
title: Google 2D Tiles
|
||||
description: Global imagery data from Google Maps.
|
||||
labels:
|
||||
- Imagery
|
||||
- Showcases
|
||||
thumbnail: thumbnail.jpg
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<style>
|
||||
@import url(../templates/bucket.css);
|
||||
</style>
|
||||
<div id="cesiumContainer" class="fullSize"></div>
|
||||
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
||||
<div id="toolbar"></div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import * as Cesium from "cesium";
|
||||
import Sandcastle from "Sandcastle";
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
animation: false,
|
||||
baseLayer: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
|
||||
timeline: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
homeButton: false,
|
||||
terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
});
|
||||
viewer.geocoder.viewModel.keepExpanded = true;
|
||||
|
||||
const menuOptions = [];
|
||||
|
||||
const dropdownOptions = [
|
||||
{ label: "Google Maps 2D Contour", assetId: 3830186 },
|
||||
{ label: "Google Maps 2D Labels Only", assetId: 3830185 },
|
||||
{ label: "Google Maps 2D Roadmap", assetId: 3830184 },
|
||||
{ label: "Google Maps 2D Satellite", assetId: 3830182 },
|
||||
{ label: "Google Maps 2D Satellite with Labels", assetId: 3830183 },
|
||||
{ label: "Bing Maps Aerial", assetId: 2 },
|
||||
{ label: "Bing Maps Aerial with Labels", assetId: 3 },
|
||||
{ label: "Bing Maps Road", assetId: 4 },
|
||||
{ label: "Bing Maps Labels Only", assetId: 2411391 },
|
||||
{ label: "Sentinel-2", assetId: 3954 },
|
||||
];
|
||||
|
||||
function showLayer(assetId) {
|
||||
viewer.imageryLayers.removeAll(true);
|
||||
const layer = Cesium.ImageryLayer.fromProviderAsync(
|
||||
Cesium.IonImageryProvider.fromAssetId(assetId),
|
||||
);
|
||||
viewer.imageryLayers.add(layer);
|
||||
}
|
||||
|
||||
dropdownOptions.forEach((opt) => {
|
||||
const option = {
|
||||
text: opt.label,
|
||||
onselect: function () {
|
||||
showLayer(opt.assetId);
|
||||
},
|
||||
};
|
||||
menuOptions.push(option);
|
||||
});
|
||||
|
||||
Sandcastle.addToolbarMenu(menuOptions);
|
||||
|
||||
showLayer(3830186);
|
||||
|
||||
viewer.scene.camera.flyTo({
|
||||
duration: 0,
|
||||
destination: new Cesium.Rectangle.fromDegrees(
|
||||
//Philly
|
||||
-75.280266,
|
||||
39.867004,
|
||||
-74.955763,
|
||||
40.137992,
|
||||
),
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
legacyId: Imagery Assets available from ion.html
|
||||
title: Imagery Assets available from ion
|
||||
description: Global imagery assets available from Cesium ion.
|
||||
labels:
|
||||
- Showcases
|
||||
thumbnail: thumbnail.jpg
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
|
|
@ -302,6 +302,79 @@ of the world.\nhttp://www.openstreetmap.org",
|
|||
}),
|
||||
);
|
||||
|
||||
providerViewModels.push(
|
||||
new ProviderViewModel({
|
||||
name: "Google Maps Satellite",
|
||||
iconUrl: buildModuleUrl(
|
||||
"Widgets/Images/ImageryProviders/googleSatellite.png",
|
||||
),
|
||||
tooltip: "Imagery from Google Maps",
|
||||
category: "Cesium ion",
|
||||
creationFunction: function () {
|
||||
return IonImageryProvider.fromAssetId(3830182);
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
providerViewModels.push(
|
||||
new ProviderViewModel({
|
||||
name: "Google Maps Satellite with Labels",
|
||||
iconUrl: buildModuleUrl(
|
||||
"Widgets/Images/ImageryProviders/googleSatelliteLabels.png",
|
||||
),
|
||||
tooltip: "Imagery with place labels from Google Maps",
|
||||
category: "Cesium ion",
|
||||
creationFunction: function () {
|
||||
return IonImageryProvider.fromAssetId(3830183);
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
providerViewModels.push(
|
||||
new ProviderViewModel({
|
||||
name: "Google Maps Roadmap",
|
||||
iconUrl: buildModuleUrl(
|
||||
"Widgets/Images/ImageryProviders/googleRoadmap.png",
|
||||
),
|
||||
tooltip:
|
||||
"Labeled roads and other features on a base landscape from Google Maps",
|
||||
category: "Cesium ion",
|
||||
creationFunction: function () {
|
||||
return IonImageryProvider.fromAssetId(3830184);
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
providerViewModels.push(
|
||||
new ProviderViewModel({
|
||||
name: "Google Maps Labels Only",
|
||||
iconUrl: buildModuleUrl(
|
||||
"Widgets/Images/ImageryProviders/googleLabels.png",
|
||||
),
|
||||
tooltip:
|
||||
"Place labels from Google Maps to combine with other imagery such as Sentinel-2",
|
||||
category: "Cesium ion",
|
||||
creationFunction: function () {
|
||||
return IonImageryProvider.fromAssetId(3830185);
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
providerViewModels.push(
|
||||
new ProviderViewModel({
|
||||
name: "Google Maps Contour",
|
||||
iconUrl: buildModuleUrl(
|
||||
"Widgets/Images/ImageryProviders/googleContour.png",
|
||||
),
|
||||
tooltip:
|
||||
"Hillshade mapping, contour lines, natural features (roadmap features hidden) from Google Maps",
|
||||
category: "Cesium ion",
|
||||
creationFunction: function () {
|
||||
return IonImageryProvider.fromAssetId(3830186);
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
return providerViewModels;
|
||||
}
|
||||
export default createDefaultImageryProviderViewModels;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Loading…
Reference in New Issue