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. js之数码时钟加随机变色

      HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. Android中的按键顺序打乱

    首先要找到相对应的控件,之后再来一个数组,再把数组里面的数字显示到控件上面. private void initView() { mNum0 = (Button) findViewById(R.id. ...

  3. BZOJ3730 震波 【动态点分治】*

    BZOJ3730 震波 Description 在一片土地上有N个城市,通过N-1条无向边互相连接,形成一棵树的结构,相邻两个城市的距离为1,其中第i个城市的价值为value[i]. 不幸的是,这片土 ...

  4. iOS应用截屏

    iPhone自从推出后就自带了截屏功能,简单而易用,所以应用就没什么截屏的需求了,不过有些时候我们还是会遇到这个需求.比如,我们开发了一个播放器,用openGL进行video render,此时直接截 ...

  5. WebApi系列~通过HttpClient来调用Web Api接口~续~实体参数的传递 【转】

    原文:http://www.cnblogs.com/lori/p/4045633.html 下面定义一个复杂类型对象 public class User_Info { public int Id { ...

  6. CH1802 表达式计算4

    题意 给出一个表达式,其中运算符仅包含+,-,*,/,^(加 减 乘 整除 乘方)要求求出表达式的最终值 数据可能会出现括号情况,还有可能出现多余括号情况 数据保证不会出现>=2^31的答案 数 ...

  7. uwsgi配置理解

    最近使用uwsgi 部署了flask应用,出现了不少问题,仔细查阅了一下资料以及翻看了官方文档,就对自己了解到的做个总结~~ 一.http/http-socket/socketuwsgi开头当然少不了 ...

  8. Nomad 了解

    Introduction to Nomad Welcome to the intro guide to Nomad! This guide is the best place to start wit ...

  9. 使用ILMerge将源DLL合并到目标EXE(.NET4.6.2)

    本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 本文主要是使用微软的ILMerge工具将源DLL合并到目标EXE,因此,需要下载以下工具: https://www.micro ...

  10. 2019Falg

    2019的Flag 2018 2018年对我来说是很重要的一年. 毕业--拿到硕士学位. 工作---成功转行进入互联网行业. 有了她. 上半年忙碌于毕业的各种事情,被毕业论文折磨的要疯,顺利走完所有流 ...