openlayers學習筆記（十三）—異步調用JSON數據畫點、文字標註與連線

使用Openlayers 3實現調用本地json數據在地圖上添加點、文字標註以及連線。

生成底圖地圖

首先得有一個地圖作爲底圖，代碼如下：

let vectorSource = new ol.source.Vector({
            wrapX: false
        });
const rootLayer = new ol.layer.Tile({
     source: new ol.source.TileImage({
     url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
      }) //加載谷歌影像地圖
});
const vectorLayer = new ol.layer.Vector({
     source: vectorSource
})
const center = ol.proj.fromLonLat([91.29638423, 28.90222228], 'EPSG:3857');
const map = new ol.Map({
      target: 'map',
      renderer: 'canvas',
      layers: [rootLayer, vectorLayer],
      view: new ol.View({
      center: center,
      zoom: 9
   })
})

加載數據

使用ajax加載本地json數據

const url = './data/data.json';
        window.onload = () => {
            $.ajax({
                url: url,
                dataType: 'json',
                success: res => {
                    let features = res.features;
                    let coordsArray = features.map(obj => {
                    let pointTransform = ol.proj.transform([obj[0][0], obj[0][1]], 'EPSG:4326', 'EPSG:3857');
                        return pointTransform;
                    })
                    console.log(coordsArray);

                    for(let i = 0; i < features.length; i++) {
                        
                        let coords = features[i][0]; // 座標
                        let mark = features[i][1];
                        let pointId = mark + 'pointId'; //文字
                        let point = ol.proj.fromLonLat(coords);

                        // 多邊形封閉
                        let plygonfeature = new ol.Feature({
                            geometry: new ol.geom.Polygon([coordsArray])
                        });
                        plygonfeature.setStyle(new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'transparent'
                            }),
                            stroke: new ol.style.Stroke({
                                width: 2,
                                color: [255, 255, 0, 0.8]
                            }),
                        }))
                        vectorLayer.getSource().addFeature(plygonfeature);

                        // 文字標註
                        let anchorValue = new ol.Feature({
                            geometry: new ol.geom.Point(point)
                        })
                        anchorValue.setStyle(new ol.style.Style({
                            text: new ol.style.Text({
                                font: '15px Microsoft YaHei',
                                text: mark,
                                offset: [30, 0],
                                fill: new ol.style.Fill({
                                    color: '#fff'
                                })
                            }),
                            image: new ol.style.Circle({
                                radius: 2,
                                snapToPixel: false,
                                fill: new ol.style.Fill({
                                    color:'#333'
                                }),
                                stroke: new ol.style.Stroke({
                                    color: '#333'
                                })
                            })
                        })) 
                        vectorLayer.getSource().addFeature(anchorValue);
                    }
                }
            })
        }