多路canvas的mapbox gl

Posted 李雷

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多路canvas的mapbox gl相关的知识，希望对你有一定的参考价值。

代码

<!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
以上是关于多路canvas的mapbox gl的主要内容，如果未能解决你的问题，请参考以下文章
 

 MapBox GL 地图页面保存为图片的方法


 mapbox gl改变图标颜色


 Mapbox GL js 可用图标


 react-mapbox-gl _onClickGeolocate() 调用与 setTimeout 自动请求位置


 在 mapbox-gl 中加载 ESRI 矢量图块


 通过 mapbox gl js 向 mapbox 中的地图添加一些基本标记