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

最近项目需求要做在线卫星地图，由于腾讯，高德卫星地图经度不够，谷歌地图正常无法访问，所以选择了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!");
                    }
                }

（5）结果展示，地图的精度要远高于国内目前的腾讯，高德（PS:如果大家不想使用mapbox这样的外国地图，推荐可以使用国产的天地图，精度也相当之高，由国家地理信息公共服务平台提供，缺点就是更新速度较慢）