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

WebGIS 1-2矢量地图文档显示

WebGIS gooin 626次浏览 0个评论

1. 步骤

1) 全局变量

        var map, vectorMapdoc;

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) 添加矢量图层

                    <!--'MyMap'为自定义的图层名-->
                    <!--'WorldMKT'为已经发布的地图-->
            vectorMapdoc = new Zondy.Map.Doc("MyMap", "WorldMKT",
                    {
                        ip: "127.0.0.1",   //ip
                        port: "6163",      //端口
                        isBaseLayer: true   //设为基础图层
                    });

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

                     map.addLayers([vectorMapdoc]);

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

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

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

2.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="../css/mapDefault.css" type="text/css" rel="stylesheet"/>

    <script src="../libs/jquery-1.11.2.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, vectorMapdoc;
        function init() {
//            添加地图容器
            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()                    //鹰眼
                        ]
                    }
            );
//              添加图层
            vectorMapdoc = new Zondy.Map.Doc("MyMap", "WorldMKT",
                    <!--'MyMap'为自定义的图层名-->
                    <!--'WorldMKT'为已经发布的地图-->
                    {
                        ip: "127.0.0.1",   //ip
                        port: "6163",      //端口
                        isBaseLayer: true   //设为基础图层
                    });
//            将图层添加到地图容器中
            map.addLayers([vectorMapdoc]);
            <!--设置地图显示中心坐标,地图缩放等级-->
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);

        }

    </script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!--在页面栽入时调用init()函数-->
<body onload="init()">

<div id="header">
    <h1>Example</h1>
    <p>show map</p>
</div>

<div id="map1">

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

3.效果

Paste_Image.png


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

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

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

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