Geojsonから一括してポイントをロードしています。ポイントがMapboxに最初に表示されるときに、「フェードイン」エフェクトまたはアニメーションを追加します。Q：Mapboxサークルレイヤーの「フェードイン」トランジションエフェクトを追加する方法
this.map.addLayer({
id: 'points',
type: 'circle',
paint: {
'circle-radius-transition': {duration: 300},
'circle-color': '#F98200',
'circle-stroke-color': '#D23B00',
'circle-stroke-opacity': 0.5,
},
source: 'points',
})
私はcircle-radius-transitionを試しましたが、役に立たないようです。
あなたは正しい方法でペイントのプロパティを使用しています。あなたが必要とするのは、「円 - 不透明遷移」です。
は、次の手順を実行します。
あなたはここで、このソリューションをチェックアウトすることができます：[codepen](http://codepen.io/joelstuedle/pen/vmyEmz)
HTHは、頼む - ジョエル
ジョエルの答えは完璧だったが、タイムアウトがマップのロードに時間がかかる場合は、他のサークル層がロードされませんマップロード関数内の場所である必要があります
アウト以下のコードスニペット
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9lbHN0dWVkbGUiLCJhIjoiY2ltbmI1OWNpMDAxNnV1bWFtMnpqYWJndyJ9.uDWVjgzU7EVS63OuVWSRuQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [7.445683, 46.945966], // starting position
zoom: 9 // starting zoom
});
// the data we'll add as 'points'
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"timestamp": "0",
"location-name": "Bern"
},
"geometry": {
"type": "Point",
"coordinates": [7.445683, 46.945966]
}
}]
}
// so if the map loads do the following
map.on('load', function() {
// add the data source with the information for the point
map.addSource('point', {
"type": "geojson",
"data": data
});
map.addLayer({
"id": "point",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": 20,
// here we define defaut opacity is zero
"circle-opacity": 0,
"circle-opacity-transition": {
duration: 1500
},
"circle-color": 'red'
}
});
//Timeout shoud be within the map load function
setTimeout(function() {
map.setPaintProperty('point', 'circle-opacity', 1);
}, 1);
});<!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.36.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.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>
</body>
</html>
こんにちはジョエル、正しいリンクの書式を検索してください。あなたはそれをちょうど半分行いましたが、あなたは実際のリンクの周りを逃しました。ありがとう。 – Felix
Hey @FelixHäberle。そのことに感謝します。 –
@JoelStüdleそれは動作します、ありがとう！ – zocoi