Question

使用产品：iserver 11i， iclient for leaflet 操作系统：win10x64 数据类型： postgre sql 问题详细描述：1、自定义一个动态绘圆的方法，但是画出来的不是正圆，搜索说可以用polygon绘制，但我不是很明确应该怎么改

代码如下：

draw_Circle() {
      if (this.circleLayer != null) {
        this.map.removeLayer(this.circleLayer)
      }
      this.r = 0;
      this.i = null;
      this.circleLayer = new L.circle();
      this.map.dragging.disable(); // 将mousemove事件移动地图禁用
      this.map.on('mousedown', (e) => {
        this.i = e.latlng
        this.map.on('mousemove', (ev) => {
          this.r = L.latLng(ev.latlng).distanceTo(this.i) // 计算半径
          if (this.i) {
            // 绘制圆心位置与半径
            this.circleLayer.setLatLng(this.i)
            this.circleLayer.setRadius(this.r)
            this.circleLayer.setStyle({color: '#2260b4', fillOpacity: 0.3})
            this.map.addLayer(this.circleLayer)
          }
        })
        this.map.on('mouseup', (ev) => {
          var circle = L.circle(this.i, {radius: this.r, color: '#2260b4', fillOpacity: 0.3})
          this.map.addLayer(this.circleLayer)
          this.map.dragging.enable()
          // this.map.setView(this.i, 13)
          this.i = null
          this.r = 0
          this.map.off('mousedown')
          this.map.off('mouseup')
          this.map.off('mousemove')
        })
      })
    },

2、返回选中圈内的地图上的麻点图层、标注点这些应该用哪个方法查询
问题重现步骤： 1.

Answer 1

你好，1、自定义圆，就是传入对应的中心点位置，比如[34,108],根据中心点和半径，计算圆上坐标点，这是一个基本的数学公式，原理可以了解一下：

https://blog.csdn.net/can3981132/article/details/52559402

示例代码如下，radius就是半径，parts[]圆上所有点集，最后传入坐标传，构造 L.polygon绘图。你可以根据你的代码，将对应参数替换即可。

var radius = 2;
//点集
var parts = [];
//计算圆的边缘所有点
for (var i = 0; i < 360; i++) {
var radians = (i + 1) * Math.PI / 180;
var circlePoint = [Math.cos(radians) * radius + 34, Math.sin(radians) * radius + 108];
parts[i] = circlePoint;
}
var polygon1 = L.polygon(parts, {
color: ‘green’
}).addTo(map);

2、根据代码，在地图事件mousedown中又嵌套了mousemove和mouseup事件，一般不这样使用。如果是要框选返回框中的数据，这边建议是参考官网示例，发布地图或者数据服务，通过几何查询或者范围查询。

https://iclient.supermap.io/examples/leaflet/editor.html#01_mapQueryByGeometry

https://iclient.supermap.io/examples/leaflet/editor.html#01_mapQueryByBounds

Comments

我把radius替换成我的代码里的this.r 但是this.r的值非常大，画出来的圆比地图超出了很多，应该计算的半径有问题，但我的代码里用这个半径L.circle画圆没有问题，应该怎么改

draw_Circle() {
      if (this.circleLayer != null) {
        this.map.removeLayer(this.circleLayer)
      }
      this.r = 0;
      this.i = null;
      this.circleLayer = new L.polygon([]);
      this.map.dragging.disable(); // 将mousemove事件移动地图禁用
      this.map.on('mousedown', (e) => {
        this.i = e.latlng
        this.map.on('mousemove', (ev) => {
          this.r = L.latLng(ev.latlng).distanceTo(this.i) // 计算半径
          if (this.i) {
            var parts = []
            for (var i = 0; i < 360; i++) {
               var radians = (i + 1) * Math.PI / 180;
               var circlePoint = [Math.cos(radians) * this.r + 34, Math.sin(radians) * this.r + 108];
               parts[i] = circlePoint;
            }
            this.circleLayer = L.polygon(parts, {
               color: ‘green’
            })
            this.map.addLayer(this.circleLayer)
          }
        })
        this.map.on('mouseup', (ev) => {
          this.map.dragging.enable()
          // this.map.setView(this.i, 13)
          this.i = null
          this.r = 0
          this.map.off('mousedown')
          this.map.off('mouseup')
          this.map.off('mousemove')
        })
      })
    },

---

在地图事件mousedown中又嵌套了mousemove和mouseup事件，一般不这样使用，建议把mousemove中的代码独立出来，地图事件会自动触发的，看看这样计算得到的半径是否正常。