openlayers一：显示地图与鼠标地理坐标

openlayers两个好用的开源JS互动地图库之一，另一个是leaflet。

openlayers的特点是是大而全，自身包含绝大多数功能，文档好看。

leaflet是小而美，自身小，但支持扩展，好用扩展很多。

谷歌地图：

Google Maps​www.google.cn

从上面可以获取到谷歌地图瓦片图的连接为：

http://www.google.cn/maps/vt?lyrs=y@802&gl=cn&x={x}&y={y}&z={z}

那么要显示地图，只需：

this.tileLayer = new ol.layer.Tile({
     source: new ol.source.XYZ({
         attributions: new ol.Attribution({
         html: '作者: 愤怒的小明'
         }),
         url: 'http://www.google.cn/maps/vt?lyrs=y@802&gl=cn&x={x}&y={y}&z={z}'
     })
});
this.map.addLayer(this.tileLayer);
//地图默认是莫卡托投影，从经纬度转成莫卡托座标
var center = ol.proj.fromLonLat([113.2569444444, 23.1336111111]);
//设置地图中心
var view = this.map.getView();
view.setCenter(center);

 

鼠标漂浮显示当前位置：

var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: ol.coordinate.createStringXY(6),
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: '&nbsp'
});
this.map.addControl(mousePositionControl);

 

最终效果：

 

整体代码：

链接: https://pan.baidu.com/s/1WShiQh98EhtlNuw57jsEQA 密码: dfxz