Web百度离线地图开发

发布于: 2020 年 05 月 09 日
Web百度离线地图开发

百度Web离线地图WebGIS Demo,百度网页版离线地图。

需求情景

项目需要在世界地图的城市上进行标注,由于在内网上使用不能连接外网,所以需要开发离线地图功能。试过antv l7和echart,由于没有离线数据的原因不能满足需求(百度的世界地图的离线js不能缩放到城市级别,antv即便用了MapBox也会去调用amap的js)。网上找了很多WebGIS的方案研究了一下,后来因此用瓦片地图下载器下载了离线数据实现(这里用的太乐地图下载)。

参考

antv l7离线地图:https://l7.antv.vision/zh/docs/tutorial/map/offline 即便用了MapBox还是会去调用amap.com的js

echats离线地图数据包:https://github.com/apache/incubator-echarts/tree/master/map 世界地图只能到国家,不能在城市级别做标注

Html代码

<!--startprint-->
<div id="allmap" onselectstart="return false;" oncontextmenu="closePolyLine();enableDragging();"
style="height: 100%;position:relative;">
</div>
<!--endprint-->

Js代码

<script type="text/javascript" src="js/BaiduApi_2.0.js"></script>
<script src="baiduTilesInfo.js"></script>
<script type="text/javascript">
var defaultCursor = null;
var lineArray = new Array(); //线集合
var currLine = ""; //当前画线
var polyflag = false; //画线开关
var isFixedMap = false;
var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function (tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
var url = outputPath + zoom + '/' + x + '/' + y + format;
return url;
}
var tileMapType = new BMap.MapType('tileMapType', tileLayer, { minZoom: minLevel, maxZoom: maxLevel });
var map = new BMap.Map('allmap', { mapType: tileMapType });
//初始化鼠标
defaultCursor = map.getDefaultCursor();
// 定位到地图中心点
map.centerAndZoom(new BMap.Point(centX, centY), minLevel);
// 添加导航控件
map.addControl(new BMap.NavigationControl());
// 启用滚轮放大缩小
map.enableScrollWheelZoom();
map.enableContinuousZoom();
//启用键盘操作
map.enableKeyboard();
// 创建用户自定义地标
if (pointsStr != "") {
var points = pointsStr.split("##");
for (var i = 0; i < points.length; i++) {
var point = points[i];
var info = point.split('$');
addMarker(parseFloat(info[1]), parseFloat(info[0]), info[2], "images/marker_red_sprite.png", 23, 25);
}
}
//添加自定义Marker标注
function addMarker(lng, lat, markerInfo, iconCursor, cursorWidth, cursorHeight) {
if (cursorWidth == null) {
cursorWidth = 23;
}
if (cursorHeight == null) {
cursorHeight = 25;
}
var marker;
if (iconCursor != null) {
var myIcon = new BMap.Icon(iconCursor, new BMap.Size(cursorWidth, cursorHeight));
marker = new BMap.Marker(new BMap.Point(lng, lat), {
icon: myIcon
}); // 创建标注
} else {
marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建标注
}
map.addOverlay(marker); // 将标注添加到地图中
if (markerInfo != null) {
marker.addEventListener("click", function () {
alert(markerInfo);
});
}
}
</script>

截屏

源码目录结构

BaiduMapOfflineDemo
├── baidu_js ----- 代码目录
├ ├── js ------ js目录
├ ├── images -- 图片目录
├ ├── css ----- css目录
├── tiles -------- 瓦片资源

Demo源码

https://github.com/loamen/BaiduMapOfflineDemo

发布于: 2020 年 05 月 09 日 阅读数: 7
用户头像

玏佾

关注

还未添加个人签名 2013.06.26 加入

还未添加个人简介

评论

发布
暂无评论
Web百度离线地图开发