预览

安装软件（word教程）

1.QGIS

QGIS：主要用于 查看，编辑，导出shp文件；geoJson等文件。并且可转换坐标系。编辑sld样式模板文件（在geoServer中需要使用）。

2.geoServer

geoSverver：主要用于 发布wms，将wms转换成图片，下载geoJson等。数据来源可使用postGreSQL数据库。

3.postGreSQL+PostGIS

PostGIS:将shp文件（地理数据存入数据库）。

制作过程

1.准备wms将wms显示在地图（单表方式）

1.准备图层的shp，dbf等文件，保证文件在同一文件夹下。

2.使用postGIS连接postgresql数据库。

3.配置参数导入数据到数据库

4.创建工作区

5.创建数据存储（数据连接）

6.创建图层（默认单表）

这里是默认单表数据发布。如需要自定义SQL此文档4.准备wms将wms显示在地图（SQL方式）

7.预览图层

8.url说明（重要）

​x
http://localhost:9094/geoserver/demo_test/wms?service=WMS&version=1.1.0&request=GetMap&layers=demo_test:unit_test&bbox=112.07715606689453,29.455129623413086,113.97227478027344,30.566308975219727&width=768&height=450&srs=EPSG:404000&styles=&format=application/openlayers
​
其中layers规则是：工作区:图层名1,工作区:图层名2  
styles=样式名
如果是自定义SQL的图层需要传入参数。列如：在url后加&VIEWPARAMS=pollute:TP;time:2021-01-01

9.创建样式

在图层中->选中目标图层->发布页面->勾选默认样式或其他样式。

10.使用arcGIS for js添加到网页上

xxxxxxxxxx
 //网格的wms配置
   var gridWms={
     url: "/geoserver/jz_water_prod/wms",
       //可多个图层叠加显示，图层名：工作区:图层名
     visibleLayers:  ["jz_water_prod:grid_efdc_hh", "jz_water_prod:grid_efdc_zgq", "jz_water_prod:grid_efdc_zgxgq"],
       //每个layer都要对应样式
     styles: ["jz_water_prod:grid_no_bound", "jz_water_prod:grid_no_bound", "jz_water_prod:grid_no_bound"],
     clickUrl: "/geoserver/jz_water_prod/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+"jz_water_prod:grid_efdc_hh,jz_water_prod:grid_efdc_zgq,jz_water_prod:grid_efdc_zgxgq"+"&maxFeatures=50&outputFormat=application/json&cql_filter=",
     boundUrl: "/geoserver/jz_water_prod/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jz_water_prod%3Agrid_bound&maxFeatures=50&outputFormat=application%2Fjson"
   };
​
addWmsLayer(gridWms.url,{
          "id": "gridWms",
          "visibleLayers": gridWms.visibleLayers,
          "customLayerParameters": {
              "VIEWPARAMS": "pollute:"+currentPollute+";resultTime:"+currentTime,
             "styles": gridWms.styles
          }
      },function(){
              $("#map_gridWms").css("z-index",100);
      },null);

2.给wms添加监听（伪wms）

1.使用QGIS将多个网格（面）合并一个面，并使用QGIS导出geojson

2.使用arcGIS for js添加geojson

xxxxxxxxxx
 //添加网格的范围图层 --方便点击监听
 $.ajax({
    url: gridWms.boundUrl,
    async: false,
    success: function(result) {
      try{
        var symbol = {//符号信息
            "type": "esriSFS",//符号类型，此处为esri简单填充符号
            "style": "esriSFSSolid",//符号样式
            "color": [143,143,143, 100],//符号颜色
            "outline": {//边线信息
                "type": "esriSLS",//边线类型
                "style": "esriSLSSolid",//边线样式
                "color": [200,200,200, 255],//边线颜色
                "width": 1//边线线宽
            }
        };
       addGeoJson("grid", result, symbol,true);//添加GeoJson,第一个参数是图层名称，第二个参数是json文件，第三个参数是符号
      }catch(e){
       console.warn("添加网格的边界错误");
      }
    },
    error: function(msg){
     alert("网格错误");
   }
});

3.给geojson图层添加监听

