openlayers点图元渲染及画圆

怼烎@ 2023-07-20 10:32 2阅读 0赞

**下面是openlayers点图元渲染效果图及在4326坐标系中画圆效果图。**  
![26][]  
**因为功能需要所以写的可能有点麻烦，只截取了方法实现的代码。**

// 渲染点图标及画圆
      renderIcon(rows) { 
      	let rows = { };
        rows.centerPoint = "116.64560693, 40.05946214";
        let self = this;
        self.vectorSource = new VectorSource(); // 图元数据源
    
        self.showCircle('文本内容', rows.centerPoint, 1500); //文本内容 中心点坐标 半径
    
        self.vectorLayer = new VectorLayer({ 
          source: self.vectorSource
        });
        self.map.addLayer(self.vectorLayer);  // 将矢量图层添加到地图图层中
      }
    
      // 点图元及覆盖面
      showCircle(name, center, radius) { 
        let personnelImg = require("../assets/icons/pannel.png");  // 引用图片
        let centerPoint = this.transPoint(center);
        // 渲染点
        let personnelLocal = new Feature({ 
          geometry: new Point(centerPoint),
        });
        personnelLocal.setStyle(new Style({   // 设置样式
          image: new Icon({   // 图标
            src: personnelImg,
            // scale:0.3, //图标大小
          }),
          text: new Text({ 
            text: name,  // 文本内容
            font:'bold 16px serif',  // 加粗 字体大小 字体样式
            // offsetX:12,
            offsetY: 15,  // y轴偏移
            fill: new Fill({   // 字体颜色
              color: '#FF6238'
            })
          })
        }));
        this.vectorSource.addFeature(personnelLocal);  // 添加点图元
    
        radius = parseFloat(radius);
        //这里是在4326坐标系上画圆，需要进行转换
        let circleIn3857 = new Circle(transform(centerPoint, 'EPSG:4326', 'EPSG:3857'), radius);
        let circleIn4326 = circleIn3857.transform('EPSG:3857', 'EPSG:4326');
    
        let circleFeature = new Feature({   //添加面
          geometry: circleIn4326,
        });
        circleFeature.setStyle(new Style({   // 设置样式
          fill: new Fill({ 
            color: 'rgba(211, 223, 235, 0.5)'
          }),
          stroke: new Stroke({ 
            color: '#1D70FF'
          })
        }));
        this.vectorSource.addFeature(circleFeature);  // 添加面图元
      }
    
      // 字符串经纬度转换为数组形式
      transPoint(point) { 
        let item = point.split(',')
        item = [parseFloat(item[0]), parseFloat(item[1])]
        return item;
      }

[26]: /images/20230528/acbff1e78bcc4ea2a7c9e7466ee8e61f.png