百度API加载离线百度电子地图和卫星切片
2024-06-02 07:41:43
百度API加载离线百度电子地图和卫星切片，可动态切换
如有侵权请联系删除
- 本案例展示使用百度离线api加载百度离线切片
- 效果图如下
- 使用工具
1.下载百度切片，可使用太乐地图下载器，可购买正版软件，或其他地图下载器
2.Tomcat用于发布地图切片，具体方法为利用Tomcat发布虚拟路径，可在我之前博客中找到步骤
3.下载网上大牛写的离线地图加载包，具体在哪里下载，哪位大神做的我已忘记，在此致敬。 - *代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百度API加载离线百度电子地图和卫星切片</title><style type="text/css">body, html,#map_demo, #tab, #mapfrm {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}#menu{height:100%;overflow-y:auto}td{font-size:14px}h4{margin:0;}</style><link rel="stylesheet" type="text/css" href="css/baidu_map_v2.css"/><script type="text/javascript" src="js/mapControl.js"></script>
</head>
<body>
<input type="button" onclick="satemap();" value="卫星地图">
<input type="button" onclick="normalemap();" value="电子地图">
<div id="map_demo" ></div>
<script type="text/javascript">function satemap(){bdmapcfg.tiles_dir="http://localhost:8087/itms/baidumap2";loadJScript();}function normalemap(){bdmapcfg.tiles_dir="http://localhost:8087/itms/baidumap";loadJScript();}//百度地图API配置var bdmapcfg = {'home':'source/', //API主目录'imgext':'.jpg', //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg'tiles_dir':'http://localhost:8087/itms/baidumap' //瓦片图的目录，为空默认在 baidumap_v2/tiles/ 目录};//百度地图API功能function loadJScript() {var script = document.createElement("script");script.type = "text/javascript";script.src = "js/baidumap_offline_v2_20160822_min.js";document.body.appendChild(script);
//异步加载增加代码window.BMap=window.BMap||{};window.BMap.apiLoad=function(){delete window.BMap.apiLoad;if(typeof init=="function"){init()}}}function init() {var lon=108.95346,lat=34.265725; //坐标位置为钟楼var onlinemap=new OnlineMap(lon,lat,"map_demo");onlinemap.init();}//异步加载地图window.onload=loadJScript;
</script>
</body>
mapControl.js文件内容如下：
function OnlineMap( lon, lat, dom, mapType) {debugger;var isShow = false;var t1;//地图上加载一个要素function addCircle() {remove_overlay();var SW = new BMap.Point(lon - 0.022146, lat - 0.018801);var NE = new BMap.Point(lon + 0.022317, lat + 0.018025);groundOverlayOptions = {opacity : 0.3,displayOnMinLevel : 13,displayOnMaxLevel : 18}// 初始化GroundOverlayvar groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE),groundOverlayOptions);// 设置GroundOverlay的图片地址groundOverlay.setImageURL("images/leida_white.gif");map.addOverlay(groundOverlay);}//清除覆盖物function remove_overlay() {map.clearOverlays();}//自动刷新要素信息function refreshFlyInfo() {var level = map.getZoom();if (level < 13) {remove_overlay();isShow = false;window.clearInterval(t1);} else {isShow = true;}if (isShow) {addCircle();}}OnlineMap.prototype.init = function(mapType) {map = "";map = new BMap.Map(dom,{enableMapClick:false}); // 创建Map实例point = new BMap.Point(lon, lat);map.centerAndZoom(point, 14);map.setMaxZoom(18);if(mapType){map.setMapType(mapType);}map.enableScrollWheelZoom(); //启用滚轮放大缩小\t1 = window.setInterval(function() {refreshFlyInfo();}, 3000);map.addEventListener("zoomend", function() {window.clearInterval(t1);if (this.getZoom() < 13) {remove_overlay();} else {for (var i = 0; i < map.getOverlays().length; i++) {map.getOverlays()[i].show();}t1 = window.setInterval(function() {refreshFlyInfo();}, 1000);addCircle();}});addCircle();}//显示点图标和文字信息OnlineMap.prototype.pointsInfo = function(flyInfo) {addCircle();if (flyInfo.length > 0) {for (var i = 0; i < flyInfo.length; i++) {var point1 = new BMap.Point(Number(flyInfo[i].x),Number(flyInfo[i].y));var marker = new BMap.Marker(point1); // 创建标注marker.setTop(true);var icon = new BMap.Icon("images/fly.png",new BMap.Size(80, 80));var iconshaow = new BMap.Icon("/images/fly_shadow.png", new BMap.Size(50, 50));marker.setIcon(icon);marker.setZIndex(100);marker.setShadow(iconshaow);if (map.getZoom() >= 13) {map.addOverlay(marker); // 将标注添加到地图中}var label = new BMap.Label(flyInfo[i].message, {offset : new BMap.Size(20, -10)});marker.setLabel(label);}}}}百度API加载离线百度电子地图和卫星切片相关推荐
- OpenLayers3加载离线百度地图(百度迁徙底图)
关于openlayers加载离线百度地图的东东好几年前就做过了,不过当时做的是2.0版本的. 自从好久没有去做可视化分析之后,也很少接触这些前端的JS的东西了.最近想实现一个东西的时候,才想起需要用到 ...
- 如何采用离线的 Google Map API 加载离线谷歌地图的方法
原文转自:http://www.arceyes.com/bbs/thread-18476-1-1.html 如何采用离线的 Google Map API 加载离线谷歌地图的方法 一.下载示例数据 这里 ...
- Cesium for UE4 加载离线地形和影像
Cesium for UE4 加载离线地形和影像 CTB 切片地形 编译cesium-terrain-builder {"tilejson": "2.1.0", ...
- 百度离线使用百度地图离线JavaScript API加载本地瓦片地图 -java教程
最近笔者几篇文章介绍了改百度离线的文章. 关联文章的地址 1.首先取获百度 JavaScript API 首先用浏览器开打 http://api.map.baidu.com/api?v=1.3 如下图 ...
- html加载百度地图,百度地图API详解之地图API加载方式
本文将向大家介绍百度地图API的两种不同加载方式:同步加载和异步加载. 同步加载 这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址 ...
- web高德地图怎么加载离线地图_基于 QGIS 在内网中离线加载卫星地图的方法
1. 概述 我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线影像加载. 另外,也 ...
- openlayers加载离线地图并实现深色地图
问题背景 我们自己一直使用的openlayer+geoserver自己发布的地图,使用的是矢量地图.但是由于政府地图大都使用为天地图,所以需要将geoserver的矢量地图更改为天地图,并 ...
- Cesium加载离线地图和离线地形
文章目录 前言 一.Cesium加载离线地图 1.1 下载数据 2.2 数据处理 2.3 地图发布 2.4下载速度改进 二.Cesium加载离线地形 2.1 下载数据 2.2 数据处理 2.3 地形发 ...
- Cesium 加载离线地图服务
Cesium 可以加载自定义的地图服务,一般在私有云上应用比较广. 原始地图数据有很多地方都可以下载.比如常用的下载工具,付费的有水经注.91助手等,还有国家空间地理服务的官网上也有可用的数据.假设你 ...
最新文章
- 'MomentumSGD' 'zero_grads'
- java 字节取位_java位 、字节 、字符的梳理
- html多选框 jquery,jQuery Select多选
- bfd联动 cisco_以太链路的接口备份和BFD联动
- python集合操作班级干部竞选演讲稿_精选竞选班干部的演讲稿集合7篇
- Docker Compose运行MySQL、Redis服务
- 行为设计模式 - 命令设计模式
- TechWeb祝大家新年快乐！愿你心有光亮 自予光芒！
- Java 理论与实践: 处理 InterruptedException（转）
- 大数据如何进行创新与变革
- jenkins+testNG
- Java实现生成32位UUID工具类
- 一款好看透明个人主页源码
- 华三交换机配置access命令_H3C交换机配置命令大全讲解
- pdf文件的预览——几种方式实现——技能提升
- SolidWorks基础操作笔记
- ios 获取沙盒文件名_iOS 获取沙盒文件路径及 写入/删除 沙盒文件
- Java中的求和公式_Sympy codegen：求和索引函数
- 减肥 低热量食物和运动卡路里
- 决策树（手写代码+隐形眼镜项目）