Mapbox GL js - добавить несколько маркеров радиально вокруг заданной координаты - PullRequest
Новая
       40

Mapbox GL js - добавить несколько маркеров радиально вокруг заданной координаты

0 голосов
/ 11 октября 2018

enter image description here

Как вы можете видеть из изображения выше на моей карте Mapbox GL JS, я пытаюсь расположить маркеры 'W' радиально вокруг маленького '2'маркер в центре, но я застрял в том, как этого добиться.

Вы можете взглянуть на прилагаемую ниже скрипку, чтобы лучше понять это.

Но по сути, есть массивw_markers_arr и для каждого содержимого массива я добавляю маркер на карту, немного смещая его от центрального маркера следующим кодом: 

"coordinates": [
    center_marker.features[0].geometry.coordinates[0] - (w_markers_arr.length * 0.0006) + (i * 0.002),
    center_marker.features[0].geometry.coordinates[1] - 0.001 - (Math.sin(i * 0.001) * 0.5) 
]

Я пытался поиграться с Math.PI, Math.PI/2, чтобы он появился вокруг центрального маркера, но у меня ничего не получилось.

В текущем коде, который я прикрепил, я пытаюсь с помощью Math.Sin() как-то заставить его появиться в волне (я потерял tbh) но это тоже неудачно.

Надеясь, что кто-то может указать мне правильное направление.Любая помощь с благодарностью. 

#geocoder-container > div {
    min-width:50%;
    margin-left:25%;
}
.mapboxgl-ctrl-geocoder {
	display: none;
}

.mapboxgl-ctrl-logo, .mapboxgl-ctrl-bottom-right {
	display: none !important;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Set a point after Geocoder result</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.49.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />

	<div id='map'></div>


	<script>


	var center_marker;
		
	mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaXNrYXNzaW0iLCJhIjoiSk1MaUthdyJ9.vkxtdDbYdLi524WwlKORBw';
	var map = new mapboxgl.Map({
	    container: 'map',
	    style: 'mapbox://styles/fariskassim/cjmszx78b266o2rlar02ytynj',
	    center: [127.017613, 37.591672],
	    maxBounds: [
    		[126.972368, 37.572532], // Southwest coordinates
    		[127.073682, 37.629226]  // Northeast coordinates
	    ], // Sets bounds as max
	    zoom: 14.2,
	    minZoom: 14.2
	    // pitch: 60, // pitch in degrees
	    // bearing: -60, // bearing in degrees
	});

	

	// After the map style has loaded on the page, add a source layer and default
	// styling for a single point.
	map.on('load', function() {

	    map.addSource('single-point', {
	        "type": "geojson",
	        "data": {
	            "type": "FeatureCollection",
	            "features": []
	        }
	    });

		center_marker = {
		    "type": "FeatureCollection",
		    "features": [
							{
							    "type": "Feature",
							    "properties": {
							        "message": "Marker 0",
							    },
							    "geometry": {
							        "type": "Point",
							        "coordinates": [127.017613, 37.591672],
							    }
							},
		    			]
		};


	    // create center marker and add to map
	    var el = document.createElement('div');
	    el.className = 'marker_places';
	    el.dataset.index = 0;
	    el.style.backgroundImage = 'url(http://fariskassim.com/stage/rebel9/seongbukgu/master/v2/img/icn/icn_marker_1.svg)';
	    el.style.width = '25px';
	    el.style.height = '25px';

	    // add center marker to map
	    new mapboxgl.Marker(el)
	        .setLngLat(center_marker.features[0].geometry.coordinates)
	        .addTo(map);


	    /******/


	    var w_markers_arr = ["w_marker1", "w_marker2", "w_marker3", "w_marker4", "w_marker5", "w_marker6",]

		var w_markers = {
		    "type": "FeatureCollection",
		    "features": []
		};


		// add w markers
		
		for (var i = 0; i < w_markers_arr.length; i++) {

			var w_markers_feature_toadd = {
						            "type": "Feature",
						            "properties": {
						                "message": "Work "+i,
						                "index": i
						            },
						            "geometry": {
						                "type": "Point",
						                "coordinates": [
						                    center_marker.features[0].geometry.coordinates[0] - (w_markers_arr.length * 0.0006) + (i * 0.002),
						                    center_marker.features[0].geometry.coordinates[1] - 0.001 - (Math.sin(i * 0.001) * 0.5) 
						                ]
						            }
						        }


			w_markers.features.push(w_markers_feature_toadd);

		    // create marker ele and add to map
		    var el = document.createElement('div');
		    el.className = 'marker_floaters';
		    el.dataset.index = i;
		    el.style.backgroundImage = 'url(https://www.fariskassim.com/stage/rebel9/seongbukgu/master/v2/img/icn/icn_marker_works.svg)';
		    el.style.width = '35px';
		    el.style.height = '35px';

		    // add marker to map
		    new mapboxgl.Marker(el)
		        .setLngLat(w_markers_feature_toadd.geometry.coordinates)
		        .addTo(map);

		}



	});





	</script>

</body>
</html>

1 Ответ

0 голосов
/ 11 октября 2018

Создание круга с широтой / долготой может быть довольно сложным.

Библиотека Turf.js предоставляет некоторые очень полезные инструменты, такие как circle, который возвращает круг из центраточка и радиус: 

var radius = 0.2;
var options = { steps: w_markers_arr.length, units: 'kilometers' };
var circleCenter = center_marker.features[0].geometry.coordinates;

var circle = turf.circle(circleCenter, radius, options);
var circleCoordinates = circle.geometry.coordinates[0];

При установке количества шагов на количество ваших маркеров, circleCoordinates[i] будет содержать координаты для каждого из ваших маркеров (+ последний, который совпадает спервый).

Вот рабочая демонстрация: https://codepen.io/eddydg/pen/JmJbmQ?editors=1000

...