百度离线地图示例之十一:混合图(街道图、卫星图)实现_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);		//设置默认显示卫星混合图	
     }
  }

地图实现效果展示:
在这里插入图片描述

系列文章后续一直有进行更新,有不完善的地方,可加微信一起交流:
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaoge_586/article/details/115695102

智能推荐

盲图像超分辨率重建 ( CVPR,2022) (Pytorch)(附代码)_盲超分辨率重建-程序员宅基地

文章浏览阅读1.1w次,点赞33次,收藏141次。基于噪声和核函数的精细退化盲图像超分辨率重建,这篇测评文章用心写了一个下午,个人觉得作为一个初学者入门教程,再合适不过了,敬请查阅_盲超分辨率重建

Executors创建的4种线程池的使用-程序员宅基地

文章浏览阅读74次。为什么80%的码农都做不了架构师?>>> ..._private executor 建立的线程池

android 使用shell模拟触屏_Android随笔之——用shell脚本模拟用户按键、触摸操作...-程序员宅基地

文章浏览阅读720次。之前写过两篇关于Android中模拟用户操作的博客(其实用一篇是转载的),现在就来讲讲用shell脚本来模拟用户按键操作。本次的目标是用shell脚本打开微信并在其搜索框中搜索相关内容。本文的模拟功能主要是用adb的input命令来实现,如果你adb的环境变量配置正确的话,在cmd中输入adb shell input就可以看见input的用法了。usage: input ...input te..._androd shell操作ui

Java之集合常见的笔试题_空题hashmap<integer,string> hh=new hashmap<integer, -程序员宅基地

文章浏览阅读961次,点赞2次,收藏4次。一、请说明Map接口和Collection接口的区别简答如下: 1)都是集合类的接口,但是Collection是存储一组数据的,比如Set,List,Queue这些接口都是继承Collection的。而Map是按键值对存储的,有key和value,关注点在key的使用 2)Collection中存储了一组对象,而Map存储关键字/值对。 在Map对象中,每一个关键字最多有一个关联的值。 ..._空题hashmap hh=new hashmap();hh.put(202

NFS实现系统启动时延迟挂载-程序员宅基地

文章浏览阅读1.2k次。nfs客户端1. vi /etc/fstab 加入一下选项_netdev10.10.10.1:/vol1/fs1 /data nfs defaults,_netdev 0 02. service netfs start; chkconfig netfs onthat's it.Now your mount boot process should look somethin..._fstab 延迟挂载

一文读懂微服务编排利器—Zeebe-程序员宅基地

文章浏览阅读1.8k次,点赞3次,收藏18次。导语 | 微服务架构的一大核心是把大的复杂的业务系统拆分成高内聚的微服务,每个服务负责相对独立的逻辑。服务拆分的好处无需赘述,但是要实现业务价值,不是看单个服务的能力,而是要协调所有服务保..._zeebe 失败任务重复创建job新实例

随便推点

Oracle11g数据库详细安装步骤_oracle database 11g软件没有典型安装-程序员宅基地

文章浏览阅读1.9k次,点赞4次,收藏28次。一,Oracle数据库安装包下载1.从Oracle官网下载所需的数据库安装包【下载需要注册登录Oracle账户】http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html2.此处有下载好的Oracle Database 11g Release 2 百度云网盘 提取码:ze2z;【此..._oracle database 11g软件没有典型安装

docker、docker-compose环境变量以及传参_docker-compose env参数传递-程序员宅基地

文章浏览阅读5.6k次。docker中传参可用ARG接收参数#构建镜像docker build -f /manage/src/main/docker/Dockerfile -t manage:1.0 --build-arg server_name= --build-arg server_version=1.0 /manage/targetdockerFile# 该镜像需要依赖的基础镜像FROM java:8#传参ARG server_nameARG server_version#环境变量ENV jar_docker-compose env参数传递

Linq 基本语法_linq语法介绍-程序员宅基地

文章浏览阅读1.2k次。以下都是转载内容1.简单的linq语法 //1 var ss = from r in db.Am_recProScheme select r; //2 var ss1 = db.Am_recProScheme; //3 _linq语法介绍

springcloudgateway+oauth2实现权限控制_springcloudoauth2权限控制-程序员宅基地

文章浏览阅读1.2w次,点赞7次,收藏34次。文章目录鉴权服务基础配置鉴权配置网关服务基础配置网关过滤器配置权限校验过滤器配置接口调试前端适配鉴权服务OAuth 2.0 的四种方式OAuth2实现分析基础配置新建house-oauth模块,依赖oauth2。 <dependencies> <dependency> <groupId>com.babyjuan</groupId> <artifactId>house-common</art_springcloudoauth2权限控制

广州大学c语言期末考试题,广州大学C语言程序的设计期末考试卷含答案(2)-程序员宅基地

文章浏览阅读243次。广州大学C语言程序的设计期末考试卷含答案(2) (9页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!14.9 积分. . . . .院、系领导审批并签名 A 卷参考答案广州大学 2009-2010 学年第 1 学期考试卷课程 程序设计 1 考试形式(闭卷,考试)学院 数学与信息 系 专业 信安,计 班级 学号 姓名_ 题次一二三四五六七八九十总分评卷人..._广州大学c语言题库

画出lightGBM的特征重要性并排序_lightgbm特征重要性排序-程序员宅基地

文章浏览阅读4.2k次。df = pd.DataFrame()df['feature name'] = data_df.drop(["label"], axis=1).columns #data_df为特征数据集df['importance'] = clf.feature_importance()df.sort_values(by='importance',inplace=True, ascending=False)df2 = df.head(50)df2.plot.barh(x = 'feature name',._lightgbm特征重要性排序