articodeltd / angular-cesium

JavaScript library for creating map based web apps using Cesium and Angular
https://github.com/articodeltd/angular-cesium/settings/pages
MIT License
178 stars 93 forks source link

Help with UrlTemplateImageryProvider #345

Closed h11a closed 4 years ago

h11a commented 4 years ago

Intended outcome: Hi. I managed to get my map iles working a few weeks back but now the url has been changed by the provider and I cannot get them to work.

    <ac-layer acFor="let single of singleObservable$" [context]="this">
        <div>TEST STRNG</div>
        <ac-map-layer-provider [provider]="MapLayerProviderOptions.UrlTemplateImagery"
                               [options]="{
                                url : 'https://api.maptiler.com/maps/<OUR-MAP-ID>/256/{z}/{x}/{y}@2x.png?key=<OUR-KEY>'
                            }">
        </ac-map-layer-provider>
    </ac-layer>

The observable is definitely drawing as its prints the Test string. As can be seen in the image below but there doesnt seem to be any network requests the the maptiler URL in the debugger. image

The same URL work in the javascript version of cesium with the following settings

    baseImageryProvider = new Cesium.UrlTemplateImageryProvider({
                                url: 'https://api.maptiler.com/maps/<OUR-MAP-ID>/256/{z}/{x}/{y}@2x.png?key=<OUR-KEY>',                           
                            });

Is there anything obvious I am doing wrong here?

I have also tried doing it through JS code below (same as the old js project which is working) and this does not work either.

@ViewChild(AcMapComponent)
map: AcMapComponent;

 ....

const baseImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://api.maptiler.com/maps/<OUR-MAP-ID>/256/{z}/{x}/{y}@2x.png?key=<OUR-KEY>',
});
this.map.getCesiumViewer().imageryLayers.add(new Cesium.ImageryLayer(baseImageryProvider, {
}), 1);
const baseLayer =  this.map.getCesiumViewer().imageryLayers.get(1);
this.map.getCesiumViewer().imageryLayers.raiseToTop(baseLayer);

Side Error Also another error I am getting from simply just drawing the ac-map is

Failed to load resource: the server responded with a status of 401 ()

from the URL

https://api.cesium.com/v1/assets/2/endpoint?access_token=<A token for something>

I'm not sure if this is related but I thought I would add it.

Actual outcome: There are no map tiles shown and everything is just black

How to reproduce the issue: Making an ac-map with the ac-layer that has a UrlTemplateImagery ac-map-layer-provider

Version

eitanfr commented 4 years ago

Hi, It seems to an issue with how you load the imagery layer and not a angular-cesium issue. About the error you see in the console, I guess it is because you didn't provide a CesiumION token, cesium tries to load default resources from CesiumION, but it looks like it is not related to your issue.

you can try running your code in https://sandcastle.cesium.com/ to validate if it is an angular-cesium issue or not.

closing for now... please reopen the issue if you have other updates.