leaflet使用turfjs插件，基于格点数据绘制等值线效果

Posted 2022-01-09 JackGIS

Turf.js官网地址：http://turfjs.org/

案例1：

本案例，是根据模型生成的格点数据（格点是101*101的），生成等值线，并在地图上绘制出等值线的过程。

createFlexGeojson:function(arr)
      
        if (this.flexpartlayer)
        
          if (map.hasLayer(this.flexpartlayer))
          
            map.removeLayer(this.flexpartlayer);
          
        
        //如果没有扩散数据，则直接退出
        if(arr==null||arr.length<=0)
        
          return ;
        
        //1、获取模拟区域网格中心点数组pointArr
        let pointArr=[];
        for(let i=0;i<this.rows;i++)
        
          for(let j=0;j<this.cols;j++)
          
            //if(arr[i][j]==0) continue;0值不能去掉，去掉之后等值线绘制会有bug。等值线的绘制，必须在网格数据基础上才行
            let obj=
              "type": "Feature",
              "properties": "value": 0,
              "geometry": 
                "type": "Point",
                "coordinates": null
            
            obj.properties="value": arr[i][j];//网格中心点数值
            obj.geometry.coordinates=this.getGridCenterCoordinates(i,j);//网格中心点坐标
            pointArr.push(obj);
          
        
        //console.log(pointArr);

        //2、将中心点数组pointArr，组装成featureCollection
        var grid_points = turf.featureCollection(pointArr);
        //console.log(grid_points);

        //3、等值线绘制参数配置
        var isobands_options = 
          zProperty: "value",
          commonProperties: 
            "fill-opacity": 0.8
          ,
          breaksProperties: [
            fill: "#009900",
            fill: "#66C200",
            fill: "#99D600",
            fill: "#CCEB00",
            fill: "#FFCC00",
            fill: "#FF9900",
            fill: "#FF5000",
            fill: "#FF0000"
          ]
        ;
        //4、进行等值线绘制
        var isobands = turf.isobands(
          grid_points,
          //颜色是8个，数据值数组就要9个，比如：[0.1,10,100,1000,10000,100000,1000000,10000000,100000000]
          this.indexArr[this.indexId].turfIntervalArr,
          isobands_options
        );
        //console.log(isobands);

        //5、把turf的FeatureCollection转换成leaflet的feature数组
        let geoArr=isobands.features;
        //console.log(geoArr);

        //6、geoArr在map上绘制
        this.flexpartlayer = L.geoJson(geoArr, style: this.getFlexStyle);
        map.addLayer(this.flexpartlayer);
      ,
      //获取模拟区域每个网格的中心点坐标
      getGridCenterCoordinates:function(i,j)
        let min_lat=this.imageBounds[0][0];
        let min_lon=this.imageBounds[0][1];

        let var_lat=this.factoryArr[this.factorySelectedXh].stepLat;
        let var_lon=this.factoryArr[this.factorySelectedXh].stepLon;

        let minx=min_lon+var_lon*j;
        let miny=min_lat+var_lat*i;
        let maxx=min_lon+var_lon*(j+1);
        let maxy=min_lat+var_lat*(i+1);

        return [(minx+maxx)/2,(miny+maxy)/2];//geojson的格式就是[lon,lat]
      ,
      getFlexStyle:function(feature)
      
        //let alpha=feature.properties.value===0?0:0.8;

        return 
          weight: 1,
          opacity: 0,
          color: \'#fff\',
          fillOpacity: 0.8,
          fillColor: feature.properties.fill
      ,

 

 

如果是根据离散的点来生成差值图，则先需要将离散点进行差值，生成差值后的格点数据。然后参考上面实例绘制等值线效果。

可能会用到下面代码：

// 创建等值线区域
var pointGrid = turf.pointGrid(extent, cellWidth, units: \'miles\' );
//基于格点绘制等值区域,并为区域配置颜色
var lines = turf.isolines(pointGrid, breaks, zProperty: \'temperature\' );

//插值生成格点数据
turf.interpolate()
///基于格点绘制等值区域
turf.isobands()
//利用边界裁剪区域
turf.intersect()