效果：

代码：

<!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. IPC之——信号量集(多个信号量)

    如果两个进程不仅需要同步,还要保证先后执行顺序,就要用两个信号量(互斥锁)来解决 //栅栏模型:实现以下框架中的四个子进程 所有进程做完任务后 在一起执行下一次  #include <stdio ...

  2. 《C程序设计语言》练习 1-6,1-7

    #include<stdio.h> /*验证表达式getchar()!=EOF的值是0还是1*/ main () { int c; c=getchar()!=EOF; printf(&qu ...

  3. iOS 去掉导航栏最下面线的方法

    导航栏透明,但是字体就不显示了,所以不可行. 下面两种方法是让导航栏下面的线不显示. // 方法1: [[self.navigationController.navigationBar.subview ...

  4. operator和if结构

    1.比较运算符:>,<,==,!=,>=,<= 注意:所有比较运算符的结果都是布尔值举例: 123456789 print(100>10) print(100<10 ...

  5. VisionPro和Halcon的详细对比

    一.概括的对比 1.1  Halcon的优势 Halcon有着更加低廉的Lisence 1.并且提供更好.更强大的2D和3D的视觉软件库 2.Halcon支持的视觉图像采集设备数量是Visionpro ...

  6. resent|aspiration|deficiency|diagnosed|distract|emphasize

    VERB 怨恨;憎恶;愤恨If you resent someone or something, you feel bitter and angry about them. She resents h ...

  7. python3下应用pymysql(第二卷）

    上一卷讲述的是单条插入数据,现在要多条插入数据: 随意定义了一批数据 去数据库查询一下: 下面试一下查询语句: 获取游标里的数据,结果如下: 下面更改下返回数据类型,如果想用字典类型: 结果如下: 在 ...

  8. 洛谷 P1220 关路灯 题解

    Description 有 $n$ 盏路灯,每盏路灯有坐标(单位 $m$)和功率(单位 $J$).从第 $c$ 盏路灯开始,可以向左或向右关闭路灯.速度是 $1m/s$.求所有路灯的最少耗电.输入保证 ...

  9. ionic3 生命周期钩子

    ionViewDidLoad 页面加载完成触发,这里的"加载完成"指的是页面所需的资源已经加载完成,但还没进入这个页面的状态(用户看到的还是上一个页面). 需要注意的是它是一个很傲 ...

  10. 用ES6和fetch封装网络请求

    导读: fetch: 这个方法是ES2017中新增的特性,这个特性出来后给人一种传统ajax已死的感觉,其实它的作用是替代浏览器原生的XMLHttpRequest异步请求,我们在日常的开发中,基本不会 ...