mapbox使用

一、实例化化地图 www.mapbox.com/mapbox-gl-j…

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
 
<div id='map'></div>
 
mapboxgl.accessToken = 'undefined';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

二、绘制标记 www.mapbox.com/mapbox-gl-j…

var divNode = document.createElement('div');
div.innerHTML = '<strong>hello</strong>';
new mapboxgl.Marker(divNode, {offset: [-10, -10]}).setLngLat([23.123123, 115.321421]).addTo(map);

三、绘制线 www.mapbox.com/mapbox-gl-j…

map.addLayer({
    "id": "route",
    "type": "line",
    "source": {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.48369693756104, 37.83381888486939],
                    [-122.48348236083984, 37.83317489144141],
                    [-122.48339653015138, 37.83270036637107],
                    [-122.48356819152832, 37.832056363179625]
                ]
            }
        }
    },
    "layout": {
        "line-join": "round",
        "line-cap": "round"
    },
    "paint": {
        "line-color": "#888",
        "line-width": 8
    }
});

四、绘制区域 www.mapbox.com/mapbox-gl-j…

map.addLayer({
    'id': 'maine',
    'type': 'fill',
    'source': {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'geometry': {
                'type': 'Polygon',
                'coordinates': [[[-67.13734351262877, 45.137451890638886],
                    [-66.96466, 44.8097],
                    [-68.03252, 44.3252],
                    [-69.06, 43.98],
                    [-70.11617, 43.68405],
                    [-70.64573401557249, 43.090083319667144],
                    [-70.75102474636725, 43.08003225358635],
                    [-70.79761105007827, 43.21973948828747],
                    [-70.98176001655037, 43.36789581966826],
                    [-70.94416541205806, 43.46633942318431],
                    [-71.08482, 45.3052400000002],
                    [-70.6600225491012, 45.46022288673396],
                    [-70.30495378282376, 45.914794623389355],
                    [-70.00014034695016, 46.69317088478567],
                    [-69.23708614772835, 47.44777598732787],
                    [-68.90478084987546, 47.184794623394396],
                    [-68.23430497910454, 47.35462921812177],
                    [-67.79035274928509, 47.066248887716995],
                    [-67.79141211614706, 45.702585354182816],
                    [-67.13734351262877, 45.137451890638886]]]
            }
        }
    },
    'layout': {},
    'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.8
    }
});

五、绘制信息层 www.mapbox.com/mapbox-gl-j…

var popup = new mapboxgl.Popup({closeOnClick: false})
    .setLngLat([-96, 37.8])
    .setHTML('<h1>Hello World!</h1>')
    .addTo(map);

六、修改主题 www.mapbox.com/mapbox-gl-j…

map.setStyle('mapbox://styles/mapbox/dark-v9');

七、添加WMS层 www.mapbox.com/mapbox-gl-j…

map.addLayer({
    'id': 'wms-test-layer',
    'type': 'raster',
    'source': {
        'type': 'raster',
        'tiles': [
            'https://geodata.state.nj.us/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=Natural2015'
        ],
        'tileSize': 256
    },
    'paint': {}
}, 'aeroway-taxiway');