效果：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="lib/ol.css" />

        <script type="text/javascript" src="lib/ol.js"></script>

        <style type="text/css">

            .map{width: 600px;height: 400px;}

        </style>

    </head>

    <body>

        <div id="map" class="map"></div>

    </body>

</html>

<script type="text/javascript">

    //Map 是openlayers得核心组件，要渲染地图，必须需要view(视图),layers(图层),target(容器)

    //创建地图

    var map = new ol.Map({

        //设置显示地图的视图

        view: new ol.View({

            center: [0, 0],//义地图显示中心于经度0度，纬度0度处

            zoom: 1 //定义地图显示层级为1

        }),

        //创建地图图层

        layers: [

            //创建一个使用Open Street Map地图源的瓦片图层

            new ol.layer.Tile({

                source: new ol.source.OSM()

            })

        ],

        //让id为map的div作为地图的容器

        target: 'map'

    });

</script>

【01】openLayers 第一个地图的更多相关文章

  1. OpenLayers 3 之 地图视图（View）

    OpenLayers 3 之 地图视图(View) 初始化一幅地图,必备的三要素之一视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率.地图的旋转等控制.也就是说每个 map对 ...

  2. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  3. HT for Web整合OpenLayers实现GIS地图应用

    HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...

  4. 和李洪强一起学设计01 PS第一天

    和李洪强一起学设计01 PS第一天

  5. OpenLayers 3 之 地图控件（control）

    OpenLayers 3 之 地图控件(control) 地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用. OpenLayers 3 之 ...

  6. openlayers对接百度地图新方法

    上次给大家提供的openlayers对接百度地图有些问题,是因为没有进行分辨率设置,也没有进行相应的平面坐标转换,获取getURL的方法还是没有变化的 getURL: function (bounds ...

  7. LeetCode初级算法--排序和搜索01：第一个错误的版本

    LeetCode初级算法--排序和搜索01:第一个错误的版本 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.cs ...

  8. Openlayers实现第一张地图

    <html><head><title>OpenLayers Hello World</title> <style type="text/ ...

  9. 使TileCache配合OpenLayers，产生地图瓦块的一些资料（转）

    在tilecache.cfg中配置好被切割地图的参数,比如: [mytestmap]layers=3,5,7,8type=WMSurl=http://localhost/arcgis/services ...

随机推荐

  1. Template设计模式

    template英文名叫模板,在这个模式中,主要的角色有AbstractClass(抽象类)和ConcreteClass(具体类),这里举例如下; 将一段字符或者字符串循环显示5次: 首先定义抽象类, ...

  2. Leetcode13_罗马数字转整数

    题目 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1. ...

  3. HDU-6707-Shuffle Card(很数据结构的一道题)

    题目传送门 sol1:拿到这题的时候刚上完课,讲的是指针.所以一下子就联想到了双向链表.链表可以解决卡片移动的问题,但是无法快速定位要移动的卡片,所以再开一个指针数组,结合数组下标访问的特性快速定位到 ...

  4. js - __proto__ 、 prototype和constructor

    零.资料与前言 0x1 材料: 1.帮你彻底搞懂JS中的prototype.__proto__与constructor(图解) 0x2 前言 之前也尝试总结过 js 中的 __proto__ . pr ...

  5. SpringMVC学习笔记八:文件上传及多个文件上传

    SpringMVC实现文件上传需要加入jar包,commons-fileupload-1.3.1.jar,commons-io-2.2.jar 项目目录树: pom.xml加入需要的包 <pro ...

  6. Android开发之《Module相互引用，NDK不能正常Debug》

    解决Android Studio不能进入调试模式问题 Android Studio 2.2.3 native debug 无法调试?:https://www.zhihu.com/question/54 ...

  7. 签名旧版的pom文件

    <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...

  8. 签章新的pom文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  9. Dockfile自动创建discuz论坛和可道云

    将discuz论坛的zip包解压之后用tar包压缩,这样ADD可以直接解压tar包. [root@localhost centos6.9_ssh_discuz]# pwd /opt/dockerfil ...

  10. MobX中@computed和自定义get函数的区别

    首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...