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;

1

2

3

4

eg1:<br>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);

1

2

3

4

5

6

7

feature = new Feature({

   position: transform([lng, lat], 'EPSG:4326', 'EPSG:3857'),

   radius: radius,

   type: 'circle',

   id: 'N',

   geometry: fromCirclePolygon(circle)

})<br><br>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);

1<br><br>

2.测距不准问题。

　　解决办法：

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/*格式化测量长度

       *@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;

      },

标签: openlayers5、openlayers测距