Question

我正在尝试将TIF文件添加到HTML中的Mapbox GL JS代码中。对于如何将文件添加到html代码中，我还没有找到任何相关的解决方案。谁能告诉我如何解决这个问题？我需要将Georeferenced TIF文件上传到Mapbox GL JS中的地图。

我应该将TIF文件转换为其他格式吗？如果可以将整个TIF文件上传到Mapbox，对我来说会更好。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Change a map's style</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<style type='text/css'>
    #info {
        display: block;
        position: relative;
        margin: 0px auto;
        width: 30%;
        padding: 8px;
        border: none;
        border-radius: 3px;
        font-size: 14px;
        text-align: center;
        color: #222;
        background: #fff;
    }
</style>



<style>
    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }
</style>

<div id='map'></div>
<div id='menu'>
    <input id='streets-v11' type='radio' name='rtoggle' value='streets' checked='checked'>
    <label for='streets'>streets</label>
    <input id='light-v10' type='radio' name='rtoggle' value='light'>
    <label for='light'>light</label>
    <input id='dark-v10' type='radio' name='rtoggle' value='dark'>
    <label for='dark'>dark</label>
    <input id='outdoors-v11' type='radio' name='rtoggle' value='outdoors'>
    <label for='outdoors'>outdoors</label>
    <input id='satellite-v9' type='radio' name='rtoggle' value='satellite'>
    <label for='satellite'>satellite</label>
</div>
<pre id='info'></pre>
<script>



mapboxgl.accessToken = 'pk.eyJ1Ijoic2lmYXQ1NzciLCJhIjoiY2p6dXNvN3ZnMGVqZTNjcDRrNWNqcTE5byJ9.Bg8-lwZjjNoswew2k1w2RA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',


    zoom: 13,
    center: [90.3897, 23.7270]
});


// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
//for displaying the latlon of mouse curson in map
map.on('mousemove', function (e) {
    document.getElementById('info').innerHTML =
        // e.point is the x, y coordinates of the mousemove event relative
        // to the top-left corner of the map
        JSON.stringify(e.point) + '<br />' +
        // e.lngLat is the longitude, latitude geographical position of the event
        JSON.stringify(e.lngLat.wrap());
});


var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');

function switchLayer(layer) {
    var layerId = layer.target.id;
    map.setStyle('mapbox://styles/mapbox/' + layerId);
}

for (var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = switchLayer;
}
</script>

</body>
</html>

Answer 1

一种方法（如您所说）是将地理参考图像转换为另一种格式。只要您知道地理范围，这就是如何添加地理参考图像的示例：

            map.addSource("myImageSource", {
                "type": "image",
                "url": "test.gif",
                "coordinates": [
                    [-80.425, 46.437],
                    [-71.516, 46.437],
                    [-71.516, 37.936],
                    [-80.425, 37.936]
                ]
            });

        map.addLayer({
            "id": "overlay",
            "source": "myImageSource",
            "type": "raster",
            "paint": {
            "raster-opacity": 0.85
            }
        });

您还可以参阅https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/了解更多参考资料。

如何在我的代码中将自己的TIF文件添加到Mapbox GL JS地图？

1 个答案: