【案例】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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/182546.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql高级——Mysql8一主一从,多主多从搭建

修改 /etc/hosts文件 ip地址 master1 ip地址 master2 ip地址 slave1 ip地址 slave2一主一从 create database master1db;create table master1db.master1tab(name char(50));insert into master1db.master1tab VALUES(1111);insert into master1db.master1tab VALUES(2222);m…

ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南续篇

作者&#xff1a;运维有术 前言 知识点 定级&#xff1a;入门级KubeKey 安装部署 ARM 版 KubeSphere 和 KubernetesARM 版 KubeSphere 和 Kubernetes 常见问题 实战服务器配置 (个人云上测试服务器) 主机名IPCPU内存系统盘数据盘用途ks-master-1172.16.33.1661650200KubeSp…

苹果加大对印度的扶持,提高在其生产iphone的比重

KlipC报道&#xff1a;跟踪苹果产业链&#xff0c;有分析师预计2023年全球约12%-14%的iphone在印度生产&#xff0c;预计2024年&#xff0c;印度将生产20%-25%的iphone。 KlipC的合伙人Andi D表示&#xff1a;“近年来随着苹果对中国的以来&#xff0c;印度已经成为高科技制造和…

Linux开发板移植FTP服务器和OpenSSH时发现的问题

先上结论&#xff1a;如果在linux开发板上移植了OpenSSH&#xff0c;那么不仅可以远程登录Linux开发板&#xff0c;还可以用FileZilla在windows和Linux开发板之间传输文件&#xff0c;这时候就不需要移植vsftpd(移植vsftpd后windows可以用FileZilla跟Linux开发板传输文件)了&am…

甘特图组件DHTMLX Gantt用例 - 如何拆分任务和里程碑项目路线图

创建一致且引人注意的视觉样式是任何项目管理应用程序的重要要求&#xff0c;这就是为什么我们会在这个系列中继续探索DHTMLX Gantt图库的自定义。在本文中我们将考虑一个新的甘特图定制场景&#xff0c;DHTMLX Gantt组件如何创建一个项目路线图。 DHTMLX Gantt正式版下载 用…

AI 绘画 | Stable Diffusion 提示词

Prompts提示词简介 在Stable Diffusion中&#xff0c;Prompts是控制模型生成图像的关键输入参数。它们是一种文本提示&#xff0c;告诉模型应该生成什么样的图像。 Prompts可以是任何文本输入&#xff0c;包括描述图像的文本&#xff0c;如“一只橘色的短毛猫&#xff0c;坐在…

RFID管理方案有效提升电力物资管理效率与资产安全

在电力行业&#xff0c;电力资产的管理是一项重要的任务&#xff0c;为了实现对电力资产的精细化管理、入出库监控管理、盘点管理和巡查管理等&#xff0c;电力公司多采用电力资产RFID管理系统&#xff0c;该系统能够实时监控出入库过程&#xff0c;有效防止出入库错误&#xf…

基于卷积神经网络的抗压强度预测,基于卷积神经网络的抗折强度预测

