Part3 使用JavaScript显示地图

最新推荐文章于 2023-02-15 14:19:36 发布

安迪小宝

最新推荐文章于 2023-02-15 14:19:36 发布

阅读量1.4k

点赞数

分类专栏： MapGIS Web开发_JavaScript 文章标签： MapGIS云GIS软件 Web开发 2014年全国高校GIS大赛 javascript web应用

本文链接：https://blog.csdn.net/wujianyouhun/article/details/24322385

版权

MapGIS Web开发_JavaScript 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

新建空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 οnlοad="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://

源码地址：下载源码