खींचें कैसे कस्टम आइकॉन MapBox जीएल जे एस

वोट
0

मैं वर्तमान में MapBox जीएल जे एस उपयोग कर रहा हूँ और मैं इस उदाहरण की तरह कस्टम चिह्न और मैं माउस खींचें करने के लिए सक्षम होना चाहते हैं।

मैं यह करने के लिए इसी तरह की कर रहा हूँ खींचने योग्य बिंदु उदाहरण मैं कहाँ है mouseDown, onMoveऔर onUpकाम करता है। हालांकि हिस्सा मैं अटक कर रहा हूँ में है onMove, मैं कस्टम चिह्न है, जो कर रहे हैं स्थापित करने के लिए कैसे यकीन नहीं divखींच प्रक्रिया के दौरान अपनी स्थिति को अद्यतन करने के। मैं प्रतीक के नए निर्देशांक (एलएनजी और अक्षां) को अद्यतन करने रहा हूँ, लेकिन मुझे यकीन है कि कैसे वास्तव में उन्हें स्थानांतरित करने के लिए के रूप में अभी माउस स्थानांतरित नहीं होगा / खींचें नहीं कर रहा हूँ।

मूल खींचने योग्य बिंदु उदाहरण में यह है map.getSource('point').setData(geojson);जो GeoJSON बिंदु के नक्शे पर चलती अनुमति देने के लिए अद्यतन करता है।

तो बुनियादी तौर पर मैं सिर्फ MapBox जीएल जे एस में कस्टम आइकन खींचें करने के लिए सक्षम होना चाहते हैं।

धन्यवाद।

28/09/2016 को 16:46
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
0

मैं एक ऐसी ही समस्या का सामना किया और कई घंटे के बाद, दो उदाहरण गठबंधन और खेतों के रूप में निर्देशांक निर्यात करने में कामयाब रहे। इस स्निपेट का प्रयास करें (अपने स्वयं के accessToken, नक्शा शैली और मार्कर छवि का उपयोग)

$(document).ready(function() {
    // ===============================================
    // mapbox
    // ===============================================
    // Holds mousedown state for events. if this
    // flag is active, we move the point on `mousemove`.
    var isDragging;

    // Is the cursor over a point? if this
    // flag is active, we listen for a mousedown event.
    var isCursorOverPoint;

  
  
mapboxgl.accessToken = '############# Add your own accessToken here ##########';
    var map = new mapboxgl.Map({
        container: 'map-one',
        style: 'mapbox://############# Add your own style here ##########',
        center: [5.037913, 52.185175],
        pitch: 0,
        zoom: 12
    });
    
    var nav = new mapboxgl.Navigation({
        position: 'top-left'
    });

    map.addControl(nav);

    var canvas = map.getCanvasContainer();

    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [5.067, 52.1923]
            },
			"properties": {
				"title": "Afspreekpunt",
				"marker-symbol": "dimmle-marker"
			}
        }]
    };

    function mouseDown() {
        if (!isCursorOverPoint) return;

        isDragging = true;

        // Set a cursor indicator
        canvas.style.cursor = 'grab';

        // Mouse events
        map.on('mousemove', onMove);
        map.on('mouseup', onUp);
    }

    function onMove(e) {
        if (!isDragging) return;
        var coords = e.lngLat;

        // Set a UI indicator for dragging.
        canvas.style.cursor = 'grabbing';

        // Update the Point feature in `geojson` coordinates
        // and call setData to the source layer `point` on it.
        geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
        map.getSource('point').setData(geojson);
    }

    function onUp(e) {
        if (!isDragging) return;
        var coords = e.lngLat;

        canvas.style.cursor = '';
        isDragging = false;

        // Update form fields with coordinates
        $('#latitude').val(coords.lat);
        $('#longitude').val(coords.lng);
    }


    // Mapbox map-accordion fix
    $('#accordion').on('hidden.bs.collapse', function () {
        map.resize();
    })
    $('#accordion').on('shown.bs.collapse', function () {
        map.resize();
    })


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

        // Add a single point to the map
        map.addSource('point', {
            "type": "geojson",
            "data": geojson
        });

        map.addLayer({
            "id": "point",
            "type": "symbol",
            "source": "point",
            "layout": {
              // ##############################################
              // NOTE: this is my marker, change it
              // to the marker you uploaded in your map style
              // - you will likely need different 
              //   offset/translate values
              // ##############################################
				"icon-image": "my-marker",
                "icon-size": 0.3,
				"text-field": "",
				"text-offset": [0, 0.6],
				"text-anchor": "top",
                "text-size": 14
			},
			"paint": {
                "icon-translate": [-6, -34],
			}
        });

        // If a feature is found on map movement,
        // set a flag to permit a mousedown events.
        map.on('mousemove', function(e) {
            var features = map.queryRenderedFeatures(e.point, { layers: ['point']         });

            // Change point and cursor style as a UI indicator
            // and set a flag to enable other mouse events.
            if (features.length) {
                canvas.style.cursor = 'move';
                isCursorOverPoint = true;
                map.dragPan.disable();
            } else {
                //map.setPaintProperty('point', 'circle-color', '#3887be');
                canvas.style.cursor = '';
                isCursorOverPoint = false;
                map.dragPan.enable();
            }
        });

        // Set `true` to dispatch the event before other functions call it. This
        // is necessary for disabling the default map dragging behaviour.
        map.on('mousedown', mouseDown, true);


    });
}); // end document ready
.map { border: 1px solid #ccc }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.css' rel='stylesheet' />

<div id='map-one' class='map' style='height: 360px;'></div>
<input id="latitude"> <input id="longitude">

06/10/2016 को 14:38
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more