วิธีติดป้ายกำกับรูปหลายเหลี่ยม GeoJSON

ฉันกำลังใช้ Leaflet รวมกับคุณสมบัติ GeoJSON มีวิธีติดป้ายกำกับคุณลักษณะ GeoJSON (ในกรณีนี้คือรูปหลายเหลี่ยม) หรือไม่ ควรได้รับฉลากจาก

feature.properties.name 

นี่คือรหัสของฉันที่ฉันคิดว่าฉันสามารถแทรกป้ายกำกับ:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }

คุณจำเป็นต้องรู้แผ่นพับรูปแบบที่คาดว่าจะใช้ RFM ตัวอย่าง: OpenLayers คาดหวังรูปแบบ GeoJSON นี้เพื่อสร้างจุดและกำหนดแอตทริบิวต์ที่กำหนดเอง:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "name":"TRON-02",
                "serial":"TRON002",
                "bearing":0,
                "color":"green",
                "size":15,
                "image":"img/unit_map3.png",
            },
            "geometry":{
                "type":"Point",
                "coordinates":[-50.06542968749966,-23.749149728383717]
            }
        }
    ]
}

อย่างที่คุณเห็นฉันได้สร้างรูปทรงเรขาคณิต (จุด) และเข้าร่วมคุณลักษณะของฉัน เมื่อฉันส่งสิ่งนี้ไปยัง OpenLayers ผลลัพธ์จะสอดคล้องกับตัวอย่างของ @ Aragon โดยใช้ "color" และ "name" (เป็นป้ายกำกับ) เพื่อกำหนดจุดในแผนที่เอง

โปรดคัดลอกและวางตัวอย่าง GeoJSON นี้ในhttp://json.parser.online.fr/หรือใช้ไซต์เพื่อลองและตรวจสอบความถูกต้องของคุณเอง

นี่คือวิธีที่ฉันแก้ไขมันด้วย Leaflet Polygons และ Labels เพื่อให้คุณได้รับฉลากลอยบนรูปหลายเหลี่ยมที่มีคุณสมบัติชื่อ

สมมติ:

• คุณได้รับการตอบสนอง json แยกวิเคราะห์เป็นตัวแปร json
• มีรูปหลายเหลี่ยมแบบง่ายเท่านั้นที่ไม่มีรูในรูปแบบ json
• polygon_style มีตัวเลือกสไตล์ที่ส่งคืนโดยฟังก์ชันสไตล์ของคุณ
• labels_layer เป็นแผ่นพับ Layergroup (หรือแผนที่ของคุณโดยตรง)

แล้ว:

for ( var i=0; i < json.features.length; i++ ) {
    feat = json.features[i];
    coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];
        point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    labels_layer.addLayer(L.polygon( coords, polygon_style ).bindLabel(feat.properties.name))  ;
}

แปลกมากพอ GeoJson (จริง ๆ คือ EPSG: 4326) และพิกัดของแผ่นพับจะถูกสลับตามลำดับ

ฉันคิดว่าคำถามนี้เกี่ยวกับ openlayers.if ดังนั้นคุณสามารถใช้สำหรับการติดฉลาก;

var style = new OpenLayers.Style({
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7,
    fillColor: "${getColor}",  
    label: "${getLabel}"
  } , {
    context: {
      getColor: function(feature) {
        return feature.properties.color;
      },
      getLabel: function(feature) {
        return feature.properties.name;
      }
    }
  );

ฉันหวังว่ามันจะช่วยคุณ ...