Openlayers官网实例线下实现的解决方法

Openlayers官网提供了很多实例供GISer参考学习，但是最新官网实例是基于Openlayers5.3版本以及ECMAScript6语言开发，而行业内大部都用的openlayers3-4版本较多，这与市场存在一个新老版本开发的衔接问题。GIS开发初学者往往无从下手，因此，这里以snap interaction为例分享线下实现的过程，步骤如下：

1.css、js文件引用修改

官网实例引用文件主要基于官网的库文件，而且版本不一样，类似如下：



将上述代码修改为本地或自身版本（3.11.1）文件，如下：

2.import语句删除
删掉官网实例中的import语句，但是要注意组件分布位置。删掉如下语句：

  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import {Draw, Modify, Select, Snap} from 'ol/interaction.js';
  import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
  import {OSM, Vector as VectorSource} from 'ol/source.js';
  import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js

3.修改组件位置
修改组件如TileLayer、OSM等，改为ol.layer.Tile、ol.source.OSM等（注意，实例中不仅仅只有这两句组件代码，要全面检查或通过浏览器监测）。
原代码：

  var raster = new TileLayer({
    source: new OSM()
  });

修改后：

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

最后，将我修改的全部代码分享如下（亲测可用）：

http://www.w3.org/1999/xhtml&...;>

  

    
      
      Draw  
    
  
  

    
      
      Modify  
    
  
  

    Draw type  
    
      Point
      LineString
      Polygon
      Circle
    
  

---

转载请注明出处——哦哟哟哟哟哟哟哟哟哟