0
MapBox GL JSマップにGeoJson Feature Collectionレイヤー（ポイント）をロードする必要があります。MapBox GL JSマップにGeoJSONレイヤーを読み込む方法は？
私はエラーが私のブラウザのコンソールに出て来ないこのHTML/Javascriptのコード
<!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.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/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 = '<PUT YOUR MAPBOX KEY HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [7.828,44.836],
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
theCoords = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NAME": "<b>Entrata Castello del Valentino<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Entrata_Castello_del_Valentino.JPG\" target=\"_blank\">Immagine 360 ø<\/a>", "Longitudine": 7.6855111, "Latitudine": 45.0546417, "Altitudine": 288.39, "Direzione": 202.5, "Data": "2017:06:06", "Ora": "17:57" }, "geometry": { "type": "Point", "coordinates": [ 7.6855111, 45.0546417 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4303883, "Latitudine": 44.8816653, "Altitudine": 0.0, "Direzione": 292.5, "Data": "2017:06:16", "Ora": "19:27" }, "geometry": { "type": "Point", "coordinates": [ 7.4303883, 44.8816653 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Regione Maineri<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1A.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Regione_Maineri.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4328394, "Latitudine": 44.8790463, "Altitudine": 336.29, "Direzione": 180.0, "Data": "2017:06:16", "Ora": "20:23" }, "geometry": { "type": "Point", "coordinates": [ 7.4328394, 44.8790463 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4236184, "Latitudine": 44.8790577, "Altitudine": 0.0, "Direzione": 270.0, "Data": "2017:06:16", "Ora": "19:30" }, "geometry": { "type": "Point", "coordinates": [ 7.4236184, 44.8790577 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Rivasecca<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10C.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Rivasecca.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4266083, "Latitudine": 44.88725, "Altitudine": 348.79, "Direzione": 0.0, "Data": "2017:06:16", "Ora": "20:16" }, "geometry": { "type": "Point", "coordinates": [ 7.4266083, 44.88725 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Viale Mattioli<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Viale_Mattioli.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.687725, "Latitudine": 45.0566306, "Altitudine": 282.6, "Direzione": 292.5, "Data": "2017:06:06", "Ora": "17:44" }, "geometry": { "type": "Point", "coordinates": [ 7.687725, 45.0566306 ] } }
]
};
map.on('load', function() {
map.addSource("route", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"properties": {},
"geometry": theCoords
}
});
map.addLayer({
"id": "route",
"type": "symbol",
"source": "route",
"paint": {
"circle-radius": 10,
"circle-color": "#ff0000"
}
});
});
</script>
</body>
</html>
を使用することを試みたが、私は地図上の私の層を見ることができません。 http://geojsonlint.com/を使用してGeoJSONをチェックしましたが、このツールを使用するとGeoJsonがツールマップに表示されます。
私はそれがにGeoJSON構造に関するものになると思うが、私は私が解決してきた