1.mapboxgl:在底图上叠加geojson格式的矢量数据切片
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>add vector tile geojson</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="../js/mapbox-gl.js"></script>
<link href="../css/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>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid3BwMTMwMTA1MDEzMCIsImEiOiJjamttZjBzYTMwODA2M3dtaGVqcmdhb3poIn0.GB_3itwimegcGfY7UqfJ3g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
// center: [-68.13734351262877, 45.137451890638886],
center: [105.7350860781, 34.3459367715],
zoom: 5
});
map.on('load', function () {
map.addLayer({
'id': 'fill',
'type': 'fill',
'source': {
'type': 'geojson',
'data': {"type":"FeatureCollection","totalFeatures":"unknown","features":[{"type":"Feature",
"id":"counties_china.2017","geometry":{"type":"Polygon","coordinates":[[[112.453445,21.919145],[112.453445,21.954301],[112.488602,21.954301],[112.488602,21.919145],[112.453445,21.919145]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2018","geometry":{"type":"Polygon","coordinates":[[[112.569694,21.580252],[112.569694,21.615409],[112.604851,21.615409],[112.604851,21.580252],[112.569694,21.580252]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2021","geometry":{"type":"Polygon","coordinates":[[[112.394008,21.886814],[112.394008,21.921971],[112.429165,21.921971],[112.429165,21.886814],[112.394008,21.886814]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2022","geometry":{"type":"Polygon","coordinates":[[[112.579536,21.654652],[112.588058,21.694269],[112.663239,21.70849],[112.653267,21.631269],[112.526527,21.588707],[112.579536,21.654652]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2023","geometry":{"type":"Polygon","coordinates":[[[112.335422,21.45539],[112.335422,21.490547],[112.370579,21.490547],[112.370579,21.45539],[112.335422,21.45539]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2034","geometry":{"type":"Polygon","coordinates":[[[112.452751,21.653404],[112.434517,21.667957],[112.460518,21.690228],[112.4636,21.668301],[112.452751,21.653404]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2035","geometry":{"type":"Polygon","coordinates":[[[112.34433,21.909946],[112.392708,21.915413],[112.417061,21.771303],[112.302963,21.698227],[112.34433,21.909946]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2036","geometry":{"type":"Polygon","coordinates":[[[112.765221,22.402166],[112.8134,22.456587],[112.960381,22.274374],[113.034576,21.950853],[112.905563,21.84507],[112.83371,21.971813],[112.767632,21.944309],[112.556137,21.751419],[112.423622,21.831362],[112.421913,21.910725],[112.497437,21.927763],[112.514793,21.953268],[112.395752,21.941772],[112.364151,22.127169],[112.472107,22.10708],[112.479553,22.020451],[112.600792,21.966553],[112.568314,22.26404],[112.765221,22.402166]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440781,"AVE_PROVIN":44,"FIRST_NAME":"Taishan","LAST_NAME9":"̨ɽÊÐ"}},{"type":"Feature","id":"counties_china.2038","geometry":{"type":"Polygon","coordinates":[[[112.509087,22.603809],[112.712883,22.593325],[112.8134,22.456587],[112.574013,22.277252],[112.590652,21.964891],[112.394913,22.135174],[112.519073,22.410343],[112.385437,22.497633],[112.300911,22.395008],[112.234283,22.429432],[112.419418,22.655542],[112.509087,22.603809]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440783,"AVE_PROVIN":44,"FIRST_NAME":"Kaiping","LAST_NAME9":"¿ªÆ½ÊÐ"}},{"type":"Feature","id":"counties_china.2039","geometry":{"type":"Polygon","coordinates":[[[112.855377,22.838583],[113.03138,22.809929],[112.921013,22.630796],[112.955482,22.567955],[112.797493,22.555546],[112.79039,22.479267],[112.712883,22.593325],[112.509087,22.603809],[112.495087,22.736446],[112.552612,22.649426],[112.678131,22.763123],[112.737396,22.681513],[112.855377,22.838583]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440784,"AVE_PROVIN":44,"FIRST_NAME":"Heshan","LAST_NAME9":"º×ɽÊÐ"}},{"type":"Feature","id":"counties_china.2040","geometry":{"type":"Polygon","coordinates":[[[112.15802,22.397064],[112.300911,22.395008],[112.385437,22.497633],[112.522682,22.405233],[112.364151,22.127169],[112.364822,21.911919],[112.223244,22.072414],[112.016487,22.117804],[112.002029,22.261408],[112.15802,22.397064]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440785,"AVE_PROVIN":44,"FIRST_NAME":"Enping","LAST_NAME9":"¶÷ƽÊÐ"}},{"type":"Feature","id":"counties_china.2041","geometry":{"type":"Polygon","coordinates":[[[110.590012,20.933544],[110.632057,20.917997],[110.568672,20.865479],[110.550308,20.905268],[110.590012,20.933544]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2042","geometry":{"type":"Polygon","coordinates":[[[110.383682,21.402023],[110.499496,21.441936],[110.565361,21.36661],[110.524223,21.298199],[110.62722,21.291275],[110.628754,21.218924],[110.427917,21.190264],[110.433357,21.280884],[110.489578,21.257122],[110.509888,21.294958],[110.427849,21.301706],[110.457619,21.416737],[110.383682,21.402023]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2043","geometry":{"type":"Polygon","coordinates":[[[110.389877,21.083217],[110.389877,21.118374],[110.425034,21.118374],[110.425034,21.083217],[110.389877,21.083217]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2044","geometry":{"type":"Polygon","coordinates":[[[110.555843,21.182353],[110.555843,21.217509],[110.591,21.217509],[110.591,21.182353],[110.555843,21.182353]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2045","geometry":{"type":"Polygon","coordinates":[[[110.242661,20.963858],[110.201073,20.943781],[110.192558,20.952517],[110.194,20.958893],[110.242661,20.963858]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2047","geometry":{"type":"Polygon","coordinates":[[[110.143784,21.121517],[110.205742,21.089743],[110.157097,20.981802],[110.118332,21.017553],[110.143784,21.121517]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2048","geometry":{"type":"Polygon","coordinates":[[[110.265182,21.073718],[110.265182,21.108874],[110.300339,21.108874],[110.300339,21.073718],[110.265182,21.073718]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2049","geometry":{"type":"Polygon","coordinates":[[[110.50568,20.88396],[110.50568,20.919116],[110.540836,20.919116],[110.540836,20.88396],[110.50568,20.88396]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2050","geometry":{"type":"Polygon","coordinates":[[[110.525284,21.15881],[110.42778,21.177065],[110.633789,21.20904],[110.556976,21.08931],[110.525284,21.15881]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2051","geometry":{"type":"Polygon","coordinates":[[[110.396667,21.306288],[110.40107,21.153738],[110.31942,21.087589],[110.551819,21.056711],[110.52034,20.917854],[110.459641,20.991144],[110.248596,20.952663],[110.349197,21.058569],[110.238121,21.107107],[110.223427,21.031635],[110.177299,21.115255],[110.231277,21.300634],[110.396667,21.306288]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440801,"AVE_PROVIN":44,"FIRST_NAME":"Zhanjiang_Core","LAST_NAME9":"Õ¿½ÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2052","geometry":{"type":"Polygon","coordinates":[[[109.937401,21.42835],[110.139633,21.419708],[110.243362,21.512604],[110.409264,21.328152],[110.231277,21.300634],[110.176407,21.178257],[110.221336,21.131109],[110.117188,21.148653],[110.09742,21.071281],[110.045219,21.162685],[109.931511,21.178888],[109.870781,21.023605],[109.702057,20.999056],[109.674927,21.123335],[109.731743,21.188736],[109.73465,21.148697],[109.759712,21.150677],[109.763397,21.342896],[109.965027,21.335365],[109.904381,21.372139],[109.937401,21.42835]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440823,"AVE_PROVIN":44,"FIRST_NAME":"Suixi","LAST_NAME9":"ËìϪÏØ"}},{"type":"Feature","id":"counties_china.2053","geometry":{"type":"Polygon","coordinates":[[[110.468227,20.579886],[110.468227,20.615043],[110.503384,20.615043],[110.503384,20.579886],[110.468227,20.579886]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2054","geometry":{"type":"Polygon","coordinates":[[[109.907543,20.205563],[109.907543,20.24072],[109.9427,20.24072],[109.9427,20.205563],[109.907543,20.205563]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2055","geometry":{"type":"Polygon","coordinates":[[[110.401016,20.677401],[110.401016,20.712558],[110.436172,20.712558],[110.436172,20.677401],[110.401016,20.677401]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2056","geometry":{"type":"Polygon","coordinates":[[[110.551949,20.325247],[110.576973,20.388624],[110.585182,20.386526],[110.587959,20.362825],[110.551949,20.325247]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2057","geometry":{"type":"Polygon","coordinates":[[[110.396377,20.580568],[110.396377,20.615725],[110.431534,20.615725],[110.431534,20.580568],[110.396377,20.580568]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2059","geometry":{"type":"Polygon","coordinates":[[[110.326492,20.640671],[110.326492,20.675827],[110.361648,20.675827],[110.361648,20.640671],[110.326492,20.640671]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2062","geometry":{"type":"Polygon","coordinates":[[[110.451149,20.648792],[110.478149,20.631895],[110.474274,20.578836],[110.405128,20.646791],[110.451149,20.648792]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2063","geometry":{"type":"Polygon","coordinates":[[[110.015099,20.438852],[110.387421,20.656435],[110.530884,20.46611],[110.282623,20.237797],[110.046173,20.287933],[109.920532,20.22909],[109.862793,20.397169],[109.904404,20.430449],[109.983513,20.332829],[110.044533,20.361708],[109.981468,20.356764],[110.015099,20.438852]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440825,"AVE_PROVIN":44,"FIRST_NAME":"Xuwen","LAST_NAME9":"ÐìÎÅÏØ"}},{"type":"Feature","id":"counties_china.2064","geometry":{"type":"Polygon","coordinates":[[[110.295937,21.914255],[110.394623,21.871717],[110.342247,21.844151],[110.354973,21.712156],[110.512306,21.502903],[110.47718,21.446392],[110.383682,21.402023],[110.384277,21.470695],[110.325333,21.431591],[110.233788,21.513779],[110.139633,21.419708],[109.942467,21.426439],[109.850578,21.511898],[109.796692,21.462551],[109.749893,21.646204],[109.899002,21.6576],[109.975418,21.877396],[110.295937,21.914255]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440881,"AVE_PROVIN":44,"FIRST_NAME":"Lianjiang","LAST_NAME9":"Á®½ÊÐ"}},{"type":"Feature","id":"counties_china.2065","geometry":{"type":"Polygon","coordinates":[[[110.126869,21.087742],[110.187119,20.84919],[110.168457,20.864351],[110.124786,20.851858],[110.17141,20.847507],[110.13192,20.809412],[110.128487,20.774345],[110.316116,20.84206],[110.387039,20.725828],[110.324081,20.771555],[110.276543,20.650534],[110.322472,20.675102],[110.320351,20.617369],[110.122101,20.544491],[110.079117,20.44364],[109.945938,20.432476],[109.934471,20.513937],[109.918137,20.433348],[109.826622,20.489178],[109.847473,20.586569],[109.742691,20.62565],[109.85984,20.714245],[109.764587,20.698681],[109.760406,20.861191],[109.71003,20.803938],[109.674583,20.981594],[109.870781,21.023605],[109.88958,21.169512],[109.990601,21.183184],[110.126869,21.087742]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440882,"AVE_PROVIN":44,"FIRST_NAME":"Leizhou","LAST_NAME9":"À×ÖÝÊÐ"}},{"type":"Feature","id":"counties_china.2066","geometry":{"type":"Polygon","coordinates":[[[110.743332,21.639801],[110.969208,21.418926],[110.796822,21.400723],[110.65609,21.252874],[110.581421,21.263285],[110.482964,21.469999],[110.68306,21.493292],[110.743332,21.639801]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440883,"AVE_PROVIN":44,"FIRST_NAME":"Wuchuan","LAST_NAME9":"Îâ´¨ÊÐ"}},{"type":"Feature","id":"counties_china.2067","geometry":{"type":"Polygon","coordinates":[[[110.740547,21.710348],[110.828133,21.825211],[110.965279,21.764345],[110.905357,21.528889],[110.822006,21.539707],[110.740547,21.710348]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440901,"AVE_PROVIN":44,"FIRST_NAME":"Maoming","LAST_NAME9":"ïÃûÊÐÊÐϽÇø"}},{"type":"Feature","id":"counties_china.2068","geometry":{"type":"Polygon","coordinates":[[[111.022602,21.4767],[111.022602,21.511856],[111.057758,21.511856],[111.057758,21.4767],[111.022602,21.4767]]]},"geometry_name":"the_geom","properties":{"ADCODE99":440923,"AVE_PROVIN":44,"FIRST_NAME":"Dianbai","LAST_NAME9":"µç°×ÏØ"}},{"type":"Feature","id":"counties_china.2069","geometry":{"type":"Polygon","coordinates":[[[111.354759,21.428888],[111.354759,21.464045],[111.389916,21.464045],[111.389916,21.428888],[111.354759,21.428888]]]},"geometry_name":"the_geo
不同API加载geojson
最新推荐文章于 2024-10-12 13:57:44 发布