百度地图3d效果和卫星图效果
2024-05-25 06:50:54
3D图
3d案例如上图
代码如下
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}#allmap { position: relative; }#tools { position: absolute; left: 0; top: 0; z-index: 1000;}.tools-bar { display: flex; }.label { width: 80px; text-align: right; }</style><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=秘钥"></script><title>地图展示</title>
</head>
<body><div id="allmap"></div><div id="tools"><div class="tools-bar"><div class="label">heading:</div><button id="heading-add">+</button><input type="text" id="heading" value="40"><button id="heading-minus">-</button></div><div class="tools-bar"><div class="label">tilt:</div><button id="tilt-add">+</button><input type="text" id="tilt" value="70"><button id="tilt-minus">-</button></div><div class="tools-bar"><button id="loop">loop</button><button id="stop">stop</button></div></div>
</body>
</html>
<script type="text/javascript">// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map("allmap"); // 创建Map实例var point = new BMapGL.Point(116.280190, 40.049191);map.centerAndZoom(point, 19); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放map.setHeading(40); // 设置地图旋转角度map.setTilt(70); // 设置地图的倾斜角度var heading = document.getElementById('heading');var headingAdd = document.getElementById('heading-add');var headingMinus = document.getElementById('heading-minus');var tilt = document.getElementById('tilt');var tiltAdd = document.getElementById('tilt-add');var tiltMinus = document.getElementById('tilt-minus');heading.addEventListener('input', function(e) {map.setHeading(e.target.value);});tilt.addEventListener('input', function(e) {map.setTilt(e.target.value);});headingAdd.addEventListener('click', function(e) {heading.value++;map.setHeading(heading.value);});headingMinus.addEventListener('click', function(e) {heading.value--;map.setHeading(heading.value);});tiltAdd.addEventListener('click', function(e) {tilt.value++;map.setTilt(tilt.value);});tiltMinus.addEventListener('click', function(e) {tilt.value--;map.setTilt(tilt.value);});var task;document.getElementById('loop').addEventListener('click', function(e) {task = setInterval(() => {if (loop) {heading.value++;map.setHeading(heading.value);}}, 100);});document.getElementById('stop').addEventListener('click', function(e) {task && clearInterval(task);})
</script>地球卫星图
代码如下
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=秘钥"></script><title>地图展示</title>
</head>
<body><div id="allmap"></div>
</body>
</html>
<script type="text/javascript">// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map("allmap");map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);map.enableScrollWheelZoom(true);map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式var scaleCtrl = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT,offset: new BMapGL.Size(100, 10)}); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // 添加比例尺控件map.addControl(zoomCtrl);
</script>百度地图3d效果和卫星图效果相关推荐
- 百度地图实现普通地图、卫星图、三维图、混合图（卫星图+路网）
普通街道视图:BMAP_NORMAL_MAP 三维视图:BMAP_PERSPECTIVE_MAP 卫星视图:BMAP_SATELLITE_MAP 卫星和路网的混合视图:BMAP_HYBRID_MAP ...
- 【百度地图API】发布静态图API啦！只需一个网址，即可展示定制百度地图！
[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任 ...
- 带划痕效果的刮图效果
带划痕效果的刮图效果 配置说明:brushworkSrc 用于图章效果的笔触. 核心代码说明: drawPoint 画了一个渐变的中心点(这样有模糊效果),然后一个循环调用 drawRandomLin ...
- 百度地图3D地球闪动点(修复不在视野内时无法隐藏marker的bug)
一.效果图 二.详解 本质上为自定义Marker,使用css来做动画特效 有关通用模式相关操作,请看<百度地图3D地球接入> 1. 自定义CSS样式 ComplexCustomOverla ...
- html5 加速球 效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
- 百度地图--3D棱柱效果---省边界数据抽取---Boundary、Point、Prism
3D棱柱效果 上代码 var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(116.404, 39.925 ...
- Android 通过百度地图实现膜拜单车首界面效果
最近在学习一些百度地图相关的API应用,中间有一个功能是实现类似膜拜单车首页的效果.本文将介绍通过百度地图来实现膜拜单车首界面的效果.先看下膜拜单车效果图(本文截取的是微信小程序的效果图) 效果分析 ...
- 实现百度地图的身边雷达的功能效果
一.概述 百度地图现在在不断滴做很多的各种功能,可能是面向客户的开发,所以在不断开发出新颖的功能,以取得更多的用户.最近出了一个"身边雷达"的新的功能.感觉十分的酷炫 ...
- 百度地图坐标拾取系统html,请问百度地图拾取坐标系统中的这个效果是怎么实现的？...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 百度地图 var a ; var map = new BMap.Map("container"); var point = new B ...
最新文章
- python显示行数_jupyter notebook实现显示行号
- java 整型_Java整型计算
- layui table 设置滚动条
- micro850通讯协议msg_micro850通讯协议msg_半导体semi通讯的协议SECS/GEM
- wpsppt如何虚化图片_PPT模仿之路——图片以及笔画的虚化
- 组卷积（group convolution）
- linux任务计划学习
- 经典书单 —— 机器学习/深度学习/AI/CV/PGM
- Linux下查看网卡光衰值
- 中国计量大学matlab,计量经济学及matlab.pdf
- python 数据shape的理解
- 洛谷 P1873 砍树 (二分答案)
- aimp输出dsd_极客评论：音乐播放器AIMP 2
- 文件隐藏服务器版本信息,隐藏Tengine的版本信息
- 不想参加难度较高的全国联考，可以选择中外合作办学硕士在职研究生
- 关于爱情 喜欢的句子
- 跟我一起写 Makefile-陈浩
- 海信电视进入工厂模式，方便adb
- 嵌入式入门实践——编写简单STM32程序
- shopee店铺如何做好定位—扬帆际海