时间戳

首页 > 解决方案 > 如何在我的代码中将我自己的 TIF 文件添加到 Mapbox GL JS 地图？

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

问题描述

我正在尝试将 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>

标签： mapboxmapbox-gl-js

解决方案

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

            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/以获取更多参考资料。

推荐阅读