百度地图3d区域掩膜,最常见通用的大屏地图展现形式

需求及效果

原本项目使用的是百度地图3.0,也就是2d版本的那个地图,客户不满意觉得不够好看,让把地图改成3d的,但是我们因为另外的系统用的都是百度地图,为了保持统一只能用百度地图做

经过3天的努力,最后我终于把这个效果实现了,效果如下:
在这里插入图片描述

如何引用GL版本

为了实现这个功能,首先要将百度地图升级为GL版本。

  1. GL版本引用的百度地图API需将之前引入的替换为:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

初始化地图

地图初始化还是和之前一样,只不过要使用BMapGL

   const map = new BMapGL.Map("monitorMap");          // 创建地图实例var point = new BMapGL.Point( 128.2015353412464,49.76416045410938);  // 创建点坐标map.centerAndZoom(point, 7); // 设置地图中心点map.enableScrollWheelZoom(true); // 允许鼠标滚动缩放地图级别

将底图改为卫星地图

GL版本的百度地图有三种地图类型:

  • 地球模式(BMAP_EARTH_MAP),不过这个模式能支持的交互操作有限
  • 标准地图(BMAP_NORMAL_MAP)
  • 卫星地图(BMAP_SATELLITE_MAP)

因此,我们给地图加上配置:

const map = new BMapGL.Map("monitorMap",{mapType:BMAP_SATELLITE_MAP,
});   

禁用地图旋转,禁止技改变倾角

这个地图我们不能让用户自己去改变旋转角和倾角,因此需要禁用

const map = new BMapGL.Map("monitorMap",{mapType:BMAP_SATELLITE_MAP,// 禁用用户旋转enableRotate: false,// 禁用用户修改倾斜角度enableTilt: false,
}); 

代码修改地图倾角

做了这么多发现地图依然不是三维的

不要慌,我们手动来改一下地图倾角

map.setTilt(50);       //设置地图的倾斜角度


现在地图终于倾斜了

掩膜以及掩膜经常失败怎么解决

由于我们的效果只需要留下黑龙江省的地图,所以需要区域掩膜

我们需要获取黑龙江的边界,在百度地图中有对应API:

var bdary = new BMapGL.Boundary();
bdary.get('黑龙江', function (rs) {// 绘制行政区for (var i = 0; i < rs.boundaries.length; i++) {var path = [];var xyArr = rs.boundaries[i].split(';');var ptArr = [];for (var j = 0; j < xyArr.length; j++) {var tmp = xyArr[j].split(',');var pt = new BMapGL.Point(tmp[0], tmp[1]);ptArr.push(pt);}// 添加掩膜var mapmask = new BMapGL.MapMask(ptArr, {isBuildingMask: true,isPoiMask: true,isMapMask: true,showRegion: 'inside',});map.addOverlay(mapmask);// 给掩膜描边var border = new BMapGL.Polyline(ptArr, {strokeColor: '#15a6db',strokeWeight: 3,strokeOpacity: 1});map.addOverlay(border);}
})


现在终于把黑龙江单独拎出来了,但为什么背景是白色的?这个先不急,我们先来解决另一个问题

区域掩膜失败怎么解决

多刷新几次页面,你会发现有时候区域掩膜会失败,为什么呢?

我们分析一下,为什么有时失败有时不失败,这是不是非常像接口请求有时成功有时失败的样子,实际上百度地图也是这样做的,是因为黑龙江的边界请求有时候会失败

解决思路:
黑龙江的边界不会变的,我们把请求成功的黑龙江边界存起来就行了

