百度离线地图示例之十一：混合图(街道图、卫星图)实现_qt 离线百度地图支不支持混合图-程序员宅基地
技术标签： 百度离线地图 vue js javascript
前言介绍：
主要是基于v3.0的API版本进行的离线，纯内网可操作，基本上实现了现有90%以上的功能点，能兼容jpg和png格式的瓦片图层，实现了原生和基于Vue两个版本（包含常用的55个示例），实现的功能点概要如下：
地图示例：
地图展示
同时加载两个地图
设置地图最大及最
小级别移动地图
缩放地图
拖拽地图
设置地图显示范围
获取地图显示范围
测距
地图控件：
工具条、比例尺控件 地图类型
缩略图控件
添加版权控件
添加自定义控件
覆盖物示例：
添加/删除覆盖物
折线上添加方向箭头
添加动画标注点
设置点的新图标
设置点是否可拖拽 设置线、面可编辑
设置覆盖物的显示与隐藏
文本标注
带文字标签的覆盖物
获取覆盖物的信息
添加多个标注点
从多个点删除指定点
加载闪烁点
加载海量点 添加弧线
画椭圆
添加自定义覆盖物
点聚合
添加/删除地面叠加层
热力图功能示例
矢量图
添加自定义控件
信息窗口示例：
纯文本的信息窗口
添加复杂内容的信息窗口
给多个点添加信息窗口
获取信息窗口的信息
右键菜单示例：
给地图添加右键菜单
给覆盖物添加右键菜单
鼠标操作示例
设置地图默认的鼠标样式
鼠标滚轮缩放地图
鼠标拖拽地图
鼠标测距
单击获取点击的经纬度
鼠标绘制工具
添加层示例：
添加清华校园微观图
自定义网格
事件示例
图块加载完毕
地图单击事件
给覆盖物注册事件
传递事件参数
为多个点注册单击事件
注销事件
除了离线了官方API外，还对一些操作工具类进行了离线（总计11个工具），比如：
Heatmap
作用：热力图
SearchInfoWindow
作用：百度地图样式”的信息窗口工具。该工具为用户提供带搜索框的信息窗口，该窗口内容可自由定制多种风格。同时，用户可以将信息窗口标题以短信方式发送到手机上。
MarkerClusterer
作用：多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢，且产生覆盖现象的问题。
RectangleZoom
作用：区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。
TextIconOverlay
作用：自定义覆盖物工具。用户可以使用该工具在地图上添加文字和图标样式的覆盖物。
LuShu
作用：路书，轨迹运动工具。此工具用以实现marker沿路线运动，并有暂停等功能。
GeoUtils
作用：几何运算工具。此工具提供判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。
DistanceTool
作用：测距。
DrawingManager
作用：矢量图绘制。
代码示例实现：
html引用示例代码如下：
1、百度地图离线API下载地址
2、百度地图离线工具类集合下载地址
可以看出全部是离线引用，当然哪些工具类可以在组件内用的时候再引用也可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>百度离线地图</title>
<!-- 百度地图3.0 API Begin -->
<script src="static/offlineMapLib/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/offlineMapLib/map3.0_init.js"></script>
<script type="text/javascript" src="static/offlineMapLib/map3.0.js"></script>
<script type="text/javascript" src="static/offlineMapLib/layer.js"></script>
<script type="text/javascript" src="static/offlineMapLib/demo.js"></script>
<!-- 热力图 -->
<script type="text/javascript" src="static/offlineMapLib/library/Heatmap_min.js"></script>
<!-- 画弧线 -->
<script type="text/javascript" src="static/offlineMapLib/library/CurveLine.min.js"></script>
<!-- 点聚合 -->
<script type="text/javascript" src="static/offlineMapLib/library/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="static/offlineMapLib/library/MarkerClusterer_min.js"></script>
<!-- 测距 -->
<script type="text/javascript" src="static/offlineMapLib/library/DistanceTool_min.js"></script>
<!-- 鼠标绘制 -->
<link rel="stylesheet" href="static/offlineMapLib/library/DrawingManager_min.css" />
<script type="text/javascript" src="static/offlineMapLib/library/DrawingManager_min.css"></script>
<!-- 百度地图3.0 End -->
</head>
<body>
<div id="app"></div>
</body>
</html>
组件内示例代码如下：
<!-- 为多个点注册单击事件 -->
<template>
<div style="height:100%;width:100%">
<div id="allmap54"></div>
</div>
</template>
methods: {
initMap() {
// 百度地图API功能
// 百度地图API功能
var map = new BMap.Map("allmap54"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapType(BMAP_HYBRID_MAP); //设置默认显示卫星混合图
}
}
地图实现效果展示：
系列文章后续一直有进行更新，有不完善的地方，可加微信一起交流：
智能推荐
使用IPSET屏蔽美国IP_ipset封禁国外ip-程序员宅基地
文章浏览阅读387次，点赞6次，收藏8次。最近被美国IP盯上了，瞄的不间断攻击ADD-TO-CART页面。记录下用IPSET屏蔽过程。执行如下脚本，将IP地址段中的记录转换为Ipset指令，保存在。_ipset封禁国外ip
nodejs的字符串操作模块_nodejs 字符串操作模块-程序员宅基地
文章浏览阅读3.2w次。nodejs字符串操作简介需要引入querystring对象，querystring对象的方法有stringifyquerystring.stringify(“对象”，“分隔符”，“分配符”)，将一个json对象，转为字符串，通过指定的分隔符，以及分配符 具体代码：var querystring = require('querystring');var result = querystring.s_nodejs 字符串操作模块
李宏毅机器学习笔记第1周-机器学习基本概念_anomaly compression-程序员宅基地
文章浏览阅读855次。机器学习基本概念_anomaly compression
MD5碰撞-程序员宅基地
文章浏览阅读9.4k次，点赞29次，收藏109次。在CTF中可以说是经常碰到md5加密了，一般都是进行强比较抑或是弱比较，考法非常多，但是万变不离其中。只要我们掌握了原理，一切问题便迎刃而解了。文章首发于我的博客，格式可能比较清晰，有兴趣了解CTF中MD5碰撞的伙伴可以移步查看。_md5碰撞
普里姆算法c语言(详细解读）_c语言普里姆算法-程序员宅基地
文章浏览阅读854次，点赞5次，收藏12次。找到与这个系统邻接的边（0，1），（5，4），比较两者的权值，容易发现权值最小的为25，因此加入边（5，4），同时加入结点4和边（5，4）。4.将0，5，4，3以及相关的边看成一个整体，与其邻接的边有（0，1）28，（4，6）24，（3，6）18，（3，2）12，四个边中权值最小的边是（3，2），所以加入结点2以及边（3，2）。5.与4中所构成的整体邻接的边有（0，1）28，（4，6）24，（3，6）18，（2，1）16，四者中权值最小的边为（2，1），所以加入结点1以及边（2，1）。_c语言普里姆算法
nohub 和 & 在linux上不间断后台运行程序-程序员宅基地
文章浏览阅读3.1k次，点赞2次，收藏15次。长时间在服务器上运行深度学习代码，使用nohub 命令行 & 可以让代码不间断在后台运行_nohub
随便推点
docker配置国内镜像源_docker国内镜像源-程序员宅基地
文章浏览阅读3.3w次，点赞9次，收藏25次。刚开始学习docker，发现下载镜像非常的慢。如果不经过，docker的镜像下载都来源于国外，因此需要配置国内的镜像源。Docker中国区官方镜像。_docker国内镜像源
Unity中怎么播放视频_unity 播放视频-程序员宅基地
文章浏览阅读1.9w次，点赞40次，收藏209次。一.首先在场景中新建UI中的Raw Image可以按住Alt再点击下图红色箭头所示将Raw Image铺满游戏全屏(也可以自己调整大小)二.给Raw Image添加Video Player组件三.在Assets或者自己想要的文件夹中创建Render Texture四.将准备好的视频(这里用到的视频格式是mp4)拖入项目中并做如下修改这里我把新建的Render Texture命名为2，拖入的视频也命名为2(随便命的，不要在意)这里我们看到这个Render Te..._unity 播放视频
使用BOOTICE 恢复系统启动项_bootice保存后没用-程序员宅基地
文章浏览阅读9.7k次，点赞2次，收藏9次。使用BOOTICE 恢复系统启动项我在安装deepin 系统的时候，经常遇到重启进不去系统，每次重启都会进入windows 系统，这让我感到特别头疼，试了好多次都不成功，有些情况是，成功后再次重启又回到了windows系统。后来终于在PE中利用一款叫做BOOT ICE的工具成功解决。BOOTICE— 引导扇区维护工具简介BOOTICE 是一个启动相关的维护的小工具，主要用于安装、修复、备份和恢复磁盘_bootice保存后没用
文本分类与SVM_svm分类-程序员宅基地
文章浏览阅读9.5w次，点赞54次，收藏202次。之前做过一些文本挖掘的项目，比如网页分类、微博情感分析、用户评论挖掘，也曾经将libsvm进行包装，写了一个文本分类的开软软件Tmsvm。所以这里将之前做过一些关于文本分类的东西整理总结一下。1 基础知识1. 1 样本整理文本分类属于有监督的学习，所以需要整理样本。根据业务需求，确定样本标签与数目，其中样本标签多为整数。在svm中其中如果为二分类，样本标签一般会设定为-1和_svm分类
力扣——206.反转链表_力扣链表反转-程序员宅基地
文章浏览阅读141次。题目python代码方法一：利用新列表，创建新的链表# Definition for singly-linked list.# class ListNode(object):# def __init__(self, val=0, next=None):# self.val = val# self.next = nextclass Solution(object): def reverseList(self, head): ""_力扣链表反转
如何解决深度冲突（Z-fighting），画面闪烁的问题-程序员宅基地
文章浏览阅读3.6k次，点赞3次，收藏6次。参考：OpenGL教程：深度测试深度冲突一个很常见的视觉错误会在两个平面或者三角形非常紧密地平行排列在一起时会发生，深度缓冲没有足够的精度来决定两个形状哪个在前面。结果就是这两个形状不断地在切换前后顺序，这会导致很奇怪的花纹。这个现象叫做深度冲突(Z-fighting)，因为它看起来像是这两个形状在争夺(Fight)谁该处于顶端。防止深度冲突第一个也是最重要的技巧是永远不要把多个物体摆得太靠近，以至于它们的一些三角形会重叠。通过在两个物体之间设置一个用户无法注意到的偏移值，你可以完全避免这两个物体之_深度冲突