百度离线地图示例之三：矢量图

最新推荐文章于 2024-07-06 00:01:57 发布
最新推荐文章于 2024-07-06 00:01:57 发布
阅读量3.5k 收藏 10
点赞数 6
分类专栏： 百度离线地图 文章标签： javascript html vue.js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoge_586/article/details/113849404
版权
前言介绍：

主要是基于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="allmap34"></div>
    <div id="control">
      <input type="button" @click="hide()" value="隐藏" />
      <input type="button" @click="show()" value="显示" />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      mapObj: {
          map:{},
          point:{},
        vectorWARNING: {},
        vectorPlane: {},
        vectorFCArrow: {},
        vectorBCArrow: {},
        vectorFOArrow: {},
        vectorBOArrow: {},
        vectorStar: {},
        vectorCLOCK: {},
        vectorMarker: {},
        vectorPeoplePath: {},
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initMap() {
      this.mapObj.map = new BMap.Map("allmap34");
      this.mapObj.point = new BMap.Point(116.473008, 39.916605);
      this.mapObj.map.centerAndZoom(this.mapObj.point, 16);
      this.mapObj.map.enableScrollWheelZoom(true);

      //设置marker图标为人字形
      this.mapObj.vectorPeoplePath = new BMap.Marker(this.mapObj.point, {
        // 设置自定义path路径25325l99
        icon: new BMap.Symbol(
          "m0.5,48.67105l106.55963,0m-53.03642,45.73853l52.06349,51.09042m-52.06349,-51.57716l-48.65731,51.57716m48.41391,-112.39955l0,60.82238m16.17517,-77.24814c0,8.93415 -7.24208,16.17461 -16.17517,16.17461c-8.93307,0 -16.17464,-7.24046 -16.17464,-16.17461c0,-8.93309 7.24156,-16.1747 16.17464,-16.1747c8.93309,0 16.17517,7.24161 16.17517,16.1747z",
          {
            rotation: 0, //顺时针旋转40度
            fillColor: "green",
            fillOpacity: 0.8,
            strokeColor: "#555",
            strokeWeight: 3, //线宽
          }
        ),
      });

      this.mapObj.vectorFCArrow = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng - 0.01, this.mapObj.point.lat),
        {
          // 初始化方向向上的闭合箭头
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
            scale: 5,
            strokeWeight: 1,
            rotation: 0, //顺时针旋转30度
            fillColor: "red",
            fillOpacity: 0.8,
          }),
        }
      );

      this.mapObj.vectorBCArrow = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng + 0.02, this.mapObj.point.lat),
        {
          // 初始化方向向下的闭合箭头
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW, {
            scale: 5,
            strokeWeight: 1,
            rotation: 180,
            fillColor: "gold",
            fillOpacity: 0.8,
          }),
        }
      );

      this.mapObj.vectorFOArrow = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng + 0.03, this.mapObj.point.lat),
        {
          //  初始化方向向上的开放式箭头
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
            scale: 5,
            strokeWeight: 1,
            rotation: 0,
            fillColor: "pink",
            fillOpacity: 0.8,
          }),
        }
      );

      this.mapObj.vectorBOArrow = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng + 0.04, this.mapObj.point.lat),
        {
          // 初始化方向向下的开放式箭头
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            scale: 5,
            strokeWeight: 1,
            rotation: 90,
            fillColor: "lightgreen",
            fillOpacity: 0.8,
          }),
        }
      );

      //设置marker图标为水滴
      this.mapObj.vectorMarker = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng, this.mapObj.point.lat - 0.03),
        {
          // 指定Marker的icon属性为Symbol
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
            scale: 2, //图标缩放大小
            fillColor: "orange", //填充颜色
            fillOpacity: 0.8, //填充透明度
          }),
        }
      );

      //设置marker图标为飞机
      this.mapObj.vectorPlane = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng + 0.04, this.mapObj.point.lat - 0.03),
        {
          // 初始化小飞机Symbol
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_PLANE, {
            scale: 3,
            rotation: 0,
          }),
        }
      );

      this.mapObj.vectorCLOCK = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng + 0.01, this.mapObj.point.lat - 0.03),
        {
          // 初始化闹钟形状的symbol
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_CLOCK, {
            scale: 2,
            strokeWeight: 1,
            fillColor: "blue",
            fillOpacity: 0.8,
          }),
        }
      );
      this.mapObj.ectorWARNING = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng + 0.02, this.mapObj.point.lat - 0.03),
        {
          // 初始化警告标志的symbol
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_WARNING, {
            scale: 2,
            strokeWeight: 1,
            fillColor: "pink",
            fillOpacity: 0.8,
          }),
        }
      );

      this.mapObj.vectorStar = new BMap.Marker(
        new BMap.Point(this.mapObj.point.lng + 0.03, this.mapObj.point.lat - 0.03),
        {
          // 初始化五角星symbol
          icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, {
            scale: 5,
            fillColor: "pink",
            fillOpacity: 0.8,
          }),
        }
      );
      //this.mapObj.map.addOverlay(this.mapObj.vectorWARNING);
      this.mapObj.map.addOverlay(this.mapObj.vectorPlane);
      this.mapObj.map.addOverlay(this.mapObj.vectorFCArrow);
      this.mapObj.map.addOverlay(this.mapObj.vectorBCArrow);
      this.mapObj.map.addOverlay(this.mapObj.vectorFOArrow);
      this.mapObj.map.addOverlay(this.mapObj.vectorBOArrow);
      this.mapObj.map.addOverlay(this.mapObj.vectorStar);
      this.mapObj.map.addOverlay(this.mapObj.vectorMarker);
      this.mapObj.map.addOverlay(this.mapObj.vectorCLOCK);
      this.mapObj.map.addOverlay(this.mapObj.vectorPeoplePath);
      this.mapObj.map.setViewport({
        center: new BMap.Point(116.501035, 39.897538),
        zoom: 14,
      });
    },
    hide() {
      //this.mapObj.vectorWARNING.hide();
      this.mapObj.vectorPlane.hide();
      this.mapObj.vectorFCArrow.hide();
      this.mapObj.vectorBCArrow.hide();
      this.mapObj.vectorFOArrow.hide();
      this.mapObj.vectorBOArrow.hide();
      this.mapObj.vectorStar.hide();
      this.mapObj.vectorCLOCK.hide();
      this.mapObj.vectorMarker.hide();
      this.mapObj.vectorPeoplePath.hide();
    },
    show() {
      //this.mapObj.vectorWARNING.show();
      this.mapObj.vectorPlane.show();
      this.mapObj.vectorFCArrow.show();
      this.mapObj.vectorBCArrow.show();
      this.mapObj.vectorFOArrow.show();
      this.mapObj.vectorBOArrow.show();
      this.mapObj.vectorStar.show();
      this.mapObj.vectorCLOCK.show();
      this.mapObj.vectorMarker.show();
      this.mapObj.vectorPeoplePath.show();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initMap();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
//@import url(); 引入公共css类
#allmap34 {
  width: 100%;
  height: 800px;
}
p {
  margin-left: 5px;
  font-size: 14px;
  color: red;
  font-size: 18px;
  font-weight: bold;
}
</style>

