等值分析+四至内散点+请求后台服务（前端ol3展示部分）

瞎折腾。蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦蹦无聊

1：ol图层添加

    /**
     * 初始化添加绘制图层信息
     */
    Ios.prototype.addVectorLayer = function(){
        console.info("图层个数--1--addVectorLayer--"+prop.map.getLayers().getLength());
        prop.isoLayer = new ol.layer.Vector({
            className:prop.className,
            source: new ol.source.Vector(),
            zIndex:prop.that.getMaxZindex(),
            style: prop.that.getIosStyle()
        });
        prop.map.addLayer(prop.isoLayer);
        console.info("图层个数--2--addVectorLayer--"+prop.map.getLayers().getLength());
    }
    /**
     * 循环所有图层获取最大的ZIndex
     */
    Ios.prototype.getMaxZindex = function(){
      var layers = prop.map.getLayers();
      var zindex = 0;
      layers.forEach(function(item,i){
        if(item.getZIndex() > zindex){
          zindex = item.getZindex;
        }
      });
      if(zindex == 0)
        console.warn("error  zindex = 0");
      return zindex++;
    }
    /**
     * 销毁图层
     */
    Ios.prototype.destroy = function(){
        prop.map.removeLayer(prop.isoLayer);
    }

2：四至内散点计算

        if("line,area".indexOf(opt.type) == -1){
            console.info("类型只能是line/area");
            opt.type = "area";
        }
        prop.iosType = opt.type;//根据类型获取展示方式
        //请求生成等值分析
        var box = "113.751709,36.9683570,114.622817,37.3623799";
        var boxArr = box.split(",");
        var values= "";
        for(var i = 0 ; i < prop.colors.length ; i++){
            values += prop.colors[i].value;
            if(i < prop.colors.length-1){
                values += ",";
            }
        }
        // 添加散点数据图层
        if(!prop.pVector){
            prop.pVector = new ol.layer.Vector({
                source: new ol.source.Vector(),
                zIndex:prop.that.getMaxZindex()
            });
            prop.map.addLayer(prop.pVector);
        }else{
            prop.pVector.getSource().clear();
        }
        //生成随机数
        var x = "";
        var y="";
        var vz="";
        var size = 300;
        var rx = 0;
        var ry = 0;
        var rv = 0;
        for(var i = 0 ; i < size ; i++ ){
            rx = parseFloat(boxArr[0]) + Math.random() * (parseFloat(boxArr[2]) - parseFloat(boxArr[0]));
            ry = parseFloat(boxArr[1]) + Math.random() * (parseFloat(boxArr[3]) - parseFloat(boxArr[1]));
            rv = parseInt(Math.random()*10)*10 + parseInt(Math.random()*10);
            //添加散点到图层
            prop.pVector.getSource().addFeature(new ol.Feature({ geometry: new ol.geom.Point([rx, ry]),zv:rv}));
            x += rx;
            y += ry;
            vz+= rv;
            if(i != size - 1){
                x +=  ","
                y += ","
                vz += ","
            }
        }

3：请求后台获取数据

        var clip = "sld/hbs_xt.shp"; // .shp就是读取文件 qg.shp 全国  数据就是后台会分成多边形数据 x,y,x,y  hbs_xt.shp 河北邢台
        $.ajax({
            type:"POST",
            url:"/gis-server/GeoControl/ios",
            contentType:"application/json", //发送信息至服务器时内容编码类型。
            dataType:"json", // 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。
            data:JSON.stringify({type:2,lons:x,lats:y,vzs:vz,value:values,box:box,clip:clip,cclip:"0"}),// cclip 是否裁剪 0不 1是
            success:function(result){
                if(result.state != 1){
                    alert(result.info);
                    return;
                }
                prop.isoLayer.getSource().clear();
                if(result.obj){
                    var features = (new ol.format.GeoJSON()).readFeatures(result.obj);
                    prop.isoLayer.getSource().addFeatures(features);
                }else{
                    alert("图形数据获取失败");
                }
            }
        });

4：图层样式配置

    /**
     * 根据类型获取到当前图层的样式
     * line 等值线
     * area 等值面
     */
    Ios.prototype.getIosStyle = function(){
        return function (feature, resolution) {
            var zv = feature.get("zv");
            var color = "0.3,0,0,0";//没有配置颜色就是 白色透明度0.3
            var colors = prop.colors;
            for(var i = 0 ; i < colors.length-1 ; i++){
                if(zv>= colors[i].value && zv <= colors[i+1].value){
                    color = colors[i].color;
                }
            }
            if(prop.iosType == "line"){
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: "rgba(" + color + ")",
                        width: 3
                    }),
                });
            }else{
                return new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: "rgba(" + color + ")"
                    })
                });
            }
        }
    }