从网上下载openlayers2，解压取得img theme 文件夹和openlayes.js文件。放在同一文件夹下用phpstorm打开。

创建index.html-------------每一行都有注释

<!DOCTYPE html>

<html lang='en'>

<head>

    <meta charset='utf-8'/>

    <title>My OpenLayers Map</title>

    <script type='text/javascript' src='OpenLayers.js'></script>//载入库文件

    <script type='text/javascript'>//js脚本，可以单独创建js文件，载入到html

        var map;//创建一个名为map的全局变量。

        function init() {

            map = new OpenLayers.Map('map_element', {});//从地图上创建一个映像对象类

            //第一个参数--map_element显示地图的html文件中的ID 　第二个参数是地图的选项

            var wms = new OpenLayers.Layer.WMS(//创建一个层对象映射到使用WMS层类的子类。

                    'OpenLayers WMS',//层的标题，在控制层列表增加可读性

                    'http://vmap0.tiles.osgeo.org/wms/vmap0',//URL是第二个参数,期望获得的WMS层类。

                    {layers: 'basic'},//键值对 返回"basic"层

                    {}

            );//WMS,代表网络地图服务　　一个国际标准定义的开放地理联盟(OGC)。

            map.addLayer(wms);//将图层添加到地图

            if (!map.getCenter()) {//定义地图的范围

                map.zoomToMaxExtent();//地图缩放地图的最大程度

                /**

                 * 其他控制大小的方法

                 * map.zoomToExtent(new OpenLayers.Bounds([minx,miny,maxx,maxy]);

                 *

                 * map.setCenter(new OpenLayers.LonLat(x,y));

                 * map.zoomTo(5);//x,y是经度/纬度值,5是你想放大的缩放级别。

                 *

                 */

            }

        }

    </script>

</head>

<body onload='init();'>

<div id='map_element' style='width: 500px; height: 500px;'>

</div>//为地图创建HTML元素

</body>

</html>

OpenLayers.2.10.Beginners.Guide---第一章的更多相关文章

  1. ASM学习笔记--ASM 4 user guide 第一章翻译

    ASM是什么? 借用别人的话 :ASM 是一个 Java 字节码操控框架.它能被用来动态生成类或者增强既有类的功能. ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机 ...

  2. 《驾驭Core Data》 第一章 Core Data概述

    <驾驭Core Data>系列教程综合了<Core Data for iOS>,<Learning Core Data for iOS>,<Core Data ...

  3. [ABP教程]第一章 创建服务端

    Web应用程序开发教程 - 第一章: 创建服务端 关于本教程 在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开发 ...

  4. 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  5. Nova PhoneGap框架 第一章 前言

    Nova PhoneGap Framework诞生于2012年11月,从第一个版本的发布到现在,这个框架经历了多个项目的考验.一直以来我们也持续更新这个框架,使其不断完善.到现在,这个框架已比较稳定了 ...

  6. 第一章 Java多线程技能

    1.初步了解"进程"."线程"."多线程" 说到多线程,大多都会联系到"进程"和"线程".那么这两者 ...

  7. 【读书笔记】《编程珠玑》第一章之位向量&位图

    此书的叙述模式是借由一个具体问题来引出的一系列算法,数据结构等等方面的技巧性策略.共分三篇,基础,性能,应用.每篇涵盖数章,章内案例都非常切实棘手,解说也生动有趣. 自个呢也是头一次接触编程技巧类的书 ...

  8. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  9. 第一章.C语言简介

    C语言第一章 C语言简介   目录 一.C语言介绍 二.C语言特点 三.Hello World 四.转义符 五.占位符 六.俄罗斯方块游戏 七.文件下载 一.C语言介绍 C是一种通用的编程语言,广泛用 ...

随机推荐

  1. SSH免密码登陆原理

    Master作为客户端,要实现无密码公钥认证,连接到服务器Salve上时,需要在Master上生成一个密钥对,包括一个公钥和一个私钥,而后将公钥复制到所有的Salve上.当Master通过SSH链接到 ...

  2. window frida安装

    当需要安装第三方python包时,可能会用到easy_install命令.easy_install是由PEAK(Python Enterprise Application Kit)开发的setupto ...

  3. 从底层谈，WebGIS 原理、设计、实现

    留待备用! http://www.cnblogs.com/naaoveGIS/category/600559.html 介绍与WebGIS相关的各种原理知识,以及基于原理知识上的程序设计和实现. (一 ...

  4. 写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流

    http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...

  5. 翻书插件：wowbook.js

    wowbook是一个jQuery插件,可以让你在网站中发布一本页面翻转效果超赞的书. demo演示 基本页面 <!DOCTYPE html> <html lang="en& ...

  6. selenium 打开浏览器

    import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebE ...

  7. Spring Boot中的事务管理

    原文  http://blog.didispace.com/springboottransactional/ 什么是事务? 我们在开发企业应用时,对于业务人员的一个操作实际是对数据读写的多步操作的结合 ...

  8. yii2 可逆加密

    加密: $data 是你要加密的内容, $secretKey 是你自己设置的salt, $encryptedData = Yii::$app->getSecurity()->encrypt ...

  9. 如何设置tomcat定时自动重启

    ,今天笔者就跟大家分享一下如何设置tomcat定时自动重启. 第一:把Tomcat6安装成windows 2003服务. 1.首先检查tomcat\bin目录下是否有service.bat文件,如图: ...

  10. JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父 ...