資訊專(zhuān)欄INFORMATION COLUMN
摘要：官網(wǎng)提供了很多實(shí)例供參考學(xué)習(xí)，但是最新官網(wǎng)實(shí)例是基于版本以及語(yǔ)言開(kāi)發(fā)，而行業(yè)內(nèi)大部都用的版本較多，這與市場(chǎng)存在一個(gè)新老版本開(kāi)發(fā)的銜接問(wèn)題。
Openlayers官網(wǎng)提供了很多實(shí)例供GISer參考學(xué)習(xí)，但是最新官網(wǎng)實(shí)例是基于Openlayers5.3版本以及ECMAScript6語(yǔ)言開(kāi)發(fā)，而行業(yè)內(nèi)大部都用的openlayers3-4版本較多，這與市場(chǎng)存在一個(gè)新老版本開(kāi)發(fā)的銜接問(wèn)題。GIS開(kāi)發(fā)初學(xué)者往往無(wú)從下手，因此，這里以snap interaction為例分享線下實(shí)現(xiàn)的過(guò)程，步驟如下：
1.css、js文件引用修改
官網(wǎng)實(shí)例引用文件主要基于官網(wǎng)的庫(kù)文件，而且版本不一樣，類(lèi)似如下： 將上述代碼修改為本地或自身版本（3.11.1）文件，如下：
2.import語(yǔ)句刪除
刪掉官網(wǎng)實(shí)例中的import語(yǔ)句，但是要注意組件分布位置。刪掉如下語(yǔ)句：
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等（注意，實(shí)例中不僅僅只有這兩句組件代碼，要全面檢查或通過(guò)瀏覽器監(jiān)測(cè)）。
原代碼：
var raster = new TileLayer({
source: new OSM()
});
修改后：
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
最后，將我修改的全部代碼分享如下（親測(cè)可用）：