xxxxxxxxxx
 registerFunction("grid",{
             "click":  function(event){
                        $.ajax({
                            //这里是使用了cql的函数，cql还可以筛选属性，甚至使用 like 关键字可参考sql
                        url: gridWms.clickUrl+"INTERSECTS(geom, SRID=3857;POINT ("+event.mapPoint.x+" "+event.mapPoint.y+"))",
                        async: false,
                        success: function(result) {
                          try{
                              //对于结果可以在geoServer图层中配置返回的那些字段。
                            if(result.features.length>0){
                                  setMapCenterPoint(event.mapPoint.x, event.mapPoint.y,14,event.mapPoint.spatialReference.wkid);
                                var t=result.features[0].properties;
                                 var t1=layerInfo.honghuGrid;
                                 addInfoWindowToMap(event,{title:t.name+t1.title,
                               url:t1.url+"?uniGridId="+t.unigridid+"&pollute="+t1.pollute+"&modelTime="+modelTime},"yes")
    
                            }
                          }catch(e){
                            console.log("网格点击错误");
                          }
                        },
                        error: function(msg) {
                            alert("grid点击错误");
                        }
                    });
             }
           });

3.将wms转换成图片提高播放性能

1.使用java httpClient库编写获取图片的脚本

xxxxxxxxxx
/**
     * 文件下载，这里只给出文件下载的代码。具体业务自己定义，（图片量大建议使用多线程下载）
     参考url：/geoserver/jz_water_prod/wms?service=WMS&version=1.1.0&request=GetMap&layers=jz_water_prod%3Agrid_efdc_zgxgq&bbox=112.22954033953135%2C29.946687506277843%2C112.9286166675758%2C30.394505789912866&width=2304&height=1473&srs=EPSG%3A4326&styles=grid_no_bound&format=image%2Fpng%3B%20mode=8bit&TRANSPARENT=true
     */
    public boolean downIng(String url,String filepath){
        HttpClient client = null;
        InputStream is = null;
        FileOutputStream fileout = null;
        try {
             client = HttpClients.createDefault();
            HttpGet httpget = new HttpGet(url);
            HttpResponse response = client.execute(httpget);
​
            HttpEntity entity = response.getEntity();
             is = entity.getContent();
​
            File file = new File(filepath);
            if(!file.exists()){
                file.createNewFile();
            }else{
                file.delete();
                file.createNewFile();
            }
             fileout = new FileOutputStream(file);
            /**
             * 根据实际运行效果 设置缓冲区大小
             */
            byte[] buffer = new byte[1024];
            int ch = 0;
            while ((ch = is.read(buffer)) != -1) {
                fileout.write(buffer, 0, ch);
            }
        } catch (Exception e) {
           log.error("图片下载错误{}",e);
            return false;
        }finally {
            try {
                if(is != null){
                    is.close();
                }
                if(is != null){
                    fileout.flush();
                }
                if(is != null){
                    fileout.close();
                }
                if(is != null){
                    ((CloseableHttpClient) client).close();
                }
            } catch (IOException e) {
                log.error("关闭流错误",e);
                return false;
            }
        }
        return true;
    }

2.使用arcGIS for js 添加图片

xxxxxxxxxx
//给地图添加图片。其中的经纬度，建议使用geoServer中计算出来的经纬度或者使用预览图层的url中默认的hbox字段 
window.addImageLayer("image1", "/modelImage/hh_images/"+tPollute+"/"+fileName+".png",
     113.22110453384296,29.73790011743104,113.47897545993501, 29.96626061090963, 4326, 1);
//添加缓存，，使用代码加载后续图片，使浏览器缓存后面播放的图片（注：要开启浏览器的缓存否则）。
 var tmpImage = new Image();
tmpDate.setHours(tmpDate.getHours() + 12);
         tmpImage.src = "/modelImage/hh_images/"+tPollute+"/"+dateTimeToString(tmpDate).substring(0,13)+".png";
       

4.准备wms将wms显示在地图（SQL方式）

QGIS基本使用

1.导入图层数据（geojson，shp等格式）

2.合并图层（图层 与 图层的操作）

3.导出图层（转换格式，修改坐标）

4.某一图层修改元素（图层之中的元素操作）如：将多个面合成一个面

5.可视化修改样式，导出sld文件。避免geoserver编写sld 配置代码。

分级渲染

其他常见问题

1.解决wms样式 或者 新图层重新渲染图层 原wms立马消失的问题

