วิธีสร้างรูปหลายเหลี่ยมแบบวงกลมใน openlayers 3


10

ดังนั้นฉันอยากจะแก้ไขตัวอย่างนี้: http://openlayers.org/en/v3.0.0/examples/tissot.html?q=circle

ปัญหาคือเมื่อฉันพยายามใช้กับแผนที่ของฉันมันไม่ทำงานอาจเป็นเพราะฉันใช้สไตล์ OSM ซึ่งไม่เป็นทรงกลม:

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
    new ol.layer.Vector({
      source: vectorSource
    })
  ],
  renderer: 'canvas',
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
    zoom: 2
  })
});

และสำหรับคำถาม: จะสร้างรูปหลายเหลี่ยมแบบวงกลมได้อย่างไร อย่างที่ฉันเห็นมีสองทางเลือก:

  1. อย่างใดแปลง geom.Circle ใน geom.Polygon ซึ่งฉันไม่สามารถทำได้ขึ้นอยู่กับระดับ noob ของฉัน

  2. สร้างฟังก์ชั่นของตัวเองเพื่อทำสิ่งนั้นเช่น openlayers 2:

    OpenLayers.Geometry.Polygon.createRegularPolygon = ฟังก์ชั่น (แหล่งกำเนิดรัศมีด้านข้างการหมุน) {
    มุม var = Math.PI * ((1 / ด้าน) - (1/2)); ถ้า (การหมุน) {มุม + = (การหมุน / 180) * Math.PI; } var rotatedAngle, x, y; คะแนน var = []; สำหรับ (var i = 0; i

มีใครไปถึงจุดเดียวกันในชีวิตต้นแบบ GIS ของพวกเขา? อันไหนดีกว่า? หรือมีเส้นทางซ่อนเร้นที่มีเพียงคนที่ฉลาดและแข็งแกร่งเท่านั้นที่สามารถมองเห็น? ช่วยฉันด้วย!

คำตอบ:


13

ในขณะที่คนอื่นชี้ให้เห็นอย่างถูกต้องรูปแบบ GeoJSON และ WKT ไม่รองรับรูปทรงวงกลม แวดวงไม่ได้อยู่ในข้อมูลจำเพาะ KML เช่นกัน สิ่งนี้ทำให้เกิดความเจ็บปวดเมื่อพยายามเขียนกรอบแผนที่ไปยัง KML, GeoJSON หรือ WKT

OpenLayers v3 มีวิธีประมาณวงกลมที่มีรูปหลายเหลี่ยม แต่มันไม่สวยเท่าที่มันจะเกี่ยวข้องกับการแปลงเป็นระยะทางวงกลมที่ยอดเยี่ยม ดูการอ้างอิง API สำหรับol.geom.Polygon.circularวิธีการได้ที่นี่: http://openlayers.org/en/v3.5.0/apidoc/ol.geom.Polygon.html#circular

ตัวอย่างของol.geom.Polygon.circularวิธีการแสดงอยู่ด้านล่าง แต่ยังสามารถเห็นได้ในนี้OpenLayers Tissot ตัวอย่าง

 var lowpoly = ol.geom.Polygon.circular(
  /* WGS84 Sphere */
  new ol.Sphere(6378137),
  circle.getCenter(),
  circle.getRadius(),
  /* Number of verticies */
  12);

หรือมิฉะนั้นคุณสามารถใช้fromCircleว่าตอนใดที่โพสต์นี้เป็นช่วงทดลอง

var lowpoly = ol.geom.Polygon.fromCircle(
  circle,
  /* Number of verticies (optional) */
  12,
  /* Start angle (optional) */
  90
);

สำหรับสิ่งที่คุณสามารถเล่นกับดู jsFiddle ของฉันที่นี่: https://jsfiddle.net/a1syw4od/9/


ฉันจะเสนอแก้ไข แต่บางทีมันอาจจะง่ายขึ้นถ้าคุณแก้ไขได้: ตัวอย่างสุดท้ายควรใช้มากกว่าol.geom.Polygon.fromCircle ol.geom.Polygon.circularไชโย!
Arjan

0

หากคุณสนใจที่จะสร้างรูปหลายเหลี่ยมวงกลมอย่างง่ายให้ใช้:

new ol.geom.Circle(
            ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'),
            radius_meters),
            'XY'
        )

แหล่งที่มา: http://openlayers.org/en/v3.0.0/apidoc/ol.geom.Circle.html (ลบเครื่องหมายถูกที่ด้านบนของหน้า)


สิ่งนี้ถูกต้อง แต่ปัจจุบันมีปัญหาหากคุณตั้งใจจะลองและแปลงเป็น GeoJSON ดูgithub.com/openlayers/ol3/pull/3237#issuecomment-78475413
Darren Reid

เมื่อคุณพยายามที่จะแยกรูปทรงเรขาคณิตใน wkt โดยใช้ writeWKT
Suraj

1
ol.geom.Circleไม่ใช่รูปหลายเหลี่ยมมันเป็นรูปทรงเรขาคณิตที่เรียบง่ายที่แสดงโดยรัศมีและกึ่งกลาง (ดูชั้นฐานของการol.geom.Circleเป็นol.geom.SimpleGeometryไม่ได้ol.geom.Polygon) GeoJSON, WKT และ KML ไม่ได้มีรูปทรงเรขาคณิตวงกลมในสเปคของพวกเขาและต้องแปลงก่อนการจัดรูปแบบ โปรดดูคำตอบของฉันสำหรับวิธีการประมาณol.geom.Circleโดยรูปหลายเหลี่ยมที่แท้จริง
nagytech
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.