• HappyGIS 正式上线啦~
    • HappyGIS 现在已经支持 Markdown 格式评论~

WebGIS 1-3矢量图层显示

WebGIS gooin 1190次浏览 0个评论

1. 步骤

1) 全局变量

        var map, layer;

2) 添加地图容器

            <!--'map1'为html中要显示地图div的id-->
            map = new OpenLayers.Map('map1',

                    {
                        <!--添加控件-->
                        controls: [
                            new OpenLayers.Control.PanZoomBar(),                 //缩放面板的工具控件
                            new OpenLayers.Control.LayerSwitcher(),                //图层切换控件
                            new OpenLayers.Control.Navigation(),                   //此控件处理伴随鼠标事件的地图浏览
                            new OpenLayers.Control.MousePosition(),                //此控件显示鼠标移动时,所在点的地理坐标
                            new OpenLayers.Control.OverviewMap()                    //鹰眼
                        ]
                    }
            );

3) 添加矢量图层

:传入的["gdbp://MapGisLocal/示例数据/ds/世界地图/sfcls/国界"]为MapGIS10桌面版中要素的url. 如图

Paste_Image.png

            layer = new Zondy.Map.Layer("mapgis test",
//                    传入矢量地图的url参数
                    ["gdbp://MapGisLocal/示例数据/ds/世界地图/sfcls/国界"],
                    {
                        ip: "127.0.0.1",    //ip
                        port: "6163",   //端口
                        isBaseLayer: true   //设为基础图层
                    }
            );

4) 将图层添加到地图容器中

           map.addLayer(layer);         

5) 设置地图显示中心坐标,地图缩放等级

           <!--设置地图显示中心坐标,地图缩放等级-->
           map.setCenter(new OpenLayers.LonLat(0, 0), 3);

注:雷同代码不再做注释,如有不懂请参阅前面发布的文章

2.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/mapDefault.css" type="text/css" rel="stylesheet"/>

    <script src="../libs/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../libs/OpenLayers.js" type="text/javascript"></script>
    <script src="../libs/zdclient.js" type="text/javascript"></script>

    <script type="text/javascript">{
        var map, layer;

        function init() {
 //            添加地图容器
            map = new OpenLayers.Map("map1");
//              添加矢量图层
            layer = new Zondy.Map.Layer("mapgis test",
//                    传入矢量地图的url参数
                    ["gdbp://MapGisLocal/示例数据/ds/世界地图/sfcls/国界"],
                    {
                        ip: "127.0.0.1",    //ip
                        port: "6163",   //端口
                        isBaseLayer: true   //设为基础图层
                    }
            );
//            将图层添加到地图容器中
            map.addLayer(layer);
            <!--设置地图显示中心坐标,地图缩放等级-->
            map.setCenter(new OpenLayers.LonLat(0, 0), 1);
        }
    }

    </script>
</head>

<body onload="init()">
<div id="map1">

</div>
</body>
</html>

3.效果

Paste_Image.png


HappyGIS 版权所有, 本站文章可随意转载, 请注明出处: 转载请注明WebGIS 1-3矢量图层显示
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址