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. Verilog乘法器

    乘法器,不能用乘号直接表示,略坑呀 坑归坑,做还是要做的 思路:首先乘法分为有符号乘与无符号乘,所以建立两个module分别运算有符号与无符号.然后在总module中用case语句判断输出应赋的值. ...

  2. Intro to DBSCAN

    DBSCAN Density-Based Spatial Clustering of Application with Noise It can discover cluster of arbitra ...

  3. Java [Leetcode 387]First Unique Character in a String

    题目描述: Given a string, find the first non-repeating character in it and return it's index. If it does ...

  4. Python递归输出字典所有不同深度的路径

    应用场景 假设有这样一个字典结构test_dict = {'a':{'b':{'c':1}},'d':2},test_dict其实可以看作是一种树状结构,其中每个叶子节点深度不一定相同,如果我们希望输 ...

  5. BZOJ3325 [Scoi2013]密码【Manacher】【构造】【贪心】

    Description Fish是一条生活在海里的鱼.有一天他很无聊,就到处去寻宝.他找到了位于海底深处的宫殿,但是一扇带有密码锁的大门却阻止了他的前进.通过翻阅古籍,Fish 得知了这个密码的相关信 ...

  6. 【Codeforces】Round #488 (Div. 2) 总结

    [Codeforces]Round #488 (Div. 2) 总结 比较僵硬的一场,还是手速不够,但是作为正式成为竞赛生的第一场比赛还是比较圆满的,起码没有FST,A掉ABCD,总排82,怒涨rat ...

  7. Python编码规范和Python风格规范

    一.原因 1.长期的工作中,发现大多数程序员的代码可读性差 2.不同的程序员之间的协作很重要,代码可读性必须很好 3.版本升级时,要基于源码升级 4.不友好的代码会影响python的执行效率 二.基于 ...

  8. [转]50个很棒的Python模块

    转自:http://www.cnblogs.com/foxhengxing/archive/2011/07/29/2120897.html Python具有强大的扩展能力,以下列出了50个很棒的Pyt ...

  9. .OPF文件剖析

    OPF文档是epub电子书的核心文件,且是一个标准的XML文件,依据OPF规范,主要由五个部分组成: 1.<metadata>,元数据信息,由两个子元素组成: <dc-metadat ...

  10. k8s helm 私服chartmuseum minio s3 存储配置

    1. 安装minio 使用docker 安装 参考项目 https://github.com/rongfengliang/mino-thumbor-openresty 备注: 因为是一个集成项目可能会 ...