GEOJSON 的渲染实例

Posted 2020-12-13 JackGIS

 

 

 createGeojson:function(arr) 
        {
         let geoArr=[];
         for(let i=0;i<arr.length;i++)
         {
           let obj={
             "type": "Feature",
             "properties": {"value": -999},
             "geometry": {
             "type": "Polygon",
               "coordinates": null}
           }
           if(arr[i].value==0)
           {
             arr[i].value=-999;
           }
           obj.properties={"value": arr[i].value};
           obj.geometry.coordinates=this.getGeometry(arr[i].lon,arr[i].lat);
           geoArr.push(obj);
         }
         console.log(geoArr)
         
          if (this.flexpartlayer) 
          {
             if (this.map.hasLayer(this.flexpartlayer))
             {
               this.map.removeLayer(this.flexpartlayer);
             }
           }
         this.flexpartlayer = L.geoJson(geoArr, {style: this.style});
         this.map.addLayer(this.flexpartlayer);

            // this.timer = setTimeout(function(){
            //     _self.clearFlexLayer();
            // },10000)
        },
        clearFlexLayer:function()
        {
            if (this.flexpartlayer)
            {
                if (this.map.hasLayer(this.flexpartlayer))
                {
                    this.map.removeLayer(this.flexpartlayer);
                }
            }
            _self.flexTxt="";
        },
           //生成格点polygon
        getGeometry:function(lon,lat){
         //数据精度是0.003，300米
         let minx=lon-0.0015;
         let miny=lat-0.0015;
         let maxx=lon+0.0015;
         let maxy=lat+0.0015;
         return [[
           [minx, miny],
           [maxx, miny],
           [maxx, maxy],
           [minx, maxy],
           [minx, miny]
         ]];
 
        },
            //polygon的样式
        style:function(feature) 
        {
         let alpha=feature.properties.value===-999?0:0.8;
 
         return {
           weight: 1,
           opacity: 0,
           color: ‘#fff‘,
           fillOpacity: alpha,
           fillColor: this.getColor(feature.properties.value)}
        },
            //polygon填充的颜色
        getColor:function(d) {
           return d > Math.pow(10,-9) ?  ‘#C5004A‘ :
                  d > Math.pow(10,-10)  ? ‘#DC4A1C‘ :
                  d > Math.pow(10,-11)  ? ‘#FEBA00‘ :
                  d > Math.pow(10,-12)  ? ‘#FFFF00‘ :
                  d > Math.pow(10,-13)   ? ‘#00EA00‘ :
                  d > Math.pow(10,-14)   ? ‘#0CEFA6‘ :
                  d > Math.pow(10,-15)   ? ‘#25C7CD‘ :
                             ‘#259ECD‘;
         },