openlayers study notes (13) - asynchronous call JSON data points painting, text annotation and connectivity

Use Openlayers 3implementation calls local jsondata add points on the map, text annotation and connection.

Generating base map map

First of all have to have a map as a base map, as follows:

= vectorSource the let new new ol.source.Vector ({ 
            wrapX: to false 
        }); 
const rootLayer = new new ol.layer.Tile ({ 
     Source: new new ol.source.TileImage ({ 
     URL: 'http://mt2.google.cn / VT / lyrs = Y & HL = ZH-the CN & GL = the CN & the src = App & X = {X} & Y = {Y} & Z = {Z} & S = G ' 
      }) // load the Google image map 
}); 
const vectorLayer = new new ol.layer .Vector ({ 
     Source: vectorSource 
}) 
const Center = ol.proj.fromLonLat ([91.29638423, 28.90222228], 'the EPSG: 3857' ); 
const Map = new new  ol.Map ({
      target:'map',
      renderer: 'canvas',
      layers: [rootLayer, vectorLayer],
      view: new ol.View({
      center: center,
      zoom: 9
   })
})

Download Data

Use ajaxload local jsondata

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);
                    }
                }
            })
        }