当前位置: 首页 > news >正文

【案例】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:"微软雅黑";}</style><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=TFUtDBf6i1qO7QVv35dMyk8NYgsVCEKy"></script><script src="//mapv.baidu.com/build/mapv.min.js"></script><script src="static/common.js"></script><script src="https://unpkg.com/mapvgl@1.0.0-beta.186/dist/mapvgl.min.js"></script><title>地球模式</title>
</head>
<body><div id="allmap"></div>
</body>
</html>
<script type="text/javascript">// GL版命名空间为BMapGLvar map = new BMapGL.Map("allmap");    // 创建Map实例// map.centerAndZoom(new BMapGL.Point(116.404, 39.915));  // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放var mPoint = new BMapGL.Point(108.953408, 34.332914);  map.enableScrollWheelZoom();map.centerAndZoom(mPoint,5);map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式   标准地图:BMAP_NORMAL_MAP     地球模式:BMAP_EARTH_MAP   普通卫星地图:BMAP_SATELLITE_MAPlet pointlist = [{lat:90.619712, cat:41.292458, title: '一号', label: '地址:北京市111111111111乐天银泰百货八层', url: 'https://lmg.jj20.com/up/allimg/1113/031H0113309/20031G13309-6-1200.jpg'}, {lat:116.939552, cat:35.146252, title: '二号坐标', label: '地址:北京市东城区王2222222222222百货八层' }, {lat:109.716308, cat:35.114520, title: '三号坐标', label: '地址:北京市东3333333乐天银泰百货八层'}, {lat:110.607865, cat:33.614877, title: '四号坐标', label: '地址:北京市东城区44444444银泰百货八层'},]var opts;for (let i = 0; i < pointlist.length; i++) {var point = new BMapGL.Point(pointlist[i].lat, pointlist[i].cat)var marker = new BMapGL.Marker(point );map.addOverlay(marker); // 增加点var sContent = `<h4 style="margin:0 0 5px 0;">${pointlist[i].title}</h4><img style="float:right;margin:0 4px 22px;" id=${'imgDemo'+i} src="${pointlist[i].url}" width="139" height="100"/><p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">${pointlist[i].label}</p></div>`opts = {min_width : 300,     // 信息窗口zuixiao宽度min_height: 100,     // 信息窗口高度// title : "" , // 信息窗口标题enableMessage:true//设置允许信息窗发送短息};map.addOverlay(marker);               // 将标注添加到地图中addClickHandler(sContent,marker);}function addClickHandler(sContent,marker){marker.addEventListener("click",function(e){openInfo(sContent,e)});}function openInfo(sContent,e){var p = e.target;var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMapGL.InfoWindow(sContent,opts);  // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口};</script>

采用的技术为百度地图“卫星图”

相关文章:

【案例】3D地球

效果图&#xff1a; 直接放源码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta name"viewport" content"initial-scale1.0, user-scalableno" …...

安全组问题 访问华为云服务器端口

一些常用的安全组的配置示例&#xff0c;包括远程登录云服务器&#xff0c;对外提供网站访问、不同安全组内实例内网互通等。 通常情况下&#xff0c;安全组默认拒绝所有来自外部的请求。您需要遵循白名单原则添加安全组入方向规则&#xff0c;允许来自外部的特定请求访问安全组…...

音视频常见问题(七):首开慢

本文主要讨论音视频应用中的首开慢问题&#xff0c;文章介绍了首开慢的产生原因&#xff1a;DNS解析耗时、网络传输协议耗时、传输网络调度耗时&#xff0c;并提供了排查方式和解决方案。即构科技的Express SDK和MSDN网络可以有效的解决首开慢问题&#xff0c;且节省开发成本。…...

[SSD综述1.2] SSD 和 HDD(机械硬盘) 区别?

​ 依公知及经验整理,原创保护,禁止转载。 专栏 《SSD入门到精通系列》 <<<< 返回总目录 <<<< 文章目录 前言1. 速度差异多大1.1 常见产品速度1.2 最新产品速度2 机械硬盘和固态硬盘的差异点3 引起速度差异的原因是什么(硬件)?3.1 存储介质不同3.…...

ali sdm docker

当然要先安装docker和docker-compose cd /usr/local mkdir sdm cd sdm touch docker-compose.yml&#xff0c;编辑内容如下&#xff1a; version: "3" services:sdm:image: registry.cn-shanghai.aliyuncs.com/nls-cloud/sdm:latestcontainer_name: nls-cloud-s…...

HCIE-kubernetes(k8s)-Authentication身份验证

1、远程登录 1、kubeconfig方式 在master上都是以kubeconfig方式登录的&#xff0c;并不是说有一个文件叫kubeconfig。 默认使用的配置文件是~/.kube/config 这个配置文件&#xff0c;而这个配置文件是通过这个文件/etc/kubernetes/admin.conf 如果在node上执行命令&#xff…...

uniapp开发小程序接入阿里云TTS语音合成(RESTful API)

流程 首先小程序后台配置白名单 1.1 路径&#xff1a;开发-开发管理-开发设置-服务器域名-request合法域名 1.2 request合法域名参数&#xff1a; https://nls-meta.cn-shanghai.aliyuncs.com https://nls-gateway-cn-shanghai.aliyuncs.com引入alitts.js页面使用…...