地图实现效果展示：
在这里插入图片描述
上一篇：百度离线地图示例之二：测距
下一篇：百度离线地图示例之四：热力图
系列文章后续一直有进行更新，有不完善的地方，可加微信一起交流：
在这里插入图片描述

longerJue
关注
专栏目录
百度地图矢量下载工具
03-19
百度地图矢量下载工具可下载爬取某城市或区域行政区划，建筑物，道路，小区，POI等，并支持转换为矢量数据
(根据百度地图最新抓取)全国矢量地图 shp格式.zip
04-03
根据百度地图最新提取的全国矢量数据格式，包括河流湖泊，公路铁路乡村道路，医院等信息。
DuMapNet | 百度地图采用，提升车道地图的精确度和覆盖范围 ！
最新发布
CV_Autobot的博客
07-06 336
作者|AI 驾驶员 编辑| 智驾实验室点击下方卡片，关注“自动驾驶之心”公众号戳我-> 领取自动驾驶近15个方向学习路线>>点击进入→自动驾驶之心『在线高精地图』技术交流群本文只做学术分享，如有侵权，联系删文生成城市规模的车道 Level 地图面临着重大挑战，由于复杂城市环境（如车道标记模糊或缺失）的影响。此外，一个标准的车道 Level 地图需要对车道的分组进行全面的组...
GOOGLE在线/离线浏览 矢量地图
06-14
本软件 可以实现 连接网络的时候 浏览GOOGLE地图数据，并将浏览过的地图数据 保存在电脑的E盘里； 在电脑断开网络后，可以正常浏览曾经浏览过的区域的地图数据。 实现GOOGLE地图与矢量地图的结合， 可以添加矢量点，线，面， 有兴趣点的触发事件。
离线矢量（要素）地图服务
GISMaster
02-24 2960
百度地图、高德地图、天地图等都提供查询地名、地址、道路等地图开发接口，如果在内网要使用这些服务是不可能的。所以，一般都通过地图下载器能把百度地图、高德地图的地图切片下载并在内网发布，但如果需要访问查询地名的操作，则需自己搭建GIS要素服务。一般操作如下： 1.数据：创建地名、地址、道路等图层，可以是文件Shapefile或者导入到空间数据库（如PostGreSQL、SQLServer Spati...
离线百度地图部署包含卫星地图、矢量图、路况图。超详细教程
weixin_48969002的博客
05-17 784
离线百度地图 GIS
百度地图添加SVG矢量图标
weixin_46305078的博客
11-30 5091
这篇文章也是创建百度地图的，两个都可以用，看你自己需要哪个自己做修改。不同的地方是下面链接这篇的创建标注的图片是服务器上存储的图片。而本篇是使用SVG的格式来做标注。 百度地图创建多个标注和标签并设置监听事件 百度地图接口版本不同，里面的函数有些区别，我用的是 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=秘钥"></script> 这个版本创建百度地图需要用 var map = .
百度地图WebGL离线版V1.0示例,包含3D地球模式
02-23
本文将深入探讨“百度地图WebGL离线版V1.0”这一示例，带你走进3D地球模式的世界。 首先，让我们了解什么是WebGL。WebGL是一种基于OpenGL标准的JavaScript API，它允许开发者在任何支持WebGL的浏览器上创建交互式的...
离线百度地图 Web示例及使用
01-10
离线百度地图Web示例及使用是针对开发者和爱好者提供的一种在无网络环境下依然能使用地图服务的技术。本文将深入探讨如何在Web项目中集成离线百度地图，以及相关的技术要点。 首先，我们要理解离线地图的基本原理。...
离线地图示例，javascript加载离线地图
07-09
离线地图技术在现代Web应用中扮演着重要角色，特别是在网络环境不稳定或数据流量有限的场景下。...国产离线地图示例为开发者提供了一个实用的参考，帮助他们在没有网络连接的情况下也能提供地图服务。
LeafLet离线地图详细demo合集.rar
11-15
这个"LeafLet离线地图详细demo合集.rar"文件显然是一个包含多个示例的资源包，旨在帮助开发者更好地理解和应用LeafLet在离线地图场景中的使用。 1. **LeafLet基本概念**： - **地图层（Map Layer）**：LeafLet的...
中国各省地图矢量图
02-14
全国各省矢量图
郑州地图矢量图
09-29
郑州市区高清无线放大地图 CDR格式需要能打开CDR格式的软件打开
吉林省长春市地图——矢量图
05-16
长春地图——矢量图 吉林省长春市地图——矢量图
北京市矢量地图
09-24
北京市地区道路等矢量地图，格式为shape格式。
中国矢量地图
08-29
该地图精确到县级市，且可直接编辑。
百度离线地图操作方式
07-31
百度离线地图是一款允许用户在无网络环境下使用的地图服务，它通过预先下载地图数据并在本地存储来提供地图浏览功能。在本文中，我们将深入探讨如何操作百度离线地图，包括它的引入、初始化以及如何添加标记和处理...
百度矢量地图下载
热门推荐
GIS工具
03-06 2万+
最近偶然发现一个百度矢量地图数据的下载工具，貌似功能很强大，不敢独享。贴出来与大家分享： https://github.com/HexiChen/FreeBaiduVectorDownload 说明书地址：http://www.cnblogs.com/niudieyi/p/9655820.html 软件C#编写，需要装VS环境运行（C#打包太麻烦，懒得打包了）。我用的是VS2015,测试运行...
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 2748
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
百度离线地图开发全攻略：JavaScript API与Android SDK
百度离线地图开发是一个针对百度地图服务的高级实践，它允许用户在没有网络连接的情况下依然能够使用地图功能。该主题涵盖了多个关键知识点，包括但不限于： 1. **百度地图开放平台**：百度地图提供了一个强大的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

longerJue

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值