多路canvas的mapbox gl
阿新 • • 發佈：2018-04-27
IT -s temp gin color play https utf star
代碼
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘ /> <title>Display a map</title> <meta name=‘viewport‘ content=‘initial-scale=1,maximum-scale=1,user-scalable=no‘ /> <script src=‘https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js‘></script> <link href=‘https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css‘ rel=‘stylesheet‘ /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #map2 { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id=‘map‘></div> <div id=‘map2‘></div> <script> var style = { "version": 8, "name": "Empty", "metadata": { "mapbox:autocomposite": true, "mapbox:type": "template" }, //"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf","sources": {}, "layers": [ { "id": "background", "type": "background", "paint": { "background-color": "rgba(0,255,0,0.4)" } } ] } mapboxgl.accessToken = ‘pk.eyJ1IjoibGlsZWlqb3JkYW4iLCJhIjoiY2luc2Z1a2UxMTEybnUya2pheDdwZjhxOSJ9._ENu7hjywKHQZMcj9S24vA‘; var map = new mapboxgl.Map({ container: ‘map‘, // container id style: style, center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat] zoom: 14 // starting zoom }); map.on(‘load‘, function () { 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], [-122.48404026031496, 37.83114119107971], [-122.48404026031496, 37.83049717427869], [-122.48348236083984, 37.829920943955045], [-122.48356819152832, 37.82954808664175], [-122.48507022857666, 37.82944639795659], [-122.48610019683838, 37.82880236636284], [-122.48695850372314, 37.82931081282506], [-122.48700141906738, 37.83080223556934], [-122.48751640319824, 37.83168351665737], [-122.48803138732912, 37.832158048267786], [-122.48888969421387, 37.83297152392784], [-122.48987674713133, 37.83263257682617], [-122.49043464660643, 37.832937629287755], [-122.49125003814696, 37.832429207817725], [-122.49163627624512, 37.832564787218985], [-122.49223709106445, 37.83337825839438], [-122.49378204345702, 37.83368330777276] ] } } }, "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "#333", "line-width": 8 } }); }); var style2 = { "version": 8, "name": "Empty", "metadata": { "mapbox:autocomposite": true, "mapbox:type": "template" }, //"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", "sources": {}, "layers": [ { "id": "background", "type": "background", "paint": { "background-color": "rgba(255,255,0,0.4)" } } ] } mapboxgl.accessToken = ‘pk.eyJ1IjoibGlsZWlqb3JkYW4iLCJhIjoiY2luc2Z1a2UxMTEybnUya2pheDdwZjhxOSJ9._ENu7hjywKHQZMcj9S24vA‘; var map2 = new mapboxgl.Map({ container: ‘map2‘, // container id style: style2, center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat] zoom: 14 // starting zoom }); map2.on(‘load‘, function () { map2.addLayer({ "id": "route", "type": "line", "source": { "type": "geojson", "data": { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-122.48369693756104 + 0.0009, 37.83381888486939], [-122.48348236083984 + 0.0009, 37.83317489144141], [-122.48339653015138 + 0.0009, 37.83270036637107], [-122.48356819152832 + 0.0009, 37.832056363179625], [-122.48404026031496 + 0.0009, 37.83114119107971], [-122.48404026031496 + 0.0009, 37.83049717427869], [-122.48348236083984 + 0.0009, 37.829920943955045], [-122.48356819152832 + 0.0009, 37.82954808664175], [-122.48507022857666 + 0.0009, 37.82944639795659], [-122.48610019683838 + 0.0009, 37.82880236636284], [-122.48695850372314 + 0.0009, 37.82931081282506], [-122.48700141906738 + 0.0009, 37.83080223556934], [-122.48751640319824 + 0.0009, 37.83168351665737], [-122.48803138732912 + 0.0009, 37.832158048267786], [-122.48888969421387 + 0.0009, 37.83297152392784], [-122.48987674713133 + 0.0009, 37.83263257682617], [-122.49043464660643 + 0.0009, 37.832937629287755], [-122.49125003814696 + 0.0009, 37.832429207817725], [-122.49163627624512 + 0.0009, 37.832564787218985], [-122.49223709106445 + 0.0009, 37.83337825839438], [-122.49378204345702 + 0.0009, 37.83368330777276] ] } } }, "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "#111", "line-width": 6 } }); map2.on(‘move‘,function(){ map.jumpTo({ center: map2.getCenter(), zoom: map2.getZoom(), bearing: map2.getBearing(), pitch: map2.getPitch() }); }) }); </script> </body> </html>
demo
多路canvas的mapbox gl