openLayers 3 之入門

時間 2020-12-08

標籤 javascript css html java web echarts 框架 spa code 欄目 JavaScript 简体版

原文原文鏈接

openLayers 3 之入門javascript

openlayer是web GIS客戶端開發提供的javascript類庫，也是開源框架，能夠加載本地數據進行展現地圖css

1.下載相關引用的js、css文件html

2.相似於echarts，建立一個容器div，並給予寬高java

3.編寫openlayers初始化地圖方法web

4.在網頁上顯示echarts

示例代碼：框架

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