没有<document>标签的KML / OpenLayers GroundOverlay元素未加载到地图上？

Question

我有一个没有文档标签的KML元素，而只是...（带有一些不相关元素的标签已用...删除）

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<GroundOverlay>
    <name>...</name>
    <description>...</description>
    <Icon><href>...</href></Icon>
    <LatLonBox>
       ...
    </LatLonBox>
</GroundOverlay>
</kml>

在OpenLayers中，如果没有GroundOverlay上的文档标签，则无法加载它。但是，我可以得到一个地标，它是没有文档标签即可加载的根节点。

有没有一种方法可以将带有GroundOverlay根节点的KML转换为没有文档标签的KML？在其他渲染器（例如Google Earth和Cesium）中似乎可以很好地加载。

Answer 1

OpenLayers不支持

https://github.com/openlayers/openlayers/issues/2941

Answer 2

可以将地面覆盖图块用作OpenLayers层的源。到目前为止，我只是通过对KML手动读取的坐标，图块大小，图块路径等进行硬编码，并让OpenLayers计算正确的投影来做到这一点，尽管proj4确实允许旋转投影，但我尚未对数学进行分类需要处理旋转。我有一个基于https://www.dwgwalking.co.uk/garminTryB4Buy.htm的示例数据的演示，该演示http://mikenunn.16mb.com/demo/dwg-aracena-demo.htm使用顶部行的东/西坐标和左列的北/南坐标，并且忽略了很小的旋转。

更新

我现在将其开发为潜在的库函数，以解析KML文件以获取地面叠加层并返回ImageStatic源和图层的图层组。还支持旋转。唯一必需的参数是KML文档网址。受支持的选项是attributions和crossOrigin。

这是直接从KML文档中加载的先前的多铺装演示（旋转很小）：

var tileLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        attributions: [
            'Powered by Esri',
            'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'
        ],
        attributionsCollapsible: false,
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        maxZoom: 23
    })
});

var map = new ol.Map({
    layers: [tileLayer],
    target: 'map',
    logo: false,
    view: new ol.View({
        center:[0, 0],
        zoom: 2
    })
});

var extent = ol.extent.createEmpty();

var group = kmlOverlay.loadUrl(
    'https://www.mikenunn.net/data/dwg/aracena/doc.kml',
    { attributions: 'Copyright David Brawn <a href="https://www.dwgwalking.co.uk" target="_blank">www.dwgwalking.co.uk</a>' }
);

group.getLayers().on('add', function(evt) {
    evt.element.once('change:source', function() {
        if (evt.element.getSource && evt.element.getSource().getProjection) {
            var imageProj = evt.element.getSource().getProjection();
            ol.extent.extend(extent, ol.proj.transformExtent(imageProj.getExtent(), imageProj, map.getView().getProjection()));
            map.getView().fit(extent);
        }
    });
});

