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

问题描述 投票：-1回答：2

我有一个没有文档标签的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等其他渲染器中运行良好。

openlayers kml
2个回答
0
投票

OpenLayers不支持它

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

-1
投票

可以使用地面覆盖图块作为OpenLayers图层的源。到目前为止，我只是通过在KML手动读取的坐标，平铺大小，平铺路径等中进行硬编码，并让OpenLayers计算出正确的投影，尽管proj4允许旋转投影，但我还没有完成数学计算。需要处理轮换。我有一个基于来自https://www.dwgwalking.co.uk/garminTryB4Buy.htm的样本数据的演示。演示http://mikenunn.16mb.com/demo/dwg-aracena-demo.htm使用顶行和北/南坐标左列的东/西坐标，忽略非常小的旋转。

UPDATE

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

以下是直接从KML文档加载的前一个多pverlay演示（旋转非常小）：

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.