您的位置：首页 > Web前端 > JavaScript

Part3 使用JavaScript显示地图

2014-04-22 18:48 465 查看
新建空web应用程序项目



新建样式文件夹和库文件夹，分别用来管理CSS样式和库（可直接拷贝本示例的样式和库）

在MapGIS 10的安装目录下拷贝资源到相应的文件夹，可以直接去拷贝本示例的。



新建Html页面，在head中添加引用：

<head>

<title>地图加载显示</title>

<script src="Lib/jquery-1.5.1.min.js"type="text/javascript"></script>

<link href="CSS/style.css" rel="stylesheet"type="text/css" />

<link href="CSS/zondy-style-thin.css"rel="stylesheet" type="text/css" />

<script src="Lib/OpenLayers.js"type="text/javascript"></script>

<script src="Lib/zdclient.js" type="text/javascript"></script>

</head>



在body标签中新建div标签，用于显示地图

<divid="myMap"></div>

新建CSS文件，在Html的head中连接

#myMap
{
   width:960px;
   height:800px;
   border:2px solid red;
margin: 0 auto!important;
}
这个地方important是提高居中的权限，在openLayer的代码中，强制将试图靠左变了，所以想要居中，必须加强CSS样式的权限。

添加body的onload事件“init()”

新建Script文件，在Html的head中连接

/// <reference path="jquery-1.5.1.min.js"/>
/// <referencepath="OpenLayers.js" />
/// <referencepath="zdclient.js" />
var map, layer;
function init() {
   map = new OpenLayers.Map('myMap', { numZoomLevels: 16, maxExtent: newOpenLayers.Bounds(-1178.56250932989, -783.359712724798, 1178.56250933002,783.359712724798), maxResolution: 7.24, controls: [newOpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()] });
   layer = new Zondy.Map.Doc("MapGIS IGS MapDocLayer", "世界地图（等差分）",{ ip: "192.168.23.15", port: "6163" });
   map.addLayers([layer]);
   map.setCenter(new OpenLayers.LonLat(0, 0), 2);
}


完成的源码如下：
Html内容

xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>地图显示</title>
    <script src="lib/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="lib/OpenLayers.js" type="text/javascript"></script>
    <script src="lib/zdclient.js" type="text/javascript"></script>
    <link href="CSS/style.css" rel="stylesheet" type="text/css" />    
     <link rel="stylesheet" type="text/css" href="CSS/StyleSheet1.css" />
    <script src="lib/MyScript.js" type="text/javascript"></script> 
</head>
<body onload="init()">
<div id="top"></div>
<div id="myMap"></div>
<div id="footer"></div>
</body>
</html>


CSS（StyleSheet1.css）源码

#myMap 
{
    width:960px;
    height:800px;
    border:2px solid red;
    margin: 0 auto !important;
    
    }
    #top
    {
        margin:0 auto;
        width:960px;
        height:200px;
        background-color:Blue;   
        
    }
    #footer
    {
         margin:0 auto;
        width:960px;
        height:200px;
        background-color:Green;
    }


Script（MyScript.js）源码

/// <reference path="jquery-1.5.1.min.js" />
/// <reference path="OpenLayers.js" />
/// <reference path="zdclient.js" />
var map, layer;
function init() {
//初始化地图容器，确定地图文档范围，显示级数分辨力等
    map = new OpenLayers.Map('myMap', { numZoomLevels: 16, maxExtent: new OpenLayers.Bounds(-1178.56250932989, -783.359712724798, 1178.56250933002, 783.359712724798), maxResolution: 7.24, controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()] });
  //初始化图层，确定数据名称，地址等
    layer = new Zondy.Map.Doc("MapGIS IGS MapDocLayer", "世界地图（等差分）", { ip: "192.168.23.15", port: "6163" });
   //给容器添加图层
    map.addLayers([layer]);
    设置初始化显示级别
    map.setCenter(new OpenLayers.LonLat(0, 0), 2);
}


运行效果（浏览器缩放为75%）
http://


源码地址：下载源码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航