zoukankan      html  css  js  c++  java
  • GEOJSON 的渲染实例

     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';
             },
  • 相关阅读:
    基于easyUI实现权限管理系统(一)一—组织结构树图形
    基于jquery实现图片拖动和曲线拖放
    SOLID原则
    架构设计-C4
    中台战略
    DDD
    GraphQL
    kafka笔记
    maven
    GIT
  • 原文地址:https://www.cnblogs.com/tiandi/p/13209536.html
Copyright © 2011-2022 走看看