因为项目需要，只有内网环境，没有外网环境，所以需要下载地图瓦片。
一.下载瓦片地图
这个可以自行在网上找一些地图瓦片下载器，下好的瓦片地图是分级的。大概如图这种类型。
二.在地图上显示标记
首先使用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);
效果图：