xxxxxxxxxx
//解决思路： 添加俩个一样的wms图层。 需要添加新的wms图层后立马给图层添加update-end（数据加载完）监听，加载完之后把原来的wms删掉。
addWmsLayer(gridValueWms.url,{
            "id": "gridTmpWms",
            "visibleLayers": gridValueWms.visibleLayers,
            "customLayerParameters": {
                "VIEWPARAMS": "polluteValue:"+t+";resultTime:"+currentTime,
               "styles": gridValueWms.styles
            }
        },function(){
          var tmpLayer = getLayer("gridTmpWms");
          if(tmpLayer){
            tmpLayer.on('update-end',function(){
            $("#map_gridTmpWms").css("z-index",100);
            currentWmsLayer =  "gridTmpWms";
            removeLayer("gridWms");
            });
          }
        },null);
   }else{
    addWmsLayer(gridValueWms.url,{
            "id": "gridWms",
            "visibleLayers": gridValueWms.visibleLayers,
            "customLayerParameters": {
                "VIEWPARAMS": "polluteValue:"+t+";resultTime:"+currentTime,
               "styles": gridValueWms.styles
            }
        },function(){
          var tmpLayer = getLayer("gridWms");
          if(tmpLayer){
            tmpLayer.on('update-end',function(){
            $("#map_gridWms").css("z-index",100);
            currentWmsLayer =  "gridWms";
            removeLayer("gridTmpWms");
            });
          }
        },null);
   

2.快速生成大量的分级渲染的样式文件

1.使用js生成色带图片，并打印RGB的值**（PS：需要放在nginx下或者tomcat下解决跨域）**

这里提供参考图片

xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>像素操作</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
​
<body>
    <div>
        <!--提供的色带图片-->
    <img id="scream" src="1.png" alt="The Scream" width="1000" height="50">
    </div>
    <!--调整宽度-->
  <canvas width="1000" height="50" id="canvas">
  </canvas>
  
    <div id="show">
    </div>
  <script>
    window.onload = function () {
        let canvas = document.querySelector('#canvas');
        if (!canvas.getContext) return;
        let ctx = canvas.getContext('2d');
        ctx.save();
        var grd=ctx.createLinearGradient(0,0,canvas.width,0);
        //开始自定义色带
        grd.addColorStop(0, 'rgba(113,190,246, 1)');
        grd.addColorStop(0.2, 'rgba(27, 143, 226, 1)');
        grd.addColorStop(0.4, 'rgba(88, 191, 108, 1)');
        grd.addColorStop(0.6, 'rgba(254,197,33, 1)');
        grd.addColorStop(0.8, 'rgba(254, 126, 77, 1)');
        grd.addColorStop(1, 'rgba(246, 97, 77, 1)');
        //结束自定义色带
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fill();
        ctx.restore();
        var img=document.getElementById("scream");
        //这句话:使用参考图片生成色带，并答应RGB值
        ctx.drawImage(img,0,0,canvas.width, canvas.height);
        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // 分段数
        var sub = 100;
        var step = canvas.width / (sub - 1);
        var colors = [];
        var colorStr = [];
        for (var i = 0, len = sub; i < len; i++) {
            var x = Math.round(i * step);
            if (x >= canvas.width) {
                x--;
            }
            let color = getPxColor(imageData, x, 0);
            color[3] = 1;
            colors.push(color);
            colorStr.push(color.join());
            $('#show').append('<div style="width: 50px; height: 10px; background-color:rgba(' + color.join() + ');"><div>');
      }
      
      console.log(colors);
      console.log(colorStr);
      
      function getPxColor(imageData, x, y) {
        let color = [];
        // 有多宽，就是一排有多少个像素点
        let width = imageData.width;
        for (let i = 0; i < imageData.data.length; i++) {
          color[0] = imageData.data[(y * width + x) * 4];
          color[1] = imageData.data[(y * width + x) * 4 + 1];
          color[2] = imageData.data[(y * width + x) * 4 + 2];
          color[3] = imageData.data[(y * width + x) * 4 + 3];
        }
        return color;
      }
    }
  </script>
</body>
​
</html>

2.使用各种语言（提供java脚本）拼接SLD文本格式

xxxxxxxxxx
 static String base1 = "<se:Rule><se:Name>0.0 - 0.0</se:Name>\n" +
            "          <se:Description>\n" +
            "            <se:Title>0.0 - 0.0</se:Title>\n" +
            "          </se:Description>\n" +
            "          <ogc:Filter xmlns:ogc=\"http://www.opengis.net/ogc\">\n" +
            "            <ogc:And>\n" +
            "              <ogc:PropertyIsGreaterThanOrEqualTo>\n" +
            "                <ogc:PropertyName>pollutevalue</ogc:PropertyName>\n" +
            "                <ogc:Literal>";
    static String base2 = "</ogc:Literal>\n" +
            "              </ogc:PropertyIsGreaterThanOrEqualTo>\n" +
            "              <ogc:PropertyIsLessThanOrEqualTo>\n" +
            "                <ogc:PropertyName>pollutevalue</ogc:PropertyName>\n" +
            "                <ogc:Literal>";
    static String base3 = "</ogc:Literal>\n" +
            "              </ogc:PropertyIsLessThanOrEqualTo>\n" +
            "            </ogc:And>\n" +
            "          </ogc:Filter>\n" +
            "          <se:PolygonSymbolizer>\n" +
            "            <se:Fill>\n" +
            "              <se:SvgParameter name=\"fill\">";
    static String base4 = "</se:SvgParameter>\n" +
            "            </se:Fill>\n" +
            "            <se:Stroke>\n" +
            "              <se:SvgParameter name=\"stroke\">";
    static String base5 = "</se:SvgParameter>\n" +
            "              <se:SvgParameter name=\"stroke-width\">1</se:SvgParameter>\n" +
            "              <se:SvgParameter name=\"stroke-linejoin\">bevel</se:SvgParameter>\n" +
            "            </se:Stroke>\n" +
            "          </se:PolygonSymbolizer>\n" +
            "        </se:Rule>";
​
public static void main(String[] args) {
        String[][] re = new String[100][2];
        String[] colors = {"0,0,255,1", "0,8,255,1", "0,17,255,1", "0,25,255,1", "0,42,255,1", "0,50,255,1", "0,65,255,1", "0,75,255,1", "0,84,255,1", "0,92,255,1", "0,100,255,1", "0,109,255,1", "0,125,255,1", "0,134,255,1", "0,143,255,1", "0,159,255,1", "0,167,255,1", "0,176,255,1", "0,184,255,1", "0,192,255,1", "0,209,255,1", "0,217,255,1", "0,227,255,1", "0,242,255,1", "0,251,255,1", "0,255,251,1", "0,255,242,1", "0,255,234,1", "0,255,217,1", "0,255,209,1", "0,255,201,1", "0,255,192,1", "0,255,176,1", "0,255,167,1", "0,255,159,1", "0,255,149,1", "0,255,134,1", "0,255,125,1", "0,255,117,1", "0,255,109,1", "0,255,100,1", "0,255,84,1", "0,255,75,1", "0,255,67,1", "0,255,55,1", "0,255,42,1", "0,255,33,1", "0,255,25,1", "0,255,17,1", "0,255,5,1", "8,255,0,1", "17,255,0,1", "29,255,0,1", "42,255,0,1", "50,255,0,1", "59,255,0,1", "67,255,0,1", "78,255,0,1", "92,255,0,1", "100,255,0,1", "113,255,0,1", "125,255,0,1", "134,255,0,1", "142,255,0,1", "150,255,0,1", "162,255,0,1", "176,255,0,1", "184,255,0,1", "196,255,0,1", "209,255,0,1", "217,255,0,1", "226,255,0,1", "234,255,0,1", "242,255,0,1", "254,252,0,1", "255,242,0,1", "255,234,0,1", "255,217,0,1", "255,209,0,1", "255,201,0,1", "255,192,0,1", "255,184,0,1", "255,169,0,1", "255,159,0,1", "255,150,0,1", "255,142,0,1", "255,125,0,1", "255,117,0,1", "255,109,0,1", "255,100,0,1", "255,86,0,1", "255,75,0,1", "255,67,0,1", "255,59,0,1", "255,50,0,1", "255,33,0,1", "255,25,0,1", "255,17,0,1", "255,1,0,1", "255,0,0,1"};
        String color = "";
        String reColor = "";
​
        double startValue = 0d;
        double endValue = 7.5d;
     //均分
        double interval = endValue/100d;
​
        for (int i = 0 ; i<100; i++){
​
            //System.out.println(formatDouble(startValue)+"-"+formatDouble(startValue+interval));
            re[i][0] = formatDouble(startValue);
            re[i][1] = formatDouble(startValue+interval);
​
            color = "#"+getHex(Integer.parseInt(colors[i].split(",")[0])) +
                    getHex(Integer.parseInt(colors[i].split(",")[1]))+
                    getHex(Integer.parseInt(colors[i].split(",")[2]));
            reColor +=  base1+  re[i][0] +base2+  re[i][1]  +base3+color+base4+color+base5;
​
            startValue += interval;
        }
​
        System.out.println(reColor);
    }
​
    static String getHex(int i){
        if(i>16){
            return Integer.toHexString(i);
        }else if(i>=0&&i<=16){
            return "0"+Integer.toHexString(i);
        }else {
            return "";
        }
    }
 private static String formatDouble(double d) {
        NumberFormat nf = NumberFormat.getInstance();
        //设置保留多少位小数
        nf.setMaximumFractionDigits(4);
        // 取消科学计数法
        nf.setGroupingUsed(false);
        //返回结果
        return nf.format(d);
    }

关于

其他：最新文档连接

反馈：QQ：1182564811