mapbox地图启用卫星地图示例 -六月初技术站

mapbox地图启用卫星地图示例

六月初地图开发 2022-08-22 14:33:52

mapbox相对于国内的三大地图来说，在卫星地图这块有着非常明显的差异里。如果你的需求对于卫星地图显示的层级较高，可以优先考虑使用mapbox这块国外的地图。

劣势：劣势对于每款地图来说都是不可避免，就个人使用体验而言mapbox因为属于国外开发的地图，所以在响应速度这块而言，有着绝对的明显差异。当然如果你对地图的响应低于层级显示情况，那么mapbox这款依旧是非常具有优势的地图。

mapbox效果如图：

直接进入代码，查看如何显示卫星地图：

copytextpop-up

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>显示卫星地图</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.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2l4YmxvZyIsImEiOiJjbDYxdjNxbTcwMzZ3M2ZwNzkzOWJqNTI5In0.o6rf1thO5EbTqa5gXOJKYA';
var map = new mapboxgl.Map({
    container: 'map',
    zoom: 4.5,
    center: [105.000, 38.000],
    style: 'mapbox://styles/mapbox/satellite-streets-v11'
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>显示卫星地图</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.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2l4YmxvZyIsImEiOiJjbDYxdjNxbTcwMzZ3M2ZwNzkzOWJqNTI5In0.o6rf1thO5EbTqa5gXOJKYA';
var map = new mapboxgl.Map({
    container: 'map',
    zoom: 4.5,
    center: [105.000, 38.000],
    style: 'mapbox://styles/mapbox/satellite-streets-v11'
});
</script>
</body>
</html>