1.页面中引入需要的js文件(js文件中又引入其他js文件，需要的所有js文件见之前的博客：https://mp.csdn.net/postedit/87778048）

   <script type="text/javascript" include="bootstrap,jquery,widgets.alert" src="../../dist/js/include-web.js"></script>
   <script type="text/javascript" include="draw,compare" src="../../dist/mapboxgl/include-mapboxgl.js"></script>  

2.引入底图，创建map对象，其中container: 'arcgisDiv'为页面中定义的div 

var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";              
    var mapUrl = host+"/iserver/services/map-china400/rest/maps/China_4326/zxyTileImage.png?z={z}&x={x}&y={y}";//加载底图的url

  var map = new mapboxgl.Map({
        container: 'arcgisDiv',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": [mapUrl],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "before",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }],
        },
        center: [105.85, 36.79],
        zoom: 3.8     
    });

3.添加比例尺、导航、绘画工具

var navigationControl = new mapboxgl.NavigationControl();
    var scaleControl = new mapboxgl.ScaleControl();
    var draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
            line_string: true,
            polygon: true,
            trash: true
        }
    });

    map.addControl(navigationControl, 'top-left');     //导航条
    map.addControl(scaleControl);     
    map.addControl(draw, "top-right");  

4.画多个用户自己指定地标，添加鼠标提示监听

（1）定义鼠标放上去出现的提示对象、自定义地标对象 

 var popupNoClose = new mapboxgl.Popup({
        anchor: 'bottom',
        closeButton: false   
    }); 

   map.loadImage('../../dist/img/marker-icon.png', function (error, image) {
        if (error) throw error;
        map.addImage('positionPoint', image);       
    });

（2）组织地标的经纬度集合、提示信息集合（data为数据集合，每条记录包含jd、wd和基础信息)       

 var pointList = new Array();
        var tipArray = new Array();
        for(var i = 0 ;i < data.length;i++){   
            pointList[i] = new Array(i);    //在声明二维
            pointList[i][0] = data[i].jd;
            pointList[i][1] = data[i].wd;
            tipArray[i] = getPointTip(data[i]);   //得到每行记录提示信息的方法
        }

  function getPointTip(data){
            return "<ul><li>桥梁名称："+data.bridgeName+"</li><li>桥梁全长："+data.bridgeTotalLength+"</li><li>桥梁全宽："+data.bridgeTotalWidth+"</li></ul>";
    }

（3）把组织好的集合添加到map需要的数据集后在地图上画出（pointList和tipArray数组是有序的，长度相等）

var pointGeometryFetures = [];
        for (var j = 0; j < pointList.length; j++) {
            pointGeometryFetures.push({
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": pointList[j],
                },
                "properties": {POP: 1, CAPITAL: tipArray[j]}     //这里可以自定义参数类型，调用的时候使用properties.CAPITAL
            });               
        }
        
        map.addSource("sourceId", {   //添加source
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",                         //指明数据类型为集合类型
                "features": pointGeometryFetures
            }      
        });      
        
        //type的形状值：[fill, line, symbol, circle, heatmap, fill-extrusion, raster, hillshade, background]
        map.addLayer({
            "id": "layerId",
            "type": "symbol",
            "source": "sourceId",
            "layout": {
                "icon-image": 'positionPoint',
                "icon-size": 0.1,        
                "icon-offset": [0, -15] //设置偏移量
            },    
        });      

（4）添加鼠标监听提示       

 map.on('mouseenter', 'layerId', function (e) {   //根据id绑定鼠标进入事件
            popupNoClose.remove();
            popupNoClose.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(map);
            map.getCanvas().style.cursor = 'pointer';          
        });           
        
        map.on('mousemove', 'layerId', function (e) {   
            popupNoClose.remove();
            popupNoClose.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(map);
            map.getCanvas().style.cursor = 'pointer';
        });  
        
        map.on('mouseout', 'layerId', function () {
            map.getCanvas().style.cursor = '';
            popupNoClose.remove();      
        })   
             
        map.on('click', 'layerId', function (e) {       //根据id绑定鼠标点击事件       
            popupNoClose.remove();
            popupNoClose.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(map);
            map.getCanvas().style.cursor = 'pointer';                  
        });