openlayers开始​​​​​​​、openlayers官网示例的本地运行、vue修改openlayers的示例

 

官网地址

地址：https://openlayers.org/

示例：https://openlayers.org/en/latest/examples/#

API：https://openlayers.org/en/latest/apidoc/

一、openlayers开始

初始化页面，您将需要三件事：

1. 引入css和js

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
   <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

    

2. 创建地图容器

   <div id="map" class="map"></div>

3. 用JavaScript创建OpenLayersMap对象

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