效果：

代码：

<!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. 4.Redis持久化方案

    1.1 RDB持久化 RDB方式的持久化是通过快照(snapshotting)完成的,当符合一定条件时Redis会自动将内存中的数据进行快照并持久化到硬盘. RDB是Redis默认采用的持久化方式. ...

  2. 吴裕雄--天生自然python学习笔记：爬取我国 1990 年到 2017年 GDP 数据并绘图显示

    绘制图形所需的数据源通常是不固定的,比如,有时我们会需要从网页抓取, 也可能需从文件或数据库中获取. 利用抓取网页数据技术,把我国 1990 年到 2016 年的 GDP 数据抓取出来 ,再利用 Ma ...

  3. tarjan通俗易懂题

    洛谷2661 https://www.luogu.org/problemnew/show/P2661 分析:求缩点后成环中,环大小最小的size #include<bits/stdc++.h&g ...

  4. va_list、va_start和va_end使用

    我们知道va_start,va_arg,va_end是在stdarg.h中被定义成宏的,由于1.硬件平台的不同 2.编译器的不同,所以定义的宏也有所不同. 在ANSI C中,这些宏的定义位于stdar ...

  5. Disk Group基础概念与深度解析

  6. SpringBoot连接Oracle报错，找不到驱动类，application.properties文件中驱动类路径为红色

    pom.xml文件: <!-- oracle odbc --> <dependency> <groupId>com.oracle</groupId> & ...

  7. 接口测试-chap2-关于重定向

    重定向: 301:资源永久转移 302:资源暂时转移到另一个地址了 1.如果请求接口时发生了重定向,python会自动跟随重定向,对重定向地址发起请求,最后只能得到重定向地址的响应结果.而看不到重定向 ...

  8. JS做深度学习3——数据结构

    最近在上海上班了,很久没有写博客了,闲下来继续关注和研究Tensorflow.js 关于深度学习的文章我也已经写了不少,部分早期作品可能包含了不少错误的认识,在后面的博文中会改进或重新审视. 今天聊聊 ...

  9. 吴裕雄--天生自然 oracle学习笔记：oracle理论学习详解及各种简单操作例子

    1. 数据库的发展过程 层次模型 -->网状模型 -->关系模型 -->对象关系模型 2. 关于数据库的概念 DB:数据库(存储信息的仓库) DBMS:数据库管理系统(用于管理数据库 ...

  10. idea快捷键-eclipse

    ctrl+shift+R 查找文件ctrl+shift+T 查找class类alt+Enter 导包alt+Shift+P 实现方法