openlayers tips

1.最简单的实践，加载OSM地图数据

var map = new Map({

            target: 'map',

            layers: [

              new TileLayer({

                source: new OSM()

              })

            ],

            view: new View({

              center: proj.fromLonLat([37.41, 8.82]),

              zoom: 4

            })

          });

 

2.地图上点击的时候获取当前的坐标值

        map.on('click',(e)=>{

            console.log(e.coordinate);

        });

 

3.指定位置添加一个点

var pointFeature = new Feature(new Point([0, 0]));

        var features = [];

        features.push(pointFeature);

        var layer = new VectorLayer({

            source: new VectorSource({

                features: features,

            }),

　　style: new Style({

                image: new Icon({

                    src: './assets/common/images/map/container.png',//用图片展示点

                    scale: 0.05,//表示图标的缩放

                    //offset: [0, 10],  //这里面还有一些其他的属性可以设置比如设置点的偏移，旋转等，具体属性可以查看官网文档

                })

            })

        });

        map.addLayer(layer);

上面点的style是用一张图片来表示。如果要直接用一个正常的点来表示的话，style设置为：

new Style({
     image: new Circle({
       radius: width * 2,//半径
       fill: new Fill({//颜色
         color: blue
       })
   })