MapBox-जीएल-js में पाठ लेबल केंद्रित?

वोट
4

मैं MapBox-जीएल-js में एक फीचर बहुभुज पर एक पाठ लेबल केंद्रित करने के लिए कोशिश कर रहा हूँ। क्या यह संभव है? ऐसा लगता है कि केवल एक लेबल की नियुक्ति से संबंधित विकल्प प्रतीक-प्लेसमेंट लेआउट संपत्ति (है https://www.mapbox.com/mapbox-gl-style-spec/#symbol ):

प्रतीक-प्लेसमेंट

वैकल्पिक enum। बिंदु में से एक, लाइन। चूक बात करने के लिए। इसके ज्यामिति के लेबल प्लेसमेंट रिश्तेदार। lineकेवल LineStrings और बहुभुज पर इस्तेमाल किया जा सकता है।

बिंदु का उपयोग करते हुए सुविधा के निचले दाएं कोने पर लेबल स्थान:

यहाँ

विचार?

29/05/2015 को 12:33
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
3

आप उपयोग कर सकते हैं मैदान पुस्तकालय बहुभुज के केन्द्रक लगता है, तो उस बिंदु समन्वय के साथ एक प्रतीक बनाने के लिए और यह करने के लिए पाठ क्षेत्र में जोड़ें।

एक बहुभुज सुविधा के केन्द्रक पर प्रदर्शित एक पाठ लेबल के लिए नीचे दिए गए उदाहरण देखें

mapboxgl.accessToken = 'pk.eyJ1IjoiYXJ1bmFicmFoYW0iLCJhIjoiODBJTV9WUSJ9.m5tbZ5XYg8VhD-8Qu7d_SA';

// Initialize the map
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-68.13734351262877, 45.137451890638886], // starting position
    zoom: 3 // starting zoom
});

// Add a feature
var feature = {
  'type': 'Feature',
  'properties': {
      'name': 'Maine'
  },
  'geometry': {
      'type': 'Polygon',
      'coordinates': [[[-67.13734351262877, 45.137451890638886],
          [-66.96466, 44.8097],
          [-68.03252, 44.3252],
          [-69.06, 43.98],
          [-70.11617, 43.68405],
          [-70.64573401557249, 43.090083319667144],
          [-70.75102474636725, 43.08003225358635],
          [-70.79761105007827, 43.21973948828747],
          [-70.98176001655037, 43.36789581966826],
          [-70.94416541205806, 43.46633942318431],
          [-71.08482, 45.3052400000002],
          [-70.6600225491012, 45.46022288673396],
          [-70.30495378282376, 45.914794623389355],
          [-70.00014034695016, 46.69317088478567],
          [-69.23708614772835, 47.44777598732787],
          [-68.90478084987546, 47.184794623394396],
          [-68.23430497910454, 47.35462921812177],
          [-67.79035274928509, 47.066248887716995],
          [-67.79141211614706, 45.702585354182816],
          [-67.13734351262877, 45.137451890638886]]]
  }
};

// Make a point feature for displaying the text;
// User turf library to find the centroid of the polygon
var centroidPt = turf.centroid(feature);
centroidPt.properties.title = 'label';

map.on('style.load', function () {
    // Add the feature source
    map.addSource('maine', {
        'type': 'geojson',
        'data': feature
    });

    // Add the label point source
    map.addSource('label', {
    	'type': 'geojson',
      'data': centroidPt
    });

	// Add the feature style
    map.addLayer({
        'id': 'route',
        'type': 'fill',
        'source': 'maine',
        'layout': {},
        'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.8
        }
    });

    // Add the label style
    map.addLayer({
        'id': 'label-style',
        'type': 'symbol',
        'source': 'label',
        'layout': {
        	'text-field': 'Label',
          
        },
        'paint': {
            'text-color': 'red'
            
        }
    });
    
});
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.1/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.1/mapbox-gl.js"></script>


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

19/02/2016 को 12:09
का स्रोत उपयोगकर्ता

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