写点什么

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 日阅读数: 848
用户头像

玏佾

关注

还未添加个人签名 2013.06.26 加入

还未添加个人简介

评论

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