<!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. [Python3] 003 变量类型概述 & 数字类型详叙

    目录 0. 变量类型概述 1. 数字类型详叙 1.1 整数 1.1.1 常用进制 1.1.2 少废话,上例子 1.2 浮点数 1.2.1 使用浮点数时可以"偷懒" 1.2.2 科学 ...

  2. [转帖]K8s集群安装--最新版 Kubernetes 1.14.1

    K8s集群安装--最新版 Kubernetes 1.14.1 http://www.cnblogs.com/jieky/p/10679998.html 原作者写的比较简单 大略流程和跳转的多一些 改天 ...

  3. PostgreSQL dblink使用过程

    安装: 进入/root/postgresql-11.2/contrib/dblink make && make install 切换到postgres用户 [root@fce40690 ...

  4. Linux下安装tomcat与配置

    准备工作:将下载好的tomcat 9.0上传到自己的阿里云服务器(推荐根目录下) 附下载地址:https://archive.apache.org/dist/tomcat/tomcat-9/v9.0. ...

  5. adb,aapt等命令使用

    adb         install/uninstall:安装/卸载手机中的应用.         devices:查看当前连接到电脑中的设备. adb shell         首先运行adb ...

  6. [LeetCode] 137. 只出现一次的数字 II

    题目链接 : https://leetcode-cn.com/problems/single-number-ii/ 题目描述: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现了三 ...

  7. textarea标签输出内容时不能顶格（左对齐）输出

    我用textarea输出文本内容的时候出现下面的问题:文本内容在action里测试没有问题(文本内容前面没有空格),但是在jsp页面textare标签中输出文本内容时,文本内容前面却出现一些多余的空格 ...

  8. Ubantu创建热点并共享——2019年5月10日更新

    只需要两步,参考以下两篇文章: ubuntu16.04上安装配置DHCP服务的详细过程 Ubuntu18.04 创建与编辑热点的方法

  9. Pure播放器

    我是的本地应用,并不会拿你的隐私数据.

  10. arcgis server10.2发布地图服务报错

    发布地图服务时,读取了本机电脑中的切片方案.发布服务,报打包成功,但发布失败错误. 解决办法:给arcgis账户,赋予读写权限即可.重复发布服务,成功发布.