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. vue-route(三)后台管理路由配置

    在一个后台管理的项目中,关于路由的配置,     我们需要实现的一个布局是header,aside,main三部分,后期还可能添加footer部分,实现的需求是请求数据时,局部的刷新,这个时候我们就需 ...

  2. Ubuntu下快速建立跨多个平台的cocos2d-x项目

    原文:http://www.bennyxu.com/archives/462 这里之讲一点就是如何快速的建立起cocos2d-x项目,同时linux平台的优越性也充分的暴露无遗. 这里默认您已经成功的 ...

  3. BZOJ - 4318: OSU! (期望DP&Attention)

    Description osu 是一款群众喜闻乐见的休闲软件.  我们可以把osu的规则简化与改编成以下的样子:  一共有n次操作,每次操作只有成功与失败之分,成功对应1,失败对应0,n次操作对应为1 ...

  4. LOJ2425 NOIP2015 运输计划 【二分+LCA+树上差分】*

    LOJ2425 NOIP2015 运输计划 LINK 题意:给你一颗树,可以将任意一条边的权值变成0,然后求m条路径的长度的最小值 思路: 先二分最后的距离ans,然后我们把路程大于ans的所有路径拿 ...

  5. flask第十七篇——模板【1】

    从这一节开始我们就正式进入flask一个重要的模块——模板了. 我们平时看的知乎平台就是Python开发的,可以看到他的很多页面布局都是一样的,比如你现在搜“如何自学Python”,去知乎看他的页面是 ...

  6. [UOJ310][UNR #2]黎明前的巧克力

    uoj description 给你\(n\)个数,求从中选出两个交集为空的非空集合异或和相等的方案数模\(998244353\). sol 其实也就是选出一个集合满足异或和为\(0\),然后把它分成 ...

  7. {Reship}{Socket}C#简单应用

    This article come frome here ======================================================================= ...

  8. pandas 的Series 里经常会出现DatetimeIndex这个类

    DatetimeIndex 的操作还是值得研究一下的. 参考其用法, http://pandas.pydata.org/pandas-docs/stable/generated/pandas.Date ...

  9. 【转】Linux export 命令

    原文网址:http://mymobile.iteye.com/blog/1407601 Linux export 命令 功能说明: 设置或显示环境变量.(比如我们要用一个命令,但这个命令的执行文件不在 ...

  10. Fuel9.0安装openstack过程中所踩过的坑2018最新版

    坑一,安装好后,无法访问Web UI画面 访问https//10.20.0.2:8443无法打开UI画面.首先我们不管以后的步骤,打不开是很不爽的. 解决方法:把下面网卡1,网卡2,网卡3的界面名称都 ...