openLayers 3 之入门

openlayer是web GIS客户端开发提供的javascript类库，也是开源框架，可以加载本地数据进行展示地图

1.下载相关引用的js、css文件

2.类似于echarts，创建一个容器div，并给予宽高

3.编写openlayers初始化地图方法

4.在网页上显示

示例代码：

<!doctype html>

<html lang="en">

 <head>

   <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">

   <style>

     .map {

       height: 400px;

       width: 100%;

     }

   </style>

   <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>

   <title>OpenLayers example</title>

 </head>

 <body>

   <h2>My Map</h2>

   <div id="map" class="map"></div>

   <script type="text/javascript">

     var map = new ol.Map({

       target: 'map',

       layers: [

         new ol.layer.Tile({

           source: new ol.source.OSM()

         })

       ],

       view: new ol.View({

         center: ol.proj.fromLonLat([37.41, 8.82]),

         zoom: 4

       })

     });

   </script>

 </body>

</html>

　　

openLayers 3 之入门的更多相关文章

  1. GIS学习汇总

    GIS之家: Geoserver: geoserver安装部署步骤 geoserver发布地图服务WMS geoserver发布地图服务WMTS geoserver集成以及部署arcgis serve ...

  2. OpenLayers 3 入门教程

    OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它 ...

  3. 【OpenLayers】入门教程地址

    [OpenLayers]入门教程地址:  点击进入   http://anzhihun.coding.me/ol3-primer/index.html 简书地址 :  http://www.jians ...

  4. OpenLayers入门（一）

    OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开 ...

  5. Webgis中关于Openlayers入门使用（一）安装及生成基本地图

    一．WebGis项目中使用的版本2.12 下载地址:https://github.com/openlayers/ol2/releases https://github.com/openlayers/o ...

  6. SuperMap iClient for JavaScript 新手入门

    地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...

  7. openlayers 学习笔记之1

    1. 为Web Gis客户端开发的javascript 框架 百度文库中的教程:入门经典> 1) 初始化map: map = new OpenLayers.Map(mapContainerNam ...

  8. esri-leaflet入门教程（1）-leaflet介绍

    esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥 关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...

  9. ArcGIS API for JavaScript 入门教程[1] 渊源

    ->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...

随机推荐

  1. typecho去index.php

    RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} ! ...

  2. Win10 Backup&Restore Start Menu（备份还原开始菜单）

    Win10 的开始菜单,不是很稳定!系统装完4天,开始乱了3次,要知道我的开始菜单全屏并且进过尽心布局的,很是心酸! 连着找了几天备份开始菜单的方法,无果!后来发现了下边两个PowerShell命令, ...

  3. JS实现浏览器打印、打印预览

    1.JS实现打印的方式方式一:window.print()window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,下面是从网上摘到 ...

  4. Loj 2028 随机序列

    Loj 2028 随机序列 连续的乘号会将序列分成若干个块,块与块之间用加减号连接: \[ (a_1*a_2*...a_i)\pm(a_{i+1}*a_{i+2}*...a_j)\pm... \] 除 ...

  5. BZOJ1597土地购买 【斜率优化DP】

    BZOJ1597土地购买 [斜率优化DP] Description 农夫John准备扩大他的农场,他正在考虑N (1 <= N <= 50,000) 块长方形的土地. 每块土地的长宽满足( ...

  6. （笔记）JQuery扩展方法实现Form表单与Json互相转换

    JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.to ...

  7. scrapy 伪装代理和fake_userAgent的使用

    伪装浏览器代理 在爬取网页是有些服务器对请求过滤的不是很高可以不用ip来伪装请求直接将自己的浏览器信息给伪装也是可以的. 第一中方法: 1.在setting.py文件中加入以下内容,这是一些浏览器的头 ...

  8. 数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群)

    数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群) 因为不会做目录所以请善用ctrl+F 本来想的是笔记之类的,写着写着就变成了资源整理 一些有的 ...

  9. lib包含# #pragma comment

    #pragma comment(lib,"d2d1.lib")#pragma comment(lib,"dwrite.lib")#pragma comment( ...

  10. VScode插件

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段. ...