group.setOpacity(0.7);
map.addLayer(group);

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.map {
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script>

kmlOverlay = function() {

function loadUrl ( url,
                   opt_options  // attributions (defaults to undefined), crossOrigin (defaults to 'anonymous')
) {

    var options = opt_options || {};
    var crossOrigin = options.crossOrigin === undefined ? 'anonymous' : options.crossOrigin;

    var group = new ol.layer.Group();

    function addLayer(name, extent, url, rotation) {  // function to maintain context during async img load

        var imageLayer = new ol.layer.Image({
            title: name
        });
        group.getLayers().push(imageLayer);

        var imageSize = [];
        var img = document.createElement('img');
        img.onload = function() {
            imageSize[0] = img.width;
            imageSize[1] = img.height;
            imageLayer.setSource(
                source (
                    extent,
                    url,
                    rotation,
                    imageSize,
                    { attributions: options.attributions, crossOrigin: crossOrigin }
                )
            );
        };
        img.crossOrigin = crossOrigin;
        img.src = url;

    }

    var last = url.lastIndexOf('/') + 1;
    path = url.slice(0, last);

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(xhr.responseText,'text/xml');

        var elements = xmlDoc.getElementsByTagName('GroundOverlay');

        for (var i=0; i<elements.length; i++) {

            var name;
            if (elements[i].getElementsByTagName('rotation').length > 0) {
                name = elements[i].getElementsByTagName('name')[0].childNodes[0].nodeValue;
            }
            var href = elements[i].getElementsByTagName('href')[0].childNodes[0].nodeValue;
            if (href.indexOf('http:') != 0 && href.indexOf('https:') != 0) {
                href = path + href;
            }
            var north = Number(elements[i].getElementsByTagName('north')[0].childNodes[0].nodeValue);
            var south = Number(elements[i].getElementsByTagName('south')[0].childNodes[0].nodeValue);
            var east = Number(elements[i].getElementsByTagName('east')[0].childNodes[0].nodeValue);
            var west = Number(elements[i].getElementsByTagName('west')[0].childNodes[0].nodeValue);
            var rotation = 0;
            if (elements[i].getElementsByTagName('rotation').length > 0) {
                rotation = Number(elements[i].getElementsByTagName('rotation')[0].childNodes[0].nodeValue);
            }

            addLayer(name, [west, south, east, north], href, rotation);

        }

    }
    xhr.send();
    return group;

}

function source ( kmlExtent, // KMLs specify the extent the unrotated image would occupy
                  url,
                  rotation,
                  imageSize,
                  opt_options  // attributions, crossOrigin (default to undefined)
) {

    var options = opt_options || {};

    // calculate latitude of true scale of equidistant cylindrical projection based on pixels per degree on each axis

    proj4.defs('EPSG:' + url, '+proj=eqc +lat_ts=' +
                              (Math.acos((ol.extent.getHeight(kmlExtent)/imageSize[1])
                                        /(ol.extent.getWidth(kmlExtent)/imageSize[0]))*180/Math.PI) +
                              ' +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');

    if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); } // if OL5 register proj4

    // convert the extents to source projection coordinates

    var projection = ol.proj.get('EPSG:' + url);
    var projExtent = ol.proj.transformExtent(kmlExtent, 'EPSG:4326', projection);

    var angle = -rotation * Math.PI/180;

    function rotateTransform(coordinate) {
        var point = new ol.geom.Point(coordinate);
        point.rotate(angle, ol.extent.getCenter(projExtent));
        return point.getCoordinates();
    }

    function normalTransform(coordinate) {
        var point = new ol.geom.Point(coordinate);
        point.rotate(-angle, ol.extent.getCenter(projExtent));
        return point.getCoordinates();
    }

    var rotatedProjection = new ol.proj.Projection({
        code: 'EPSG:' + url + ':rotation:' + rotation,
        units: 'm',
        extent: projExtent
    });
    ol.proj.addProjection(rotatedProjection);

    ol.proj.addCoordinateTransforms('EPSG:4326', rotatedProjection,
        function(coordinate) {
            return rotateTransform(ol.proj.transform(coordinate, 'EPSG:4326', projection));
        },
        function(coordinate) {
            return ol.proj.transform(normalTransform(coordinate), projection, 'EPSG:4326');
        }
    );

    ol.proj.addCoordinateTransforms('EPSG:3857', rotatedProjection,
        function(coordinate) {
            return rotateTransform(ol.proj.transform(coordinate, 'EPSG:3857', projection));
        },
        function(coordinate) {
            return ol.proj.transform(normalTransform(coordinate), projection, 'EPSG:3857');
        }
    );

    return new ol.source.ImageStatic({
        projection: rotatedProjection,
        url: url,
        imageExtent: projExtent,
        attributions: options.attributions,
        crossOrigin: options.crossOrigin
    });

}

return {
   "loadUrl" : loadUrl,
   "source"  : source
}

} ();

</script>
<div id="map" class="map"></div>

这是一个单独的叠加演示，其旋转非常明显，取自https://renenyffenegger.ch/notes/tools/Google-Earth/kml/index

var tileLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        attributions: [
            'Powered by Esri',
            'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'
        ],
        //attributionsCollapsible: false,
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        maxZoom: 23
    })
});

var map = new ol.Map({
    layers: [tileLayer],
    target: 'map',
    logo: false,
    view: new ol.View({
        center:[0, 0],
        zoom: 2
    })
});

var extent = ol.extent.createEmpty();

var group = kmlOverlay.loadUrl(
    'https://raw.githubusercontent.com/ReneNyffenegger/about-GoogleEarth/master/kml/GroundOverlay.kml'
);

group.getLayers().once('add', function(evt) {
    evt.element.once('change:source', function() {
        if (evt.element.getSource && evt.element.getSource().getProjection) {
            var imageProj = evt.element.getSource().getProjection();
            ol.extent.extend(extent, ol.proj.transformExtent(imageProj.getExtent(), imageProj, map.getView().getProjection()));
            map.getView().fit(extent, { constrainResolution: false });
        }
    });
});

