WebGIS开发之用openlayers加载离线百度地图

优速盾-小U • 2025年7月6日 17:33 • 网站百科 • 阅读 36

因为项目需要，只有内网环境，没有外网环境，所以需要下载地图瓦片。

一.下载瓦片地图

这个可以自行在网上找一些地图瓦片下载器，下好的瓦片地图是分级的。大概如图这种类型。

WebGIS开发之用openlayers加载离线百度地图

二.在地图上显示标记

首先使用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);