openLayers 3 之入门

最新推荐文章于 2021-12-30 09:51:50 发布

weixin_30312557

最新推荐文章于 2021-12-30 09:51:50 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/s313139232/p/9039597.html

版权

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>

转载于:https://www.cnblogs.com/s313139232/p/9039597.html