[Mapbox GL]添加GeoJSON线

来源：互联网发布：阿里云备案拍照点分布编辑：程序博客网时间：2024/05/30 23:41
在地图上添加GeoJSON线
<!DOCTYPE html><html><head>    <meta charset='utf-8' />    <title></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.28.0/mapbox-gl.js'></script>    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />    <style>        body { margin:0; padding:0; }        #map { position:absolute; top:0; bottom:0; width:100%; }    </style></head><body><div id='map'></div>     /* 用来放置map的div容器 */<script>mapboxgl.accessToken = '<your access token here>';var map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/streets-v9',    center: [-122.486052, 37.830348],    zoom: 15});map.on('load', function () {       /* 为map添加load事件监听器 */    map.addSource("route", {       /* addSource()函数添加资源,资源ID是route */        "type": "geojson",        "data": {                  /* GeoJSON格式数据 */            "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]                ]            }        }    });    map.addLayer({                 /* 为地图添加layer */        "id": "route",             /* layer id是route */        "type": "line",            /* line类型layer*/        "source": "route",         /* 资源引用的是上面定义的source*/        "layout": {            "line-join": "round",  /* 线条相交的形状 */            "line-cap": "round"    /* 线条末端形状 */        },        "paint": {            "line-color": "#888",  /* 线条颜色 */            "line-width": 8        /* 线条宽度 */        }    });});</script></body></html>
原文：https://www.mapbox.com/mapbox-gl-js/example/geojson-line/
0 0