Mapbox GL AddLayer: ภาพไอคอนมาจากที่ไหน


10

ตัวอย่างจำนวนมากโหลดภาพไอคอนแบบนี้เสมอ (เช่นที่นี่: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ ):

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

ไอคอนนี้ถูกเก็บไว้ที่ไหนและฉันจะเชื่อมโยงไปยัง png หรือ svg ในพื้นที่ได้อย่างไร หรือฉันจะใส่markersแหล่งของตัวเองลงไปได้อย่างไร ตัวอย่างไม่ได้บันทึกไว้อย่างดี


คุณตรวจสอบส่วน 'อ้างอิงสไตล์' ของเอกสาร API แล้วหรือยัง
Tangnar

3
มันไม่ได้อธิบายอย่างดีในความคิดของฉัน ชอบที่จะเห็นตัวอย่างการทำงานที่อธิบายไว้เป็นอย่างดี
tobias47n9e

คำตอบ:


13

หากคุณทำตามตัวอย่างคุณจะได้รับสไปรต์ที่โหลดด้วยสไปร์ทชีทสไตล์เฉพาะของคุณซึ่งไม่จำเป็นต้องจับคู่แบบ 1 ต่อ 1 กับสไตล์อื่น

เช่นมรกต -v8 ไม่มี "ไอคอนภาพ": "ท่าเรือ -15" เหมือนตัวอย่างที่ใช้ streets-v8

วิธีดูรายการสไปรต์ที่มีจากสไตล์ที่สอดคล้องกัน: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

ฉันสามารถเลือกไอคอน "ท่าเรือ" จากที่เก็บ Emerald - v8 ของพวกเขาเช่นนั้น:

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

นี่คือทรัพยากรที่ช่วยให้ฉันดึงมันเข้าด้วยกันและอธิบายวิธีสร้างไอคอนของคุณเอง: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

แก้ไข:

โดยทั่วไปหากต้องการเพิ่มไอคอนของคุณเองให้ไปที่ Mapbox studio สร้างสไตล์ของคุณเองหรือแก้ไขหนึ่งในนั้น เพียงเพิ่ม SVG ของคุณเองหนึ่งตัวจากนั้นไอคอนนั้นจะพร้อมให้คุณใช้งานลงในแผ่นงานสไปรต์แบบกำหนดเองของคุณป้อนคำอธิบายรูปภาพที่นี่


7

นอกจากนี้คุณยังสามารถใช้ไอคอนภายนอก / สร้างขึ้นได้เช่นเดียวกับที่icon-imageคุณใช้map.loadImage()และmap.addImage()เป็นอันดับแรก

ตัวอย่าง:

เพิ่มไอคอนลงในแผนที่

เพิ่มไอคอนที่สร้างลงในแผนที่


0

ในขณะที่มันมีการกล่าวในผีสางเอกสาร : ผ่าน"sprite": "https://link"สไตล์ของคุณที่linkเชื่อมโยงไปยัง JSON genereted กับspritezero-CLI spritezero-cli สร้าง png sprite จากรายการไอคอนของคุณในรูปแบบ svg 'icon-image'ที่คุณสามารถใช้ไอคอนในชั้นสัญลักษณ์เป็น

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.