OpenLayers繪製地圖，無需外網，內網訪問，提升安全性。

1. 首先引入ol ,npm i --save ol

  

2. 建立地圖

一個地圖初步就這樣完成了。

3. 怎麼與後臺進行交互？

具體參考文檔：http://weilin.me/ol3-primer/ch12/12-01-01.html

而後就是配置：

其中的view center 設置就是顯示某一局部的中心，就是限制顯示局部區域。

4. 自定義加載圖標

先定義map，而後把後臺數據好比圖片，經緯度等放入this.nodeData.set（name,value），

而後在其餘地方就經過this.nodeData.get（name）能拿到feature。

5. 地圖單擊事件

let feature = map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
             return feature;
     });
這段代碼放到點擊事件內能夠轉換能夠拿到當前feature的經緯度，圖片類型，也能夠拿到當前feature的id. 能夠進行路由跳轉等。

6. 封裝feature圖標

沒有 anchor，圖標將自動處於地理位置的中心，是一個偏移量的api.

anchor.setStyle 動態修改icon.     this.layer.addFeature(anchor);

7. 地圖連線和報警

 

let line = new Feature({
                    id: id,
                    geometry: new LineString(
                        [[sLongitude, sLatitude], [eLongitude, eLatitude]])
                });
                line.setStyle(new Style({
                    text: new Text({
                        // 默認這個字體，能夠修改爲其餘的，格式和css的字體設置同樣
                        font: '16px sans-serif',
                        text: lineName,
                        placement: 'line',
                        textBaseline: 'top',
                        fill: new Fill({
                            color: color ? color : 'blue'
                        })
                    }),
                    stroke: new Stroke({
                        width: color === 'red' ? 2 : 1,
                        color: color ? color : 'blue'
                    })
                }));
                // 添加到以前的建立的layer中去
                this.layer.addFeature(line);

 詳細請參考此中文文檔： http://weilin.me/ol3-primer/index.html