MapBox जीएल जे एस, कस्टम मार्कर जोड़ें

वोट
2

मैं एक दृष्टिकोण है कि मुझे मेरे मानचित्र के लिए एक सरल कस्टम मार्कर बनाने के लिए की तरह की अनुमति होगी रहा हूँ Mapbox JSकरता है।

वेब के आसपास एक गहरी नजर थी और ऐसा लगता है कि इस हासिल करने के लिए कोई स्पष्ट या काफी सीधे आगे रास्ता है। यह काफी कार्यक्षमता से चूक गए की जा रही मुझे लगता है कि है।

साथ काम करने के लिए कुछ प्रयास किया था Mapbox Studio, लेकिन फिर भी प्रयास विफल के रूप में यह कैसे मैं कस्टम अपलोड कर सकते हैं समझने के लिए काफी कठिन है एसवीजी के लिए और उन्हें संदर्भित करने के लिए सक्षम किया जा रहा।

तो एक उदाहरण देने के लिए मैं के साथ एक कस्टम नक्शा बना लेते हैं Mapbox Studioजहाँ तक मैं कोई प्रतीक है कि मैं उपयोग कर सकते हैं देखते हैं देख सकते हैं और। स्प्राइट शीट नामक एक कुछ देखने के लिए प्रयास किया था, लेकिन जब से मैं दृष्टिकोण उस तरह से काम नहीं है, मैं पता नहीं है कि यह कैसे करना है।

यह बहुत महत्वपूर्ण है मैं सिर्फ मेरे लिए नहीं लगता है, लेकिन लोग हैं, जो बस कुछ नया सीखने शुरू कर दिया की एक बहुत कुछ के लिए की तरह Mapbox GL JSएक अच्छा गाइड जोड़ने से।

इसलिए इस संबंध में मेरी कोड के कुछ कुछ कस्टम मार्कर बनाने के लिए

markers = {

  type: FeatureCollection,
  features: [{
    type: Feature,
    properties: {
      marker-symbol: golf,
      type: journey-step,
      previous: 0,
      current: 1,
      next: 2
    },
    geometry: {
      type: Point,
      coordinates: [-155.98114013671872,
        19.70207180765683
      ]
    }
  }, {
    type: Feature,
    properties: {
      marker-color: #7f201e,
      marker-size: medium,
      marker-symbol: music,
      type: journey-step,
      previous: 1,
      current: 2,
      next: 3
    },
    geometry: {
      type: Point,
      coordinates: [-155.67352294921875,
        19.01278705937288
      ]
    }
  }, {
    type: Feature,
    properties: {

      icon-symbol: Four,
      type: journey-step,
      previous: 2,
      current: 3,
      next: 4
    },
    geometry: {
      type: Point,
      coordinates: [-155.2423095703125,
        19.42644883261674
      ]
    }
  }, {
    type: Feature,
    properties: {
      marker-color: #7f201e,
      marker-size: medium,
      marker-symbol: theatre,
      type: journey-step,
      previous: 3,
      current: 4,
      next: 5
    },
    geometry: {
      type: Point,
      coordinates: [-155.10223388671875,
        19.698193071745962
      ]
    }
  }, {
    type: Feature,
    properties: {
      marker-color: #7f201e,
      marker-size: medium,
      marker-symbol: alcohol-shop-12,
      type: journey-step,
      previous: 4,
      current: 5,
      next: 6
    },
    geometry: {
      type: Point,
      coordinates: [-155.38787841796872,
        20.04303061200023
      ]
    }
  }, {
    type: Feature,
    properties: {
      marker-color: #7f201e,
      marker-size: medium,
      marker-symbol: theatre,
      type: journey-step,
      previous: 5,
      current: 6,
      next: 7
    },
    geometry: {
      type: Point,
      coordinates: [-155.8575439453125,
        20.229986070955245
      ]
    }
  }, {
    type: Feature,
    properties: {
      marker-color: #7f201e,
      marker-size: medium,
      marker-symbol: theatre,
      type: journey-step,
      previous: 6,
      current: 7,
      next: 8
    },
    geometry: {
      type: Point,
      coordinates: [-155.89599609375,
        19.46400263520258
      ]
    }
  }]

};
map.addSource(markers, {
  type: geojson,
  data: markers
});

map.addLayer({
  id: markers,
  type: symbol,
  source: markers
});

आप अनुमान लगा सकते हैं, मेरे नक्शे किसी भी प्रतीक प्रदर्शित नहीं करता है।

किसी को भी कुछ एक मानचित्र पुस्तकालय के लिए महत्वपूर्ण है कि प्राप्त करने का एक अच्छा तरीका है और समझने का सुझाव कर सकते हैं?

22/05/2016 को 17:10
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
2

कुछ लिंक:

  1. प्रलेखन स्टूडियो में कस्टम मार्कर बनाने और उन्हें एक MapBox जीएल जे एस मानचित्र में जोड़ने पर यहाँ नहीं है: https://www.mapbox.com/help/custom-markers/

  2. जब मैं समर्थन यह इस तरह से कर रही है नहीं होगा, यहां एक उदाहरण है कि एक मानचित्र पर एक बिंदु भूखंडों एक कस्टम डोम तत्व का उपयोग है: http://bl.ocks.org/tristen/10b69f89b600ca0433fdc472db6a6cab

  3. इस टिप्पणी (! और चर्चा) क्यों एक कस्टम मार्कर प्रदर्शित की तरह एक उपयोग के मामले एक जोड़ी अतिरिक्त चरणों की आवश्यकता पर पृष्ठभूमि की कहानी प्रदान करता है: https://github.com/mapbox/mapbox-gl-js/issues/656#issuecomment-216305579

23/05/2016 को 17:25
का स्रोत उपयोगकर्ता

वोट
0

कुंआ...

की तुलना में मैंने सोचा था कि समाधान आसान था, उपयोगी लिंक पोस्ट करने के लिए @tristen करने के लिए धन्यवाद और मैं वास्तव में लोग उन्हें उपयोगी पाते हैं उम्मीद है।

मैंने पाया है कि यह ऐसा करने का सबसे आसान तरीका है, इन सरल चरणों का पालन कर रहा है।

1) कस्टम मानचित्र बनाएं का उपयोग कर Mapbox Studio

2) छवियों के लिए अपने कस्टम मार्कर / माउस अपलोड करें (सिर्फ अपने नक्शे क्लिक गुण (नीचे बाएँ कोने संपादित) -> किसी भी स्तर पर क्लिक करें -> आइकन -> SVG चित्र जोड़ने के लिए, (आप, कस्टम चिह्न खुद किया है तो जैसे मैंने किया एडोब इलस्ट्रेटर का उपयोग कर, (विरासत कुछ ...) एक पुराने स्वरूप में उन्हें बचाने के लिए सुनिश्चित करें, या अपने माउस काले और सफेद) हो जाएगा -> और बचाने के हिट)

3) यदि आप अपने में बनाए गए नक्शे संदर्भ JavaScriptइस तरह फ़ाइल

map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/username/aasdasdassdfsdfsdfsdf131', //stylesheet location
      center: [ -115.15628814697266,
          36.173079792635654], // starting position
      zoom: 10.5
        // starting zoom
    });

4) अब आप अपने मार्कर / माउस संदर्भित कर सकते हैं, उदाहरण के लिए मैं अपलोड कर दिया है और एसवीजी कहा जाता है golf.svgतो जब मैं परिभाषित मेरी परत मैं यह कर सकता: "marker-symbol": "golf"

और बस यही सब है।

10/03/2017 को 07:55
का स्रोत उपयोगकर्ता

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