openLayers 3 之入门

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;
        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