group.setOpacity(0.8);
map.addLayer(group);

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.map {
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script>

kmlOverlay = function() {

function loadUrl ( url,
                   opt_options  // attributions (defaults to undefined), crossOrigin (defaults to 'anonymous')
) {

    var options = opt_options || {};
    var crossOrigin = options.crossOrigin === undefined ? 'anonymous' : options.crossOrigin;

    var group = new ol.layer.Group();

    function addLayer(name, extent, url, rotation) {  // function to maintain context during async img load

        var imageLayer = new ol.layer.Image({
            title: name
        });
        group.getLayers().push(imageLayer);

        var imageSize = [];
        var img = document.createElement('img');
        img.onload = function() {
            imageSize[0] = img.width;
            imageSize[1] = img.height;
            imageLayer.setSource(
                source (
                    extent,
                    url,
                    rotation,
                    imageSize,
                    { attributions: options.attributions, crossOrigin: crossOrigin }
                )
            );
        };
        img.crossOrigin = crossOrigin;
        img.src = url;

    }

    var last = url.lastIndexOf('/') + 1;
    path = url.slice(0, last);

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(xhr.responseText,'text/xml');

        var elements = xmlDoc.getElementsByTagName('GroundOverlay');

        for (var i=0; i<elements.length; i++) {

            var name;
            if (elements[i].getElementsByTagName('rotation').length > 0) {
                name = elements[i].getElementsByTagName('name')[0].childNodes[0].nodeValue;
            }
            var href = elements[i].getElementsByTagName('href')[0].childNodes[0].nodeValue;
            if (href.indexOf('http:') != 0 && href.indexOf('https:') != 0) {
                href = path + href;
            }
            var north = Number(elements[i].getElementsByTagName('north')[0].childNodes[0].nodeValue);
            var south = Number(elements[i].getElementsByTagName('south')[0].childNodes[0].nodeValue);
            var east = Number(elements[i].getElementsByTagName('east')[0].childNodes[0].nodeValue);
            var west = Number(elements[i].getElementsByTagName('west')[0].childNodes[0].nodeValue);
            var rotation = 0;
            if (elements[i].getElementsByTagName('rotation').length > 0) {
                rotation = Number(elements[i].getElementsByTagName('rotation')[0].childNodes[0].nodeValue);
            }

            addLayer(name, [west, south, east, north], href, rotation);

        }

    }
    xhr.send();
    return group;

}

function source ( kmlExtent, // KMLs specify the extent the unrotated image would occupy
                  url,
                  rotation,
                  imageSize,
                  opt_options  // attributions, crossOrigin (default to undefined)
) {

    var options = opt_options || {};

    // calculate latitude of true scale of equidistant cylindrical projection based on pixels per degree on each axis

    proj4.defs('EPSG:' + url, '+proj=eqc +lat_ts=' +
                              (Math.acos((ol.extent.getHeight(kmlExtent)/imageSize[1])
                                        /(ol.extent.getWidth(kmlExtent)/imageSize[0]))*180/Math.PI) +
                              ' +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');

    if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); } // if OL5 register proj4

    // convert the extents to source projection coordinates

    var projection = ol.proj.get('EPSG:' + url);
    var projExtent = ol.proj.transformExtent(kmlExtent, 'EPSG:4326', projection);

    var angle = -rotation * Math.PI/180;

    function rotateTransform(coordinate) {
        var point = new ol.geom.Point(coordinate);
        point.rotate(angle, ol.extent.getCenter(projExtent));
        return point.getCoordinates();
    }

    function normalTransform(coordinate) {
        var point = new ol.geom.Point(coordinate);
        point.rotate(-angle, ol.extent.getCenter(projExtent));
        return point.getCoordinates();
    }

    var rotatedProjection = new ol.proj.Projection({
        code: 'EPSG:' + url + ':rotation:' + rotation,
        units: 'm',
        extent: projExtent
    });
    ol.proj.addProjection(rotatedProjection);

    ol.proj.addCoordinateTransforms('EPSG:4326', rotatedProjection,
        function(coordinate) {
            return rotateTransform(ol.proj.transform(coordinate, 'EPSG:4326', projection));
        },
        function(coordinate) {
            return ol.proj.transform(normalTransform(coordinate), projection, 'EPSG:4326');
        }
    );

    ol.proj.addCoordinateTransforms('EPSG:3857', rotatedProjection,
        function(coordinate) {
            return rotateTransform(ol.proj.transform(coordinate, 'EPSG:3857', projection));
        },
        function(coordinate) {
            return ol.proj.transform(normalTransform(coordinate), projection, 'EPSG:3857');
        }
    );

    return new ol.source.ImageStatic({
        projection: rotatedProjection,
        url: url,
        imageExtent: projExtent,
        attributions: options.attributions,
        crossOrigin: options.crossOrigin
    });

}

return {
   "loadUrl" : loadUrl,
   "source"  : source
}

} ();

</script>
<div id="map" class="map"></div>