实现百度离线地图个性地图3DJavaScript WebGL v1.0版

2020-11-20 走过路过 14263 23

百度WebGL版地图支持3D展示地图,设置百度地图个性样式。
方法:map.setMapStyleV2({styleJson: stylejson});

注意:下面所用到的所有地图数据及测试代码包,仅供研究学习之用,禁止商业用途。

实现百度离线地图步骤:
1. 获得百度个性化地图样式
百度官方的个性化地图编辑平台:http://lbsyun.baidu.com/index.php?title=open/custom
从上面平台获取JSON样式代码。

2. 下载离线代码测试包
下载地址: http://www.wmksj.com/script.html  下载  百度个性地图3D测试(WebGL V1.0).zip  
因加载瓦片需要使用http请求,所以该测试是基于Tomcat运行的。请自行安装java(jdk1.7或jdk1.8均可),然后配置JAVA_HOME环境变量。或者使用其它Web 服务(比如:node.js等)。
主目录,WebGL V1.0 tomcat/webapps/map/
目录及文件介绍:
index.html  demo展示的html文件
offlinemap/customstyle/mapstyle   个性样式文件
offlinemap/tiles_v   存放地图所使用的矢量瓦片

3. 下载mapstyle个性样式文件
下载地址: http://www.wmksj.com/map.html
主题下拉列表选择“个性地图 V2 (矢量瓦片)”,点击“编辑JSON样式”,在JSON样式代码框中输入前面得到的JSON样式代码。点击“更新”按钮,可以看到当前地图已应用该样式。


然后框选下载,选择“矩形”框选下载区域。右键点击“下载矢量地图”。


在弹出的矢量地图下载窗口中,点击“下载样式数据”。


将下载的文件将前面离线代码测试包的offlinemap/customstyle/mapstyle进行覆盖替换

4. 下载矢量瓦片数据
下载工具地址:http://www.wmksj.com/script.html  下载 百度地图瓦片下载工具1.4.0及以上版本。直接点击该工具目录的wmksj.exe即可打开。
根据操作提示粘贴下载坐标,下载格式选择“WebGL矢量”,取消勾选“包含名称”。
注意:默认“包含名称”是勾选的,一定要取消。
选择要下载的级别进行下载:


将下载的矢量数据将前面离线代码测试包的offlinemap/tiles_v的内容进行覆盖替换。

5. 修改demo展示的html文件
WebGL V1.0 tomcat/webapps/map/index.html
修改默认显示的中心和级别,根据前面下载工具的中心坐标和下载的矢量数据层级。
map.centerAndZoom(new BMap.Point(121.569552565,29.8061284436), 18);
设置个性样式,此处样式代码必须为前面下载mapstyle文件所用的json代码一致
var data = [{
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
        "visibility": "on",
        "color": "#091220ff"
    }
}];
map.setMapStyleV2({styleJson: data});
6. 启动和测试
启动tomcat:双击WebGL V1.0 tomcat/bin/startup.bat  会出现如下窗口:

出现Server startup in xxx ms字样时,表示启动成功。(注意:如果该窗口闪退,表示JAVA_HOME未配置正确)
然后在浏览器地址栏输入 http://localhost/map, 会看到如下成功显示WebGL 1.0版个性化离线地图。


百度WebGL API地址: http://lbsyun.baidu.com/index.php?title=jspopularGL

错误解决方法:
1.  如遇到百度个性地图无法显示建筑物名称和道路名称,请重新下载矢量瓦片,并且取消勾选“包含名称”,替换后显示正常。


相关推荐
全部评论 最新评论 最早评论
  • 举报
    段亿生 2024-08-27 19:22:03
    这个帖子是20年的,现在的很多方法是不适用的。很多方法使用现在都会报错了,得会自己改对应的API
  • 举报
    wwwa 2023-07-11 17:37:34
    Cannot read properties of undefined (reading 'length') at Proxy._updateFixedLabelCoords (bmapgl.min.js:1325:280) at Proxy._updateIndoorLabelsCoords (bmapgl.min.js:1314:386) at Proxy._generateEachLabelCanvas (bmapgl.min.js:1315:189) at Proxy.drawLabelsOnCanvas (bmapgl.min.js:1309:126) at iW.drawLabelsOnCanvas (bmapgl.min.js:1377:394) at hi.processLabelData (bmapgl.min.js:1285:37) 缩放到17层以上就报错了
  • 举报
    strugglerookie 2023-06-21 17:18:07
    为什么提示BMapGL.CustomOverlay is not a constructor
  • 举报
    hoytern 2023-03-15 19:11:58
    为什么我下载的矢量瓦片建筑物没有立体效果
  • 举报
    富裕 2022-06-30 10:00:10
    有人做过gl版跟twaver结合显示的吗?
  • 举报
    zhiranmo 2022-05-31 17:02:20
    我在地图上添加GroundOverlay的图片时(直接用的示例代码),旋转地图会导致图片显示异常,不知道是什么原因呢?
  • 举报
    dwyshnlxf 2022-05-27 15:59:50
    有个问题,如果我需要动态改变地图主题呢? 就比如我有个按钮切换AB两个主题,,默认又只有一个mapstyle可以替换
  • 举报
    alivn 2022-03-23 14:18:11
    离线地图逆地址解析无效
  • 举报
    杨鹏飞 2021-12-21 15:46:20
    我把风格替换为百度地图官网里的样式,有点不一样是什么情况啊,建筑物总是黑一块的
  • 举报
    sir 2021-12-02 18:27:32
    自定义地图后,特别卡顿是怎么回事?控制台报了一堆错

联系我们

微信公众号
打赏作者