blocked by CORS policy: The 'Access-Control-Allow-Origin'

[xujinghai]

when i try to load a wmts data, i get the following warning information: 'http://localhost:4500' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4203' that is not equal to the supplied origin. Origin 'http://localhost:4500' is therefore not allowed access.

So firstly, the app load the default map, then when i zoomin the map, the app load the wmts map, but it cannot move the map.

the port of the app is 4500. here is the code of app.html just changed from the example.

<h1>
  <ac-map >
    <ac-map-layer-provider [provider]="webMapTileServiceProvide"
                           [options]="{
                         url : 'http://t0.tianditu.com/vec_w/wmts',
      layer : 'vec',
      style : 'default',
      format : 'tiles',
      tileMatrixSetID : 'w'
                            }">
    </ac-map-layer-provider>
  </ac-map>

</h1>

I also found the options cannot support the tilingScheme. which should be something like the following code in the js. tilingScheme : new Cesium.GeographicTilingScheme(), tileMatrixLabels:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19']

By the way, where can i get the cesiumservice. I try to get it in the app.component.ts file, but it cannot work. The code is

import { Component,Injectable } from '@angular/core';
import {AcMapLayerProviderComponent} from "angular-cesium/src/components/ac-map-layer-provider/ac-map-layer-provider.component";
import {CesiumService, MapLayerProviderOptions} from "angular-cesium";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[CesiumService]

})
export class AppComponent {
  title = 'app works!';
  cesiumService:CesiumService;
  webMapTileServiceProvide=MapLayerProviderOptions.WebMapTileService;
  constructor(cesiumService: CesiumService) {
    this.cesiumService=cesiumService;
  }
  ngAfterViewInit()
  {
   var cesiumViewer: any=   this.cesiumService.getViewer();
  }
}

when i try to get cesiumViewer in the ngAfterViewInit(), it got errors. And i found the cesiumService is invalid.

[eitanfr]

hi, about the cesium service:

• ac-map is the provider of cesium service (cesium viewer created for every map)
• Dont declare cesium service by yourself (provider: [cesium service] - don't)
• Therefore you can get the cesium service in every child components of ac-map.
• If you want to configure cesium viewer with initial configuration check out ViewerConfiguration service, there is an example in the demo.

about the map:

• which error did you get with the tilingScheme?
• you did new Cesium.GeographicTilingScheme() inside the template? the global var Cesium isnt available on the template scope, try creating GeographicTilingScheme in the component.ts file

[xujinghai]

Thanks for you help! `

`

this code can be runned without errors, but it get the aboved warning information (...block the CORS policy: The 'Access-Control-Allow-Origin'...) . Then the map cannot load properly. But I try this options dirctly in the javascript file (which is adapted from the helloworld example inside the cesiumjs package), it works well, even without tilingScheme. So i doubt the problem is located in the Angular.

[eitanfr]

for cross origin check out: https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/#cross-origin-resource-sharing