// heilongjiang.js
export default {"boundaries": ["121.50682596458674, 53.341380780914506;121.51059812908427, 53.34188131383469;121.51345447111437, 53.34197641979837;121.51517077362173, 53.34203018226125;.....]
}

然后将代码修改一下:

import heilon

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

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

相关文章

前端项目外包出去,是我痛苦的开始。如何破?

不止一个老铁给我反馈&#xff0c;他们把其前端项目外包出去&#xff0c;非常的痛苦&#xff0c;远不如用自己的员工省心。明面上钱省了&#xff0c;实际精力大量耗费在上面&#xff0c;一算账并没省&#xff0c;反而闹了一肚子气&#xff0c;问我这事该如何破&#xff1f;其实…

C#的无边框窗体项目模板 - 开源研究系列文章

继续整理和编写代码及博文。 这次将笔者自己整理的C#的无边框窗体项目的基本模板进行总结&#xff0c;得出了基于C#的.net framework的Winform的4个项目模板&#xff0c;这些模板具有基本的功能&#xff0c;即已经初步将代码写了&#xff0c;直接在其基础上添加业务代码即可&am…

Servlet组件

目录 1 我们为什么需要Servlet&#xff1f; 1.1 Web应用基本运行模式 1.2 Web服务器中Servlet作用举例 2 什么是Servlet&#xff1f; 3 如何使用Servlet&#xff1f; 3.1 操作步骤 3.2 运行分析(执行原理) 3.3 Servlet作用总结 4 Servlet生命周期 4.1 Servlet生命周期…

CRMEB 多门店后台登录入口地址修改(默认admin)

一、>2.4版本 1、修改后端 config/admin.php 配置文件,为自定义的后缀 2、修改 平台后台前端源码中 view/admin/src/settings.js 文件,修改为和上面一样的配置 3、修改后重新打包前端代码,并且覆盖到后端的 public 目录下&#xff1a;打包方法 4、重启swoole 二、<2.4版…

滑动窗口算法——部分OJ题详解

目录 关于滑动窗口 部分OJ题详解 209.长度最小的子数组 3.无重复字符的最长字串 1004.最大连续1的个数Ⅲ 1658.将x减到0的最小操作数 904.水果成篮 438.找到字符串中所有字母异位词 30.串联所有单词的子串 76.最小覆盖子串 关于滑动窗口 其实滑动窗口也是通过双指针…

项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包,从而减少首屏加载时间

问题描述 我们项目做完&#xff0c;验收通过以后&#xff0c;就需要打包发布上线啦。于是我们执行命令&#xff1a;npm run build打dist包&#xff0c;打包完以后截图如下&#xff1a; 直接打包的chunk-vendors.js太大了 chunk-vendors.js文件太大了&#xff0c;所以我们需要…

软件测试基础知识

软件测试基础 一、软件测试质量 软件研发过程中&#xff0c;通常定义了2个软件质量相关的角色&#xff1a; QC就是测试人员&#xff0c;职责是尽可能早地发现软件的缺陷&#xff0c;并确保缺陷得到修复QA是流程的监督者&#xff0c;职责是创建和执行 改进软件开发过程&#x…

STARTRADER星迈:银和铜的未来前景,是否即将迎来历史新高?

随着全球经济的复苏和技术进步的加速&#xff0c;大宗商品市场特别是金属市场近年来表现出强劲的动态。2024年&#xff0c;包括白银和铜在内的大宗商品价格已连续创下多年和历史新高&#xff0c;被分析师誉为可能是大宗商品交易史上赚钱的一年。本文将STARTRADER外汇深入探讨白…

Chromium 开发指南2024 Mac篇-编译前的准备工作(一)

1.引言 Chromium 是一款开源的网页浏览器项目&#xff0c;作为 Google Chrome 浏览器的基础&#xff0c;其卓越的性能和广泛的应用使其成为众多开发者研究和学习的对象。对于希望深入了解浏览器内核&#xff0c;或是计划在 Chromium 基础上开发自定义浏览器的开发者来说&#…

在Tomcat中部署war包

1、准备war包 确保已经有一个有效的war包&#xff0c;该war包包含了web应用程序的所有内容&#xff1b; 2、停止tomcat服务器 在部署之前&#xff0c;确保tomcat服务器已经停止&#xff0c;进入tomcat的配置目录执行命令&#xff1a;[路径]/tomcat/conf&#xff1b; 在Linux…

EXCEL表格怎么批量删除日期后的时间?

竞价师最近有点忙了&#xff0c;因为百度新出来一个“线索有效性诊断”功能 一、下载电话、表单、咨询表格 二、选中整列 三、选中ctrlf 进行替换&#xff0c;日期输入空格&#xff0c;时间输入*&#xff0c;替换为空即可&#xff01; 四、整列单元格格式“日期”拉倒底部&…

线上OOM问题排查总结

自己搭建了一个小博客&#xff0c;该文章与博客文章同步。 一般情况下&#xff0c;出现OOM主要有一下三种原因。 一次性申请对象的太多。更改申请对象数量。内存资源耗尽未释放。找到未释放的对象进行释放。本身资源不够。jmap -heap 查看堆信息。 分几种情况解决&#xff1…

css文字镂空加描边

css文字镂空加描边 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>文字镂空</title><style>/* 公用样式 */html,body{width: 100%;height: 100%;position: relative;}/* html{overflow-y: scroll;} */*{margi…

C# 中的 StreamReader 和 StreamWriter 类

在这里插入代码片StreamReader 和 StreamWriter 位于 System.IO 命名空间中。当您想要读取或写入基于字符的数据时&#xff0c;这两个类都很有用。这两个类都处理 Unicode 字符。 StreamReader 派生自抽象类“TextReader”&#xff0c;StreamWriter 派生自“TextWriter”。 下…

爆火的儿童绘本如何用AI制作?一文解锁从制作到变现的全流程!

大家好我是安琪&#xff01; AI绘图发展势头如此猛烈&#xff0c;无论是Stable Diffusion&#xff0c;Midjourney&#xff0c;还是国内百度的文心一格&#xff0c;字节的豆包等&#xff0c;AI绘图技术越来越成熟&#xff0c;风格也越来越多样化。那么问题来了&#xff0c;对于普…

Linux企业 集群批量管理-秘钥认证

集群批量管理-秘钥认证 概述 管理更加轻松&#xff1a;两个节点&#xff0c;通过秘钥认证形成进行访问&#xff0c;不需要输入密码&#xff0c;单向服务要求&#xff08;应用场景&#xff09;&#xff1a; 一些服务在使用前要求我们做秘钥认证 手动写批量管理脚本名字&#x…

MySQL锁、加锁机制(超详细)—— 锁分类、全局锁、共享锁、排他锁;表锁、元数据锁、意向锁;行锁、间隙锁、临键锁;乐观锁、悲观锁

文章目录 一、概述1.1 MySQL锁的由来1.2 锁定义1.3 锁分类 二、共享锁与排他锁2.1 共享锁&#xff08;S锁&#xff09;2.2 排他锁&#xff08;X锁&#xff09;2.3 MySQL锁的释放 三、全局锁3.1 介绍3.2 语法3.3 特点 四、表级锁4.1 介绍4.2 表锁4.3 元数据锁&#xff08;Meta D…

auto_undercoat:可编辑 PSD 自动上色工具

现有的自动上色和 AI 上色只能输出单图&#xff0c;想要优化或微调的话很不方便&#xff0c;auto_undercoat 实现了通过提示词上色后&#xff0c;可以生成一个 PSD 文件在 PhotoShop 中继续编辑&#xff0c;大大提升了 AI 上色可用性&#xff01;

【路由交换技术】Cisco Packet Tracer基础入门教程(四)

Hello各位&#xff0c;好久不见&#xff0c;第四期我准备讲一下Packet Tracer中DHCP的配置&#xff0c;使用方法。 本章实验我们将拓扑中的某个路由器作为DHCP服务器&#xff08;它仍然可作为路由器使用&#xff09;&#xff0c;通过命令配置DHCP服务。独立的服务器可通过图形化…

【2024.6.23】今日科技时事:科技前沿大事件

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…