<!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. getopt_long函数解析命令行参数

    转载:http://blog.csdn.net/hcx25909/article/details/7388750 每一天你都在使用大量的命令行程序,是不是感觉那些命令行参数用起来比较方便,他们都是使用 ...

  2. [LeetCode] 135. 分发糖果

    题目链接 : https://leetcode-cn.com/problems/candy/ 题目描述: 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分 ...

  3. UvaLive 6664 Clock Hands

    链接:http://vjudge.net/problem/viewProblem.action?id=49409 题意:给一个奇怪的能够记录N小时内时间的表(生活中的表是12小时计时的). 而且给出一 ...

  4. w3c之js学习总结

    ①JavaScript:改变 HTML 内容 <p id="demo">JavaScript 能改变 HTML 元素的内容.</p> <script& ...

  5. Maven clean install 跳过单元测试

    1.使用MVN命令 mvn clean install -DskipTests 或者 mvn clean install -Dmaven.test.skip=true 2.Eclipse中设置clea ...

  6. JS解析URL参数为对象

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

  7. [七月挑选]Tomcat使用命令行启动之指定jdk版本

    title: Tomcat使用命令行启动之指定jdk版本 准备好环境,jdk和tomcat. 主要步骤 1.找到Tomcat/bin/catalina.bat文件. 2.在文件前端添加如下. set ...

  8. django基础篇03-阶段总结

    1.django的生命周期: url -> 路由系统 -> 视图函数(获取模版 + 数据 =>渲染) -> 返回字符串 2.路由系统: /index/ ->函数或类.as ...

  9. PAT Advanced 1006 Sign In and Sign Out (25 分)

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  10. xtrabackup备份mysql以及创建自动定时任务

    xtrabackup的安装 安装依赖关系 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo y ...