0
この例をマップボックスのWebサイトから試してみましたが、私は基本地図しか見ることができませんでした。私がマップ上で定型化されたクラスターとして視覚化したいGeojsonデータは、マップボックス上でレンダリングされていません。自分のWebサイトにある同じコード例を使用しましたが、失敗しました。 （URL：https://www.mapbox.com/mapbox-gl-js/example/cluster/）Mapboxの点として視覚化できないGL JS 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.35.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.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 = 'pk.eyJ1IjoiYW5pcnVkaDIwMjAiLCJhIjoiY2oxMzljM3EwMDAwYTJ3czhtd2dsMmRxZiJ9._9BAosMxlmvnT8FXh7JXYw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [-103.59179687498357, 40.66995747013945],
zoom: 3
}）。
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
map.addSource("earthquakes", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: "clusters",
type: "circle",
source: "earthquakes",
filter: ["has", "point_count"],
paint: {
"circle-color": {
property: "point_count",
type: "interval",
stops: [
[0, "#51bbd6"],
[100, "#f1f075"],
[750, "#f28cb1"],
]
},
"circle-radius": {
property: "point_count",
type: "interval",
stops: [
[0, 20],
[100, 30],
[750, 40]
]
}
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "earthquakes",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12
}
});
map.addLayer({
id: "unclustered-point",
type: "circle",
source: "earthquakes",
filter: ["!has", "point_count"],
paint: {
"circle-color": "#11b4da",
"circle-radius": 4,
"circle-stroke-width": 1,
"circle-stroke-color": "#fff"
}
});
}）;あなたは、ブラウザのインスペクタに見れば
</script>
</body>
</html>
いくつかのコードや例がありますか？ –
@ HudsonTaylor、私の質問に対する興味と迅速な対応に感謝します。ありがとうございます。 – anirudh
@ HudsonTaylor、前の投稿にコードを追加しました。 – anirudh