1. 程式人生 > >openlayers5實戰--踩坑總結

openlayers5實戰--踩坑總結

1.介面返回圓心座標和半徑,直接通過new Circle(center,radius)新增圓形feature變小問題。

  解決辦法:

  new  Feature()的geometry引數不能直接賦值new  Circel()得到的geometry,

  要通過‘ol/geom/Polygon.js’中的fromCircle方法將new  Circel()得到的geometry轉化一遍然後賦值給new  Feature()的geometry。

  另:如果介面直接返回的座標點畫圓,則使用‘ol/geom/Polygon.js’中的circular方法。

import {circular as circularPolygon, fromCircle as fromCirclePolygon} from CC;
eg1:
let lng = parseFloat(d[0].lng); let lat = parseFloat(d[0].lat); let radius = parseFloat(d[0].radius); let circle = new Circle(transform([lng, lat], 'EPSG:4326', 'EPSG:3857'), radius);
feature = new Feature({
   position: transform([lng, lat], 'EPSG:4326', 'EPSG:3857'),
   radius: radius,
   type: 'circle',
   id: 'N',
   geometry: fromCirclePolygon(circle)
})

eg2:
let lng = item.coordinateList[0].lng;
let lat = item.coordinateList[0].lat;
let radius = item.coordinateList[0].radius;
let circle4326 = circularPolygon([lng, lat],radius,64);
let circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857');
feature = new Feature(circle3857);


  

2.測距不准問題。

  解決辦法:

  使用'ol/sphere.js'中的getLength()方法計算。

  

/*格式化測量長度
       *@params line:  type geometry
       */
      formatLength (line) {
        //定義長度變數
        let length = getLength(line);
        let output;
        if (length > 100) {
          output = `${(Math.round(length / 1000 * 100) / 100)} 公里`;
        } else {
          output = `${(Math.round(length * 100) / 100)} 米`;
        }
        return output;
      },