melowntech / vts-browser-js

JavaScript WebGL 3D map rendering engine
BSD 2-Clause "Simplified" License
220 stars 42 forks source link

How to import .kml files in vts-browser-js #195

Open SukanyaGavhane opened 4 years ago

SukanyaGavhane commented 4 years ago

I observed that we can import the geojson file in vts-browser-js.

Is there any way to import/load .kml file in vts-browser-js?

If No, is there any example available that demonstrates how to import/load .kml file in vts-browser-js?

Any help would be appreciated!

skazemi commented 4 years ago

Hi, I used this library to convert KML to GeoJson and then used the builtin geojson loader in vts: https://github.com/mapbox/togeojson here is a piece of code as an example:

//load KML 
vts.utils.loadXML(path, onLoad);

let geodata = null;
function onLoad = ((data) => {
    //Convert KML to GeoJson
    let jsl = toGeoJSON.kml(data);
    // create geodata and import the converted data
    geodata = browser.map.createGeodata();
    geodata.importGeoJson(jsl, 'float', browser.map.map.getPublicSrs().srsDef);

    geodata.processHeights('heightmap-by-precision', lod, onHeightProcessed);
}

function onHeightProcessed(){
    let freeLayer = geodata.makeFreeLayer(style);

    //add free layer to the map
    browser.map.map.addFreeLayer(id, freeLayer);

    //add free layer to the list of free layers which will be rendered on the map
    let viewpoint = browser.map.getView();
    viewpoint.freeLayers[id] = {};
    browser.map.setView(viewpoint);
}

Also, you can do the conversion in the backend (using GDAL, ...) and then load it as GeoJson.