效果：

代码：

<!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. HTML 标签的 target 属性

    定义和用法 target 属性规定在何处打开 action URL. 属性值 值 描述 _blank 在新窗口中打开. _self 默认.在相同的框架中打开. _parent 在父框架集中打开. _t ...

  2. 106）PHP，缩略图代码和结果展示

    首先是 代码展示: <?php class CImage { /** * 生成保持原图纵横比的缩略图,支持.png .jpg .gif * 缩略图类型统一为.png格式 *@param $src ...

  3. 吴裕雄--天生自然 HADOOP大数据分布式处理：安装配置Tomcat服务器

    下载链接:https://tomcat.apache.org/download-80.cgi tar -zxvf apache-tomcat-8.5.42.tar.gz -C /usr/local/s ...

  4. RabbitMQ传输原理、五种模式

    本文代码基于SpringBoot,文末有代码连接 .首先是一些在Spring Boot的一些配置和概念,然后跟随代码看下五种模式 MQ两种消息传输方式,点对点(代码中的简单传递模式),发布/订阅(代码 ...

  5. OpenCV 腐蚀与膨胀(Eroding and Dilating)

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  6. MongoDB的图形化连接工具MongoDB VUE

    MongoDB的图形化连接工具MongoDB VUE 类似mysql的navicat.

  7. JS调用免费接口根据ip查询位置

    免费接口如下: 新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 新浪多地域测试方法:http://in ...

  8. 初级string

    标准库string类型 string对象初始化 string s1; string s2(s1); string s3("value"); string s4(n,'c'); st ...

  9. python实现经典冒泡算法

    利用for循环,完成a=[1,7,4,89,34,2]的冒泡排序 冒泡排序:小的排在前,大的排在后面

  10. R内的gsub()函数

    今天遇到了一个问题就是,如果数据里面有逗号,那么如何转换他们.就像下面的这样: > exercise9_1$地区生产总值 [1] 16,251.93 11,307.28 24,515.76 11 ...