国外卫星地图mapbox的基本操作

最新推荐文章于 2025-04-17 16:32:52 发布

bug别找我

最新推荐文章于 2025-04-17 16:32:52 发布

阅读量8.7k

点赞数 3

分类专栏： # GIS

本文链接：https://blog.csdn.net/weixin_43575792/article/details/118548531

版权

GIS 专栏收录该内容

8 篇文章

订阅专栏

最近项目需求要做在线卫星地图，由于腾讯，高德卫星地图经度不够，谷歌地图正常无法访问，所以选择了mapbox这个商业性地图

1.注册所需token
首先进入网站mapbox控制台,如下图创建一个新的token,理论上有五万次的免费访问次数
在这里插入图片描述
2.实际开发
（1）首先引入以下静态资源（包括地图渲染使用的js,css;更换为中文所需的js插件；在地图上绘制图层所需的js,css文件）

<!--引入mapbox-->>
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
    <!-- 引入语言插件 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js'></script>

    <!-- 引入绘图插件 -->
    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css' />

（2）首先定义一个容器，id为map

<div id='map' style='width:100%; height:100%;'></div>

接下在script里面初始化地图

 mapboxgl.accessToken = '用自己申请到的token';
 var map = new mapboxgl.Map({
           container: 'map',//容器id
           style: 'mapbox://styles/mapbox/satellite-streets-v9',//使用地图类型（此为卫星图）
           center: [80.99817807141773, 43.976098445868644],//中心点
           zoom: 12//缩放级别
 });

（3）设置语言，因为mapbox默认是英语，所以我们得设置成中文才能正常使用，当然前提是需要引入上述里面的语言插件

map.addControl(new MapboxLanguage({
       defaultLanguage: 'zh'
}));

(4)使用mapbox的绘图操作

  var draw = new MapboxDraw({
                    displayControlsDefault: false,
                    controls: {
                        polygon: true,
                        trash: true
                    }
                });
                map.addControl(draw);
                map.on('draw.create', updateArea);
                map.on('draw.delete', updateArea);
                map.on('draw.update', updateArea);

                // //绘制多边形，显示面积
              function updateArea(e) {
                    var data = draw.getAll();
                    var answer = document.getElementById('map');
                    if (data.features.length > 0) {
                        var area = turf.area(data);
                        // restrict to area to 2 decimal points
                        var rounded_area = Math.round(area * 100) / 100;
                        answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
                    } else {
                        answer.innerHTML = '';
                        if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
                    }
                }