0

Trying to implement OL-Cesium as an ES6 library following instructions here: https://openlayers.org/ol-cesium/apidoc/#as-an-es6-library-recommended-method

Running locally for now and getting the following error:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse ()

The error is being thrown when attempting to fetch "Assets/approximateTerrainHeights.json". The response is HTML (the index page, in fact) and not JSON, hence the error. But for the life of me, I can't understand why. The header shows the request URL as correct (http://localhost:1234/static/Assets/approximateTerrainHeights.json) with a Status Code of 200, but the response is the index.html page.

Full js code for reference:

    import '/css/index.css';
import 'ol/ol.css';

import {Map, View} from "ol";
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ.js';
import * as olProj from 'ol/proj.js';


window.CESIUM_BASE_URL = '/static/';


import * as Cesium from 'cesium';
window.Cesium = Cesium; // expose Cesium to the OL-Cesium library
require('cesium/Build/Cesium/Widgets/widgets.css');

import OLCesium from 'olcs/OLCesium.js';
import 'olcs/olcs.css';


let tileWorldImagery = new TileLayer({
    source: new XYZ({
      url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
      crossOrigin: 'Anonymous',
    })
  });

let map = new Map({
  target: "map",
  projection: 'EPSG:3857',
  layers: [
    tileWorldImagery
  ],
  view: new View({
    center: olProj.fromLonLat([134.364805, -26.710497]),
    zoom: 4,
    minZoom: 2,
  }),
});

const ol3d = new OLCesium({map: map}); // map is the ol.Map instance
ol3d.setEnabled(true);
window.ol3d = ol3d; // temporary hack for easy console debugging
3
  • What do you get if you open http://localhost:1234/static/Assets/approximateTerrainHeights.json directly from the browser?
    – Mike
    Commented Jul 26, 2022 at 10:17
  • Web servers aren't always correctly configured; status codes may not be correct
    – nmtoken
    Commented Jul 26, 2022 at 14:47
  • I believe you're both onto something. When I follow the address to the JSON file, it returns the index page, though correctly reports the JSON address in the address bar. I had assumed that the 200 code was indicating it was correctly consuming the JSON, but it appears not. Im guessing this might come down to an error in the window.CESIUM_BASE_URL.
    – wayoutwest
    Commented Jul 26, 2022 at 17:04

1 Answer 1

0

Turns out that window.CESIUM_BASE_URL is configured correctly, but I had erroneously placed the 'static' directory referenced in the CESIUM_BASE_URL in the wrong location. I originally had the 'static' directory placed in the project root, but once I dropped it into the 'dist' directory where the app is compiled to, everything works like a charm.

Hope this saves someone else a few headaches. Thanks to Mike and nmtoken for setting me down the right path.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.