วิธีเพิ่มป้ายกำกับข้อความอย่างเดียวบนแผนที่แผ่นพับที่ไม่มีไอคอน

22

ฉันกำลังมองหาวิธีแสดงข้อความบนแผนที่แผ่นพับโดยใช้เครื่องหมายหรืออย่างอื่นโดยไม่แสดงไอคอนใด ๆ ฉันต้องการแสดงข้อความเท่านั้นและสามารถจัดรูปแบบและหมุนได้ ... ข้อเสนอแนะใด ๆ

leaflet

— Etienne Desgagné
แหล่งที่มา

1

@NikhilVJ - คำถาม & คำตอบนั้นไม่ได้กล่าวถึงวิธีการมีเคล็ดลับเครื่องมือโดยไม่ต้องมีเครื่องหมายที่เกี่ยวข้อง คำตอบที่นี่หารือถึงวิธีการที่จะมีเพียงข้อความที่ไม่มีเครื่องหมายที่มองเห็นได้

— ToolmakerSteve

อาขอโทษฉันไม่ดี

— Nikhil VJ

19

ฉันแก้ไขปัญหาของฉันโดยใช้คุณสมบัติ Leaflet L.DivIcon ที่แสดงถึงไอคอนที่มีน้ำหนักเบาสำหรับเครื่องหมายที่ใช้องค์ประกอบ div ง่าย ๆ แทนภาพ ... เครื่องหมายเหล่านี้มี html และตัวเลือก className ที่อนุญาตให้ฉันสร้างป้ายกำกับด้วย css drived รูปแบบ ...

— Etienne Desgagné
แหล่งที่มา

11

คุณจะให้รหัสเล็กน้อยสำหรับสิ่งนี้หรือไม่?

— mastov

คำตอบนี้ไม่เป็นความคิดถ้าคุณต้องการป้ายกำกับและเครื่องหมาย

— Roy

@ Roy - นั่นเป็นสถานการณ์ที่แตกต่างกัน ดูL.Tooltip หากคุณต้องการให้ป้ายกำกับ (คำแนะนำเครื่องมือ) ปรากฏขึ้นเสมอคุณตั้งค่าตัวเลือกถาวรเป็นจริง

— ToolmakerSteve

16

การปรับปรุงสำหรับใบปลิว 1.0:ในฐานะของแผ่นปลิว 1.0 ปลั๊กอิน Leaflet.labelเป็น depracated L.Tooltipขณะที่มันได้รับการรวมกับแกนใบปลิวเป็น ไม่จำเป็นต้องรวมสคริปต์ต้นฉบับและไวยากรณ์มีการเปลี่ยนแปลงเล็กน้อย ตัวอย่างการใช้งาน:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

CSS สไตล์อาจนำไปใช้กับชั้นเรียนเช่นเดียวกับก่อน

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

นอกจากนี้ยังปรากฏว่าความทึบของตัวทำเครื่องหมายอาจตั้งเป็น 0 อย่างสมบูรณ์

Before Leaflet 1.0: ใช้ปลั๊กอิน Leaflet.label (กล่าวถึงแล้วโดย geomajor56)

<script src="scripts/leaflet.label.js"></script>

ด้วยปลั๊กอิน Leaflet Label ฉลากจะเชื่อมโยงโดยตรงกับเครื่องหมาย แต่คุณสามารถตั้งค่าความทึบของเครื่องหมายได้เกือบเป็นศูนย์ดังนั้นจะเห็นเฉพาะป้ายกำกับเท่านั้น (หากคุณตั้งค่าความทึบของเครื่องหมายเป็น 0 ป้ายกำกับที่เกี่ยวข้องจะหายไปเช่นกัน)

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

จากนั้นคุณสามารถใช้ CSS เพื่อจัดรูปแบบป้ายผนึกตามที่เห็นสมควร:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

— James Lawruk
แหล่งที่มา

— Marcin Kosiński

@ MarcinKosiński - ใช่คุณจะต้องดาวน์โหลด leaflet.label.js จากลิงก์ GitHub ในโพสต์และวางไว้ในโฟลเดอร์ย่อยของเว็บไซต์ชื่อสคริปต์ของคุณ หรือคุณสามารถแทนที่ URL ในรหัสด้วยไฟล์ที่โฮสต์ที่leaflet.github.io/Leaflet.label/leaflet.label.js (คุณอาจต้องการไฟล์ CSS ชื่อและที่ตั้งเดียวกันส่วนขยายต่างกัน)

— KeithS

ฉันพยายามทำเช่นนี้ ,, ความคิดใด ๆ วิธีลบพื้นหลังและเส้นขอบ? snag.gy/JdnpyV.jpg

— WantIt

เมื่อใช้L.Tooltipภายใน onEachFeature ได้รับข้อผิดพลาด: "Uncaught TypeError: ล้มเหลวในการเรียกใช้ 'appendChild' บน 'Node': พารามิเตอร์ 1 ไม่ใช่ประเภท 'Node'

— Nikhil VJ

แก้ไขแล้วฉันกำลังใช้คุณสมบัติของคุณสมบัติอย่างใดอย่างหนึ่งเป็นข้อความต้องต่อท้าย.toString()ในตอนท้าย marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— Nikhil VJ

4

คุณสามารถเริ่มต้นที่นี่ด้วยปลั๊กอินแผ่นพับนี้ อาจสร้างหรือแก้ไขเครื่องหมายตามความต้องการของคุณ ข้อความมาจากคุณลักษณะของคุณลักษณะหรือไม่

— geomajor56
แหล่งที่มา

คำถามนี้ตอบคำถามที่แตกต่างจากที่ถาม นี่คือวิธีการเพิ่มป้ายกำกับให้เครื่องหมายที่มีอยู่ ; มันไม่ได้เป็นคำอธิบายเกี่ยวกับวิธีการมีเพียงป้ายกำกับ - ไม่มีสัญลักษณ์เครื่องหมาย

— ToolmakerSteve

0

marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

มันใช้งานได้สำหรับฉัน

— Sathish Kumar Arunachalam
แหล่งที่มา

คำถามนี้ตอบคำถามที่แตกต่างจากที่ถาม นี่คือวิธีการเพิ่มป้ายกำกับให้เครื่องหมายที่มีอยู่ ; มันไม่ได้เป็นคำอธิบายเกี่ยวกับวิธีการมีเพียงป้ายกำกับ - ไม่มีสัญลักษณ์เครื่องหมาย

— ToolmakerSteve