稳定性测试—fastboot和monkey区别

一、什么是稳定性测试 稳定性测试是指检验程序在一定时间内能否稳定地运行&#xff0c;在不同的场景下能否正常地工作的过程。主要目的是检测崩溃、内存泄漏、堆栈错误等缺陷。 二、Monkey 1.什么是Monkey 是一个命令行工具&#xff0c;通常在adb安卓调试运行&#xff0c;模…...

Python库Requests的爬虫程序爬取视频通用模版

目录 一、引言 二、Requests库介绍 三、通用视频爬虫模板设计 1、确定目标网站和视频页面结构 2、发送HTTP请求获取页面内容 3、解析HTML内容提取视频链接 4、下载视频文件 四、模板应用与实践 五、注意事项 总结与展望 一、引言 随着互联网的发展&#xff0c;视频内…...

ngx_http_set_response_header阅读

1.关于设置头的一些函数指针初始化 typedef struct {ngx_str_t name;ngx_uint_t offset;// 本文中搜索 h[i].handler(r, &h[i], &value&#xff0c;就是回调函数执行的地方ngx_http_set_header_pt handler; } ngx_http_set_hea…...

词典查询工具django-mdict

什么是 django-mdict &#xff1f; django-mdict 不是词典软件&#xff0c;是词典查询的脚本工具&#xff0c;主要目的是解决词典数量多&#xff0c;手机容量不足的问题&#xff0c;是对其他词典软件局域网在线查询功能的补充&#xff0c;是用 django 实现的 mdict 词典查询工具…...

Ubuntu20.04搭建RISC-V和qemu环境

1. 前言 risc-v是一个非常有潜力的指令集框架&#xff0c;最近对其产生了浓厚的兴趣&#xff0c;由于之前对于这方面的知识储备很少&#xff0c;在加上网上的教程都是点到为止&#xff0c;所以安装过程异常曲折。好在最后一步一步积累摸索&#xff0c;终于利用源码安装完成。看…...

代码生成器

Easycode Entity ##导入宏定义 $!{define.vm}##保存文件&#xff08;宏定义&#xff09; #save("/entity", ".java")##包路径&#xff08;宏定义&#xff09; #setPackageSuffix("entity")##自动导入包&#xff08;全局变量&#xff09; $!{au…...

AndroidMonitor - 基于AndroidLocalService实现的抓取OKHTTP请求的工具

官网 GitHub - lygttpod/AndroidMonitor: easy show android okhttp request data 项目简介 Demo下载体验 文章介绍---->Android抓包从未如此简单 切记&#xff1a;monitor需要配合monitor-plugin使用 1、monitor接入 添加依赖 debugImplementation io.github.lygttp…...

LuatOS-SOC接口文档(air780E)--nbiot - NB-IOT操作库

nbiot.isReady()# 网络是否就绪 参数 无 返回值 返回值类型 解释 boolean 已联网返回true,否则返回false 例子 -- 判断是否已经联网 if nbiot.isReady() then log.info("nbiot", "net is ready") endnbiot.imsi() 读取IMSI 参数 无 返回值 …...

大数据之LibrA数据库系统告警处理(ALM-12017 磁盘容量不足)

告警解释 系统每30秒周期性检测磁盘使用率&#xff0c;并把磁盘使用率和阈值相比较。磁盘使用率有一个默认阈值&#xff0c;当检测到磁盘使用率超过阈值时产生该告警。 平滑次数为1&#xff0c;主机磁盘某一分区使用率小于或等于阈值时&#xff0c;告警恢复&#xff1b;平滑次…...

Python算法例4 求平方根

1. 问题描述 实现int sqrt&#xff08;int x&#xff09;函数&#xff0c;计算并返回x的平方根。 2. 问题示例 sqrt&#xff08;3&#xff09;1&#xff1b;sqrt&#xff08;4&#xff09;2&#xff1b;sqrt&#xff08;5&#xff09;2&#xff1b;sqrt&#xff08;17&#…...

LVGL_多界面切换

LVGL_多界面切换 1、创建多个界面&#xff08;create_page1();&#xff09; 2、加载一个界面显示&#xff08;lv_scr_load(page1);&#xff09; 3、切换不同界面显示&#xff08;lv_scr_load_anim(page2, LV_SCR_LOAD_ANIM_OVER_LEFT, 300, 0, false);&#xff09; static lv_…...

C/C++输出字符菱形 2021年3月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C输出字符菱形 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C输出字符菱形 2021年3月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 给定一个字符&#xff0c;用它构造一个对角线长…...

DI93a HESG440355R3 通过其Achilles级认证提供网络安全

DI93a HESG440355R3 通过其Achilles级认证提供网络安全 施耐德电气宣布推出Modicon M580以太网PAC (ePAC)自动化控制器&#xff0c;该控制器采用开放式以太网标准&#xff0c;通过其Achilles级认证提供网络安全。M580 ePAC使工厂操作员能够设计、实施和运行一个积极利用开放网…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...