185  
查询码:00000269
openlayers4 绘制圆形
作者: 可威 于 2021年11月30日 发布在分类 / 人防组 / 人防前端 下,并于 2021年12月07日 编辑

    1.添加用来存放图形的图层。

     _this.drawSource =   new ol. source. Vector({
        //绘制层
        wrapX : false,
      })
      _this. drawVector = new ol. layer. Vector({
        source : _this. drawSource,
        zIndex : 7998,
      });



      _this. map = new ol. Map({
        target : "mapCon",
        logo : false, //隐藏左下角
        layers : [ _this. untiled, _this. drawVector, _this. drawLayer],


    2.方法体


         /**
         *  coordinate : 中心点经纬度
         *  data : 需要携带的数据
         *  radius : 半径 单位米
         *  id : 唯一id ,用于删除图形等操作
         *  type : 用于在绘制完成后是否回调 drawSuccess、
         *  zIndex :显示层级
         *  showLabel : 是否显示中心半径文字
         *  fillColor :填充颜色
         *  strokeColor :边框颜色
         */
        addCircle : ( coordinate, data, radius, id, type , zIndex , showLabel , fillColor , strokeColor ) =>
          _this. addCircle( coordinate, data, radius, id, type , zIndex , showLabel , fillColor , strokeColor ),



//绘圆
    addCircle( coordinate, data = {}, radius = 300, id = "", type = 1 , zIndex = 1 , showLabel = true , fillColor = 'rgba(252, 144, 37, 0.7)', strokeColor = '#FD8E1F' ) {
      const _this = this;
      //先清空再绘制
      _this. clearDrawPolygon([ id]);
      
       //获取在地图上的随影单位,使图形能成功绘制并且呈圆形
      let metersPerUnit = _this. map
        . getView()
        . getProjection()
        . getMetersPerUnit();
      let circleRadius = radius / metersPerUnit;
     
      let polygon = new ol. geom. Polygon. fromCircle( new ol. geom. Circle( coordinate, circleRadius));

      let Circle = new ol. Feature({
        geometry : polygon,
        data : data,
      });
     
      // 第二种精确绘制方式,呈椭圆
      // let circular = new ol.geom.Polygon.circular(new ol.Sphere(6378137),coordinate,radius,64)
      // let Circle = new ol.Feature({
      //   geometry: circular,
      //   data: data,
      // });
      //设置id,用于后面删除编辑等操作
      Circle. setId( id);

      Circle. setStyle(
        new ol. style. Style({
          //填充色
          fill : new ol. style. Fill({
            color : fillColor,
          }),
          //边线颜色
          stroke : new ol. style. Stroke({
            color : strokeColor,
            width : 2,
            lineDash : [ 1, 2, 3, 4, 5],
          }),
          image : new ol. style. Circle({
            radius : 7,
            fill : new ol. style. Fill({
              color : "#ffcc33",
            }),
          }),
          //形状
          text : new ol. style. Text({
            font : "15px Microsoft YaHei",
            text : showLabel ? ( "半径:" + radius + "m") : '',
            fill : new ol. style. Fill({
              color : "red",
            }),
            stroke : new ol. style. Stroke({
              color : "#8B94F2",
              lineCap : "butt",
              width : 1,
            }),
          }),
          zIndex : zIndex
        })
      );
      //将图形添加到绘制层中
      _this. drawSource. addFeature( Circle);
      _this. drawVector. getSource(). changed(); }

    3.使用方法

      //this.map.addCircle([117,34],{},500,'idididididi', 2 , 5 , true);

      this.map.addCircle(trapeze, {}, radius, id, 2, 5, true);

      



 推荐知识

 历史版本

修改日期 修改人 备注
2021-12-07 11:03:09[当前版本] 可威 格式调整
2021-12-07 11:02:19 可威 格式调整
2021-11-30 17:05:26 可威 格式调整
2021-11-30 17:00:01 可威 创建版本

 附件

附件类型

PNGPNG

  目录
    知识分享平台 -V 4.8.7 -wcp