back | source
การสร้างวัตถุุ Geometries มีอยู่ 3 แบบ ดังนี้
  1. การวาดเส้น
    var geom1 = new longdo.Polyline([
      { lon: -45, lat: -45 },
      { lon: 105, lat: 15 }
    ]);
    map.Overlays.add(geom1);
    คำอธิบาย
    • Polyline() คือ คำสั่งที่ใช้สำหรับการสร้างวัตถุเส้นตรง โดยรับค่าเป็น Array ของพิกัดบนเส้น
    ตัวอย่าง
  2. การรวาดรูปหลายเหลี่ยม
    var geom2 = new longdo.Polygon([
      { lon: 99, lat: 14 },
      { lon: 100, lat: 13 },
      { lon: 102, lat: 13 },
      { lon: 103, lat: 14 }
    ], {
      title: 'Geom 2',
      detail: '-',
      label: 'Trapezoid'
    });
    คำอธิบาย
    • Polygon() คือ คำสั่งที่ใช้สำหรับการสร้างวัตถุทรงเหลี่ยม โดยรับค่าเป็น Array ของจพิกัดแต่ละมุม
    • title คือ ข้อความที่แสดงในส่วนหัวข้อใน Popup
    • detail คือ ข้อความที่แสดงรายละเอียดต่างๆ ใน Popup
    • label คือ ข้อความที่แสดงบนแผนที่
    ตัวอย่าง
  3. การวาดวงกลม
    var geom3 = new longdo.Circle({
      lon: 101, lat: 15
    }, 1, {
      title: 'Geom 3',
      detail: '-',
      lineWidth: 10,
      lineColor: 'rgba(0, 255, 0, 0.8)',
      fillColor: 'rgba(0, 255, 0, 0.4)',
      visibleRange: { min: 7, max: 8 },
      editable: true
    });
    คำอธิบาย
    • Circle() คือ คำสั่งที่ใช้สำหรับการสร้างวงกลม โดยรับค่าจุดศูนย์กลาง รัศมี
    • lineWidth คือ ขนาดของเส้น
    • lineColor คือ สีของเส้น
    • fillColor คือ สีของพื้นที่ด้านใน
    • visibleRange คือ ระยะการ zoom ที่สามารถมองเห็นวัตถุนี้ได้
    • editable คือ กำหนดให้แก้ไข geometry ได้
    ตัวอย่าง
  4. การวาดเส้นโค้ง
    var geom4 = new longdo.Polycurve([
      { lon: 98, lat: 15 },
      { lon: 99, lat: 16 },
      { lon: 99, lat: 14 },
      { lon: 100, lat: 15 }
    ], {
      weight: longdo.OverlayWeight.Top
    });
    คำอธิบาย
    • Polycurve() คือ คำสั่งที่ใช้สำหรับการสร้างวัตถุเส้นโค้ง โดยรับค่าเป็น Array ของจุดควบคุมแบบ Cubic bezier
    • weight หากระบุเป็น longdo.OverlayWeight.Top วัตถุที่วาดจะอยู่บนสุดเสมอ
    ตัวอย่าง
  5. การวาดจุด
    var geom5 = new longdo.Dot({
      lon: 100.5, lat: 12.5
    }, {
      lineWidth: 20,
      draggable: true
    });
    คำอธิบาย
    • Dot() คือ คำสั่งที่ใช้สำหรับการสร้างจุด โดยรับค่าพิกัดของจุด
    • lineWidth คือ ขนาดของจุด
    • draggable คือ กำหนดให้ลากได้
    ตัวอย่าง
  6. การวาดเส้นประ
    var geom6 = new longdo.Polyline([
      { lon: 100.9, lat: 16.3 },
      { lon: 102.7, lat: 15.2 },
      { lon: 104, lat: 17 }
    ], {
      lineStyle: longdo.LineStyle.Dashed,
      pointer: true
    });
    คำอธิบาย
    • lineStyle หากกำหนดเป็น longdo.LineStyle.Dashed จะหมาถถึงเส้นประ
    • pointer คือ ให้แสดงจุดเมื่อชี้ที่เส้น สามารถลากได้
    ตัวอย่าง
  7. การวาดรูปหลายเหลี่ยมแบบมีรู
    var geom7 = new longdo.Polygon([
      { lon: 101, lat: 15 },
      { lon: 105, lat: 15 },
      { lon: 103, lat: 12 },
      null,
      { lon: 103, lat: 14.9 },
      { lon: 102.1, lat: 13.5 },
      { lon: 103.9, lat: 13.5 }
    ], {
      label: true,
      clickable: true
    });
    คำอธิบาย
    • จุดมุมของขอบด้านนอกจะต้องเรียงตามเข็มนาฬิกา และจุดมุมของขอบด้านในจะต้องเรียงทวนเข็มนาฬิกา โดยใช้ค่า null คั่นเมื่อต้องการเริ่มขอบใหม่
    • label หากกำหนดเป็น true จะแสดงขนาด/ ความยาวบนแผนที่
    • clickable คือ ให้มี api ส่ง event ออกมาเมื่อถูกกด
    ตัวอย่าง
  8. การลบวัตถุ Geometries
    map.Overlays.remove(geom1);
    คำอธิบาย
    • remove() คือ การลบวัตถุ Geometry ออกจากแผนที่
    ตัวอย่าง
^top