<!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. [知乎]自己真是Know Nothing 历史上有哪些细思恐极的事件？

    作者:敖让链接:https://www.zhihu.com/question/38374479/answer/652432284来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  2. [19/05/29-星期三] JavaScript_ 函数的简介

    一.函数的简介 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  3. Linux命令学习（0）

    作为一名前端,可能接触到linux的机会并不多,但这不代表就不需要学.对我而言,学习linux主要是为了方便部署我的项目到服务器,我并没有花时间去学这些,只是上网查怎么部署项目,然后按教程一步一步来, ...

  4. vscode配置golang

    https://www.cnblogs.com/Leo_wl/p/8242628.html https://www.cnblogs.com/angelyan/p/10400789.html 主要看了这 ...

  5. 算法（C#版）动态规划和贪心算法

    https://blog.csdn.net/kouzhuanjing1849/article/details/88954811

  6. 网络爬虫之HTTPClient

    HTTPClient官网:http://hc.apache.org/httpcomponents-client-4.5.x/quickstart.html 问题一:明明浏览器请求有数据,可使用HTTP ...

  7. 一、IIS搭建前端静态模板_资源加载问题

    一.模板文件说明和效果展示 二.IIS配置模板 三.解决方案 把资源文件复制到html目录内与index.htm同级,因为我iis指定站点就是该目录.

  8. shell中通过读取输入yes no判断下一步如何处理

    if [ -d $r_item_rmgit ];then                            read -p "$r_item_rmgit exit, replace it ...

  9. python文件读写详解

    # Python3 open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True, ...

  10. git分支管理与tag的学习笔记

    git分支管理学习笔记:创建dev分支:git branch dev查看分支:git branch切换分支:git checkout dev创建并切换分支:git checkout dev -b zh ...