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. 类（Classes）

    待写! 这里极力推荐博客园Vamei写的python系列文章,非常精彩,我只是遵照着The Python Tutorial目录来记录自己的学习体会,但也在看Vamei的文章,给大家推荐! 作者:Vam ...

  2. Python：版本升级(Mac OS X)

    Mac OS X 10.8及以后的版本都预装了Python 2.7,但是在Mac上(Unix-like OS)上修改Python的版本并不如Windows方便.这篇文章的目标是要将Mac自带的Pyth ...

  3. HDU - 5942 :Just a Math Problem (莫比乌斯)

    题意:略. 思路:问题转化为1到N,他们的满足mu[d]!=0的因子d个数.  即1到N的因子的莫比乌斯系数平方和. (经验:累加符号是累加的个数,我们把常数提到前面,然后用杜教筛累加个数即可. ht ...

  4. Java并发--Thread类详情

    以下是本文的目录大纲: 一.线程的状态 二.上下文切换 三.Thread类中的方法 转载原文链接:http://www.cnblogs.com/dolphin0520/p/3920357.html 一 ...

  5. 《selenium2 python 自动化测试实战》（21）——unittest单元测试框架解析

    unittest是展开自动化测试的基础——这个框架很重要! 我们先自己写一个测试类: 1.被测试类 Widthget.py: # coding: utf-8 class Widthget:    de ...

  6. Nginx配置（需要把nginx的根目录指向ftp上传文件的目录。）

    改成

  7. pycharm中import动态链接库pyd有错误

    有红色波浪线提示unsolved reference云云 去setting里面设置interpreters,  在path里面添加对应的路径, 是包含对应头文件的路径, 不要忘记右边的小按钮去Relo ...

  8. 谈谈JS中的高级函数

    博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...

  9. 揭晓UX（用户体验）最大的秘密

    我是佩恩和特勒的粉丝已经多年了.我第一次在现实中看到他们是在上个月,被他们的表演完全迷住了. 我真的很喜欢佩恩和特勒,他们经常“回拉窗帘”,并揭示他们是怎么完成他们的魔法.其他魔术师营造神秘主义和虚假 ...

  10. Synergy CORTEX M 启动流程

    1.启动文件“startup_S7G2.c” 中断向量表地址指针:“0xe000ed08” /* Vector table. */ BSP_DONT_REMOVE const exc_ptr_t __ ...