因为项目需要，只有内网环境，没有外网环境，所以需要下载地图瓦片。
一.下载瓦片地图
这个可以自行在网上找一些地图瓦片下载器，下好的瓦片地图是分级的。大概如图这种类型。
二.在地图上显示标记
首先使用openlayers加载离线地图瓦片。这里我用的nginx弄了给静态图片服务器。
// 自定义分辨率和瓦片坐标系var resolutions = [];var maxZoom = 18;// 计算百度使用的分辨率for (var i = 0; i <= maxZoom; i++) {resolutions[i] = Math.pow(2, maxZoom - i);}var tilegrid = new ol.tilegrid.TileGrid({origin: [0, 0],resolutions: resolutions // 设置分辨率 });// 创建百度地图的数据源var baiduSource = new ol.source.TileImage({projection: 'EPSG:3857',tileGrid: tilegrid,tileUrlFunction: function (tileCoord, pixelRatio, proj) {var z = tileCoord[0];var x = tileCoord[1];var y = tileCoord[2];// 百度瓦片服务url将负数使用M前缀来标识if (x < 0) {x = -x;}if (y < 0) {y = -y;}return "http://localhost:8008/123456789/" + z + "/" + x + "/" + y + ".png";}});// 百度地图层var baiduMapLayer2 = new ol.layer.Tile({source: baiduSource});// 创建地图var map =new ol.Map({layers: [baiduMapLayer2],view: new ol.View({// 设置成都为地图中心center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),/*extent: [53, 4, 73 ,135],*/zoom: 6,minZoom:1,maxZoom:10}),target: 'mainMap'});
创建矢量图层，获取数据库中的所有点，用一个小图标在地图上标记出来。
// 百度地图层var baiduMapLayer2 = new ol.layer.Tile({source: baiduSource});// 创建地图var map =new ol.Map({layers: [baiduMapLayer2],view: new ol.View({// 设置成都为地图中心center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),/*extent: [53, 4, 73 ,135],*/zoom: 6,minZoom:1,maxZoom:10}),target: 'mainMap'});//创建图标样式var iconStyle = new ol.style.Style({image: new ol.style.Icon({opacity: 0.75,src: "http://localhost:8008/tubiao.png"}),});var vectorSource = new ol.source.Vector({});$.ajax({url: "/map/getAllMap",type: "get",dataType: "json",data: {"page": 1, "rows": 100},success: function (data) {$(data).each(function (index, item) {markp(item.lng,item.lat);});},error: function () {}})function markp(lng,lat) {//创建图标特性var iconFeature = new ol.Feature({geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(lng), parseFloat(lat)])),name: "my Icon"});//将图标特性添加进矢量中 vectorSource.addFeature(iconFeature);}//创建矢量层var vectorLayer = new ol.layer.Vector({source: vectorSource,style: iconStyle});//添加进map层map.addLayer(vectorLayer);
效果图：
