<!DOCTYPE html>

<html xmlns=http://www.w3.org/1999/xhtml>

    <head>

        <meta charset="utf-8" />

        <meta http-equiv=Content-Type content="text/html;charset=utf-8">

        <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">

        <meta content=always name=referrer>

        <title>OpenLayers 3地图示例</title>

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

        <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>

        <title></title>

    </head>

    <body>

        <div id="map" style="width: 100%;"></div>

    </body>

    <script>

        /* //创建地图

        new ol.Map({

            //设置地图图层

            layers:[

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

                new ol.layer.Tile({source:new ol.source.OSM()})

            ],

            //设置显示地图

            view :new ol.View({

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

                zoom:2         //并定义地图显示层为2

            })

            target:'map'

        }); */

         // 创建地图

      new ol.Map({

            // 设置地图图层

            layers: [

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

              new ol.layer.Tile({source: new ol.source.OSM()})

            ],

            // 设置显示地图的视图

            view: new ol.View({

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

              zoom: 2            // 并且定义地图显示层级为2

            }),

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

            target: 'map'

        });

    </script>

</html>

效果：

学习教程：http://anzhihun.coding.me/ol3-primer/

API文档：http://openlayers.org/en/latest/apidoc/

要想使用OpenLayers 3开发地图，首先你需要引入了OpenLayers 3的js库文件ol3.js及样式文件ol3.css，参见代码中html头部。它们可以在github上下载到。 请注意，每一个版本，都有4个下载链接，如果你不需要研究源码和例子，只用下载第一个 v*-dist.zip，下载解压后，里面包含ol.css，ol.js，ol-debug.js这三个文件，在初学时，尽量使用ol-debug.js，如果发生错误，堆栈信息更为可读，便于排查问题。 如果需要学习和研究源码，可以下载后面的三个文件，但注意，需要自己编译生成ol.css，ol.js，ol-debug.js，切不可直接使用源码中的同名文件。

注意： 上面这个段代码注明html文件编码为utf-8，所以你新建的html文件本身编码需要保证为utf-8，不然会导致中文乱码。

使用OpenLayers 勾画地图的更多相关文章

  1. 用OpenLayers开发地图应用

    项目背景 最近有一个使用全球地图展示数据的项目,用地图展示数据本身没什么难度,但出于安全和保密的考虑,甲方单位要求项目不能连接外网,只能在内网使用,也就是说,我们不得不在内网中部署一个地图服务器,在这 ...

  2. JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  3. OpenLayers中地图缩放级别的设置方法

    来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述 在OpenLayers中,地图必须具有一个缩放级别的 ...

  4. OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题

    环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...

  5. 使用OpenLayers发布地图

    OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库,制作的地图几乎可以在所有的浏览器中查看.因为是客户端类库,它不需要特殊的服务器端软件或配置,甚至不用下载任何东西就可 ...

  6. OpenLayers在地图外放置控件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  7. openlayers之地图截图

    方法1 //this.map._this为初始化地图对象 this.map._this.once('postcompose', function (event) { var canvas = even ...

  8. openlayers之地图测距侧面

    项目背景vue-cli3.0 public下html需要引入文件 <link rel="stylesheet" href="<%= BASE_URL %> ...

  9. OpenLayers绘制地图，无需外网，内网访问，提高安全性。

    1. 首先引入ol ,npm i --save ol 2. 创建地图 一个地图初步就这样完成了. 3. 怎么与后台进行交互? 具体参考文档:http://weilin.me/ol3-primer/ch ...

随机推荐

  1. SCUT - 216 - 宝华科技树

    https://scut.online/p/216 演员 把这个当成dp算了半天,各种姿势,好吧,就当练习一下树dp. 假如是每个节点的层数之和,按照dp[i][j]为从i点出发获得j科技的最小费用d ...

  2. ExtensionlessUrlHandler-Integrated-4.0

    window 10 锁定webconfig解决方案 解决办法:  出现这个错误是因为 IIS 7 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改.要取消锁定可以以管理 ...

  3. Netty入门搭建

    什么是Netty Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性. 为什么选择netty而不是使用NIO 1.使用 ...

  4. JS解析URL参数为对象

    曲不离口,拳不离手 JS小编程练习之一:解析URL参数为对象 url:http://www.baidu.com/we/index.html?id=098&aaa=123&ccc=456 ...

  5. React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...

  6. Python性能分析工具Profile

    Python性能分析工具Profile 代码优化的前提是需要了解性能瓶颈在什么地方,程序运行的主要时间是消耗在哪里,对于比较复杂的代码可以借助一些工具来定位,python 内置了丰富的性能分析工具,如 ...

  7. linux MySql 主从异步复制

    [root@localhost ~]# hostname master.allentuns ###SLAVE 执行 [root@localhost ~]# sed -i 's@\(HOSTNAME=\ ...

  8. linux Apache 日志轮询

    安装日志轮询工具 cronolog [root@Nagios-Server tools]# wgethttp://cronolog.org/download/cronolog-1.6.2.tar.gz ...

  9. lmhosts - samba的NetBIOS主机列表文件

    lmhosts是一个samba的NetBIOS名字到IP地址映射文件. 描述 此文件是samba套件的一部分. lmhosts是一个samba的NetBIOS名字到IP地址映射文件.它与/etc/ho ...

  10. Codeforces Round #427 (Div. 2) - A

    题目链接:http://codeforces.com/contest/835/problem/A 题意:两个人给网站发信息,现在给出信息的长度n,两个人的延迟和打字速度(一个字符),问网站先收到哪个人 ...