目录 背影 卷积神经网络CNN的原理 卷积神经网络CNN的定义 卷积神经网络CNN的神经元 卷积神经网络CNN的激活函数 卷积神经网络CNN的传递函数 卷积神经网络CNN抗压强度预测 完整代码:基于卷积神经网络的抗压强度和抗折强度预测,基于CNN的抗压强度和抗折强度预测(代码完整,数据…

红黑树——插入底层实现【C++】面试重灾区!!

目录 前言 一&#xff0c;概念 定义 二&#xff0c;insert 情况一&#xff1a;仅染色 情况二&#xff1a;单旋 染色 情况三&#xff1a;双旋 染色 insert代码 三&#xff0c; 红黑树验证(面试题) 产生随机数验证 四&#xff0c;删除 下期预告&#xff1a;用红黑…

基于跳蛛算法的无人机航迹规划-附代码

基于跳蛛算法的无人机航迹规划 文章目录 基于跳蛛算法的无人机航迹规划1.跳蛛搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用跳蛛算法来优化无人机航迹规划。 1.跳蛛搜索算法 …

Python 生成Android不同尺寸的图标

源代码 # -*- coding: utf-8 -*- import sys import os import shutil from PIL import Imagedef generateAndroidIcons():imageSource icon.pngicon Image.open(imageSource)sizes [(android/drawable,512),(android/drawable-hdpi,72),(android/drawable-ldpi,36),(andro…

晨控CK-GW08系列网关控制器与CODESYS软件MODBUSTCP通讯手册

晨控CK-GW08系列是一款支持标准工业通讯协议ModbusTCP的网关控制器,方便用户集成到PLC等控制系统中。系统还集成了8路读写接口&#xff0c;用户可通过通信接口使用Modbus TCP协议对8路读写接口所连接的读卡器进行相对独立的读写操作。 晨控CK-GW08系列网关控制器适用于本公司多…

Docker 学习路线 5:在 Docker 中实现数据持久化

Docker 可以运行隔离的容器&#xff0c;包括应用程序和其依赖项&#xff0c;与主机操作系统分离。默认情况下&#xff0c;容器是临时的&#xff0c;这意味着容器中存储的任何数据在终止后都将丢失。为了解决这个问题并在容器生命周期内保留数据&#xff0c;Docker 提供了各种数…

应用安全四十二:SSO安全

一、什么是SSO SSO是单点登录(Single Sign On)的缩写,是指在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。这种方式减少了由登录产生的时间消耗,辅助了用户管理,是比较流行的企业业务整合的解决方案之一。 身份验证过程依赖于双方之间的信任关…

【Redis】hash类型-内部编码使用场景

文章目录 内部编码测试内部编码&#xff1a; 使用场景缓存方式对比 内部编码 哈希的内部编码有两种&#xff1a; ziplist&#xff08;压缩列表&#xff09;&#xff1a;当哈希类型元素个数⼩于hash-max-ziplist-entries配置&#xff08;默认512个&#xff09;、同时所有值都⼩…

Python类继承(单继承)

自定义“鸟”类&#xff0c;“鸣禽”、“猛禽”继承自“鸟”类&#xff0c;“画眉”、“百灵”继承自“鸣禽”&#xff0c;“鹰”、“雕”继承自“猛禽”。 (笔记模板由python脚本于2023年11月06日 19:08:56创建&#xff0c;本篇笔记适合初通Python类的coder翻阅) 【学习的细节…

React使用富文本CKEditor 5,上传图片并可设置大小

上传图片 基础使用&#xff08;标题、粗体、斜体、超链接、缩进段落、有序无序、上传图片&#xff09; 官网查看&#xff1a;https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html 安装依赖 npm install --save ckeditor/ckeditor5-react cked…

cookie、session和Token的区别?JWT又是什么?单点登录又是什么?头大?快进来看看,一文帮你捋清楚~

目录 0、HTTP是无状态的 1、前端标记cookie 1.1、cookie限制空间范围 1.2、cookie限制时间范围 1.3、cookie限制使用方式 2、服务端存储session库 2.1、我们先来简单聊聊session是什么&#xff1f; 2.2、session的存储方式 2.3、session的过期和销毁 2.4、session的分…

hugetlb核心组件

1 概述 hugetlb机制是一种使用大页的方法&#xff0c;与THP(transparent huge page)是两种完全不同的机制&#xff0c;它需要&#xff1a; 管理员通过系统接口reserve一定量的大页&#xff0c;用户通过hugetlbfs申请使用大页&#xff0c; 核心组件如下图&#xff1a; 围绕着…

十年老程序员分享13个最常用的Python深度学习库和介绍,赶紧收藏码住!

文章目录 前言CaffeTheanoTensorFlowLasagneKerasmxnetsklearn-theanonolearnDIGITSBlocksdeepypylearn2Deeplearning4j关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案…