geoserver学习方法

geoserver资料是比较难找，但装上了geoserver服务器后，RUN起来后，加载地图就可以了，地图资源网上还有很多的,都是.shp格式的。      然后使用OpenLayers.js 访问geoserver服务器，读取加载地图图层信息，在上面绘制点和线就可以了。
var host = "http://192.168.0.167:8082/geoserver/wms";
    var map;
    var untiled;
    var tiled;
    var imgurl = WebRoot + "admin/js/img/";
    //标注图标
    var icon = {
     0 :imgurl+"hong.png",
     1 :imgurl+"huang.png",
     2 :imgurl+"fei.png",
     3 :imgurl+"nui.png"
    };    //画线图层
    var lineVectors =new OpenLayers.Layer.Vector("line");
    //画点图层
    var pointVectors = new OpenLayers.Layer.Vector("point");
    //标注图层
    var ers = new OpenLayers.Layer.Markers( "ers" );

    //var WebRoot = "<c:url value="">";
    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
    OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
    OpenLayers.ImgPath = WebRoot + "admin/js/img/";

    this.init=function(){
        format = 'image/png';
        var bounds = new OpenLayers.Bounds(
            73.447, 6.319,
            135.086, 53.558
            );
        var options = {
            controls: [],
            maxExtent: bounds,
            maxResolution: 0.24077734375,
            projection: "EPSG:2010",
            resolutions: [
                0.1,
//                0.09,
                0.08,
//                0.07,
                0.06,
//                0.05,
                0.04,
//                0.03,
                0.02,
//                0.01,
                0.009,
//                0.008,
                0.007,
//                0.006,
                0.005,
//                0.007890625,
//                0.00625,
//                0.00515625,
//                0.00439453125,
//                0.003125,
//                0.003578125
            ],
            minScale:1000000,
            numZoomLevels:5,
            units: 'm'
        };
        map = new OpenLayers.Map('map', options);
        // setup tiled layer
        tiled = new OpenLayers.Layer.WMS(
            "bou2_4p - Tiled", host,
            {
                srs: 'EPSG:2010',
                layers: 'map:bou2_4p',
                styles: '',
                format: format,
                tiled: 'true',

                tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
            },
            {
                buffer: 0,
                displayOutsideMaxExtent: true
            }
            );
        // setup single tiled layer

        untiled = new OpenLayers.Layer.WMS(
            "bou2_4p - Untiled", host,
            {
                srs: 'EPSG:2010',
                layers: 'map:bou2_4p',
                 WIDTH:'1900',
                 bgcolor:'#E8ff9f',
                 //bgcolor: '0xA6CAE0',
                format: format

            },
            {
                singleTile: true,
                ratio: 1
            }
            );
        map.addLayers([untiled,lineVectors,pointVectors,ers]);
        map.addControl(new OpenLayers.Control.PanZoomBar({
            position: new OpenLayers.Pixel(2, 15)
        }));
        map.addControl(new OpenLayers.Control.Navigation());
        map.addControl(new OpenLayers.Control.Scale());
        map.addControl(new OpenLayers.Control.MousePosition());
        map.zoomToExtent(bounds);

//        this.addNode(10,106.79466,39.56959,3,false,"ssss");
        //this.remvoeNode(10);
        //this.changeStatus(10, 2);
    }

    function CreateMaker(id,x,y,t,showLable,text,fnc){
        var icon_1 = getIcon(t);
        var feature = new OpenLayers.Feature(ers,new OpenLayers.LonLat(x,y),{
            'icon': icon_1
        });
        var er =  feature.createMarker();

        er.text=text;
        //以id进行标注
        er.nodeid = id;
        er.showLabel=showLable;
        //设置imgDivid
       // er.icon.imageDiv.id = id;
        er.icon.imageDiv.style.fontSize = "12px";
        er.icon.imageDiv.style.fontWeight = "bold";
        er.icon.imageDiv.style.whiteSpace = "nowrap";
        er.icon.imageDiv.style.color = "#ffffff";
        er.icon.imageDiv.style.textShadow = "1px 1px 2px #000000";
        er.icon.imageDiv.style.cursor="pointer";
        var str = er.icon.imageDiv.innerHTML;
        if(er.showLabel){
            str = str + er.text;
        }
        er.icon.imageDiv.innerHTML = str;
        er.events.register('click',er,function(ent){
           fnc(id);
        });
        return er;
    }

    function CreatePoint(x,y){
        var point = new OpenLayers.Geometry.Point(x,y);
        var feature = new OpenLayers.Feature.Vector(point);
        return feature;
    }
    function CreateLine(pointList){
        var style_line = {
            strokeColor: "red",
            strokeOpacity: 0.8,
            strokeWidth: 2,
            pointRadius: 20,
            label:"",
            fontSize:'12px',
            fontFamily:'宋体',
            labelXOffset:30,
            labelYOffset:10,
            labelAlign:'rm'
        };
        var lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_line);
        return lineFeature;
    }
    /**
     * 添加一个节点
     * id 节点ID
     * x 经度
     * y 纬度
     * icontype,图标类型 0:红 1 黄 2 灰 3绿
     * showLable 是否显示文字
     * text 文本内容
     * fnc 点击后的回调函数,会传入节点ID
     */
    this.addNode = function(id,x,y,icontype,showLable,text,fnc){
     ers.addMarker(CreateMaker(id,x,y,icontype,showLable,text,fnc));
    }
    //销毁地图对象
    this.destroy = function(){
     map.destroy();
    }
    //从地图上移除某个节点
    this.remvoeNode = function(nodeid){
     for(var i =0;i<ers.ers.length;i++)
     {
     //找到标注点进行删除
     if(nodeid == ers.ers[i].nodeid){
     ers.removeMarker(ers.ers[i]);
     }
     }
    }
    //查看节点是否存在
    this.isExistsNode = function(nodeid){
     for(var i =0;i<ers.ers.length;i++){
     if(nodeid == ers.ers[i].nodeid){
     return true;
     }
     }
     return false;
    }
    //改变节点状态.对应地图图标颜色改变
    this.changeStatus = function(nodeid,status){
       for(var i =0;i<ers.ers.length;i++)
     {
     if(nodeid == ers.ers[i].nodeid){
     var er = ers.ers[i];
     ers.removeMarker(ers.ers[i]);
     er.icon = getIcon(status);
             er.icon.imageDiv.style.fontSize = "2px";
             er.icon.imageDiv.style.whiteSpace = "nowrap";
             er.icon.imageDiv.style.color = "white";
             er.icon.imageDiv.style.cursor="pointer";
             var str = er.icon.imageDiv.innerHTML;
             if(er.showLabel){
                 str = str + er.text;
             }
             er.icon.imageDiv.innerHTML = str;
     //找到标注点进行删除

             //改变图标路径


     //直接修改图片
     //$("#"+nodeid).find("img").attr("src",er.icon.url);
     //alert(ers.ers[i].icon.imageDiv.innerHTML)
     //alert($("#"+er.icon.imageDiv.id+"").find("img").attr("src"))
             //重新增加到图层中
     ers.addMarker(er);
     }
     }
    }
    //获得图标
    function getIcon(t){
        var size = new OpenLayers.Size(10,10);
        var offset = new OpenLayers.Pixel(-size.w, -size.h);
        var icon_1 = new OpenLayers.Icon(icon[t], size, offset);
        return icon_1;
    }

    this.resize = function(){
        map.updateSize();
    }
}

调试易

geoserver学习方法

解决方案 »