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

openlayers 3d 地图 非三维 立体地图 行政区划裁剪 地图背景

这是实践效果
如果没有任何基础 就看这个专栏:http://t.csdnimg.cn/qB4w0 这个专栏里有从最简单的地图到复杂地图的示例
最终效果:
在这里插入图片描述
线上示例代码:

想要做这个效果 如果你的行政区划编辑点较多 可能会有卡顿感 如果出现卡顿感需要将边界点相应减少一些 这样地图边界会相对模糊 卡顿也会明显减少

首先要有整个行政区划的边界geoJson文件 然后利用专栏里的行政区划裁剪 将地图裁剪下来

	//这是你的图片layer 放后面用于裁剪this.imageLayer = new Image({source: new ImageStatic({url: require("@/assets/images/bigData/mapBg.png"), // 背景图路径 如果希望打包的时候处理 需要使用require处理 告知打包工具 这里是一个地址imageExtent: [109.40275824, 34.3809588338, 115.4139700635, 40.75244622,],//这里就是渲染图片的大小 这里如果你不知道大小 可以在后面动态获取行政区划的边界 然后 再新建图片layer }),opacity: 1, // 设置背景图的透明度 如果透明度低 做3d地图的时候就会发现地图是凹陷的 但是也更加立体了});
//添加背景图裁剪 addBackgroundClip(event) {const clipPolygon = event.target.getFeatures()[0].getGeometry().clone();//克隆边界矩形this.imageLayer.on("prerender", function (event) {//监听背景图层渲染前var ctx = event.context;var vecCtx = getVectorContext(event);vecCtx.setStyle(//修改样式 将填充颜色制空 用来裁剪 new Style({fill: new Fill({color: "#ffffff00",}),}));ctx.save();ctx.stroke();vecCtx.drawGeometry(clipPolygon); //裁剪矩形 ctx.clip();});this.imageLayer.on("postrender", function (event) {//监听渲染后var ctx = event.context; ctx.restore();//恢复最近一次保存的绘图状态 不调用后续操作会卡住});this.map.render();//调用渲染方法},this.geoLayerExtent.getSource().once("change", this.addBackgroundClip);//对你的整个区域边界的图层进行监听 并且修改颜色 为透明this.geoLayer.getSource().once("change", this.initTextAndPoint)//监听含有子项的数据 用来添加文字和点动画 
//这个之前专栏写过 可以找一下 https://blog.csdn.net/qq_36287830/article/details/136291021 这是文章链接 模仿一下就好了var r3D = new Render3D({style: this.shanxiStyle,//样式 这里的填充色需要是透明的ghost: true,//透明 如果是false 就是透明 true貌似更立体了height: -0.2,//高度 正值向上 负值向下});this.geoLayerExtent.setRender3D(r3D);//给行政区划边界添加3d效果//这是最不重要的内容 就是通过修改层级 使他更加立体this.geoLayerExtent.setZIndex(0);this.map.addLayer(this.geoLayerExtent);this.imageLayer.setZIndex(1);this.map.addLayer(this.imageLayer);this.geoLayer.setZIndex(2);this.map.addLayer(this.geoLayer);this.pointLayer.setZIndex(3);this.map.addLayer(this.pointLayer);this.textLayer.setZIndex(3);this.map.addLayer(this.textLayer);

看完还是不太会的 可以留言或者私信

相关文章:

openlayers 3d 地图 非三维 立体地图 行政区划裁剪 地图背景

这是实践效果 如果没有任何基础 就看这个专栏:http://t.csdnimg.cn/qB4w0 这个专栏里有从最简单的地图到复杂地图的示例 最终效果: 线上示例代码: 想要做这个效果 如果你的行政区划编辑点较多 可能会有卡顿感 如果出现卡顿感需要将边界点相应…...

GEO数据挖掘从数据下载处理质控到差异分析全流程分析步骤指南

0. 综合的教学视频介绍 GEO数据库挖掘分析作图全流程每晚11点在线教学直播录屏回放视频: https://www.bilibili.com/video/BV1rm42157CT/ GEO数据从下载到各种挖掘分析全流程详解: https://www.bilibili.com/video/BV1nm42157ii/ 一篇今年近期发表的转…...

‍我想我大抵是疯了,我喜欢上了写单元测试

前言 大家好我是聪。相信有不少的小伙伴喜欢写代码,但是对于单元测试这些反而觉得多此一举,想着我都在接口文档测过了!还要写什么单元测试!写不了一点!! 由于本人也是一个小小程序猿🙉&#xf…...

【Visual Studio】Visual Studio使用技巧及报错解决合集

目录 目录 一.概述 二.Visual Studio报错问题及解决方法 三.Visual Studio操作过程中遇到的问题及解决方法 四.Visual Studio编译优化选项 五.Visual Studio快捷键 一.概述 持续更新Visual Studio报错及解决方法,包括Visual Studio报错问题及解决方法、Visua…...

服务器数据恢复—raid5阵列热备盘同步失败导致lun不可用的数据恢复案例

服务器存储数据恢复环境: 华为S5300存储中有一组由16块FC硬盘组建的RAID5磁盘阵列(包含一块热备盘)。 服务器存储故障: 该存储中的RAID5阵列1块硬盘由于未知原因离线,热备盘上线并开始同步数据,数据同步到…...

算法题目整合

文章目录 121. 小红的区间翻转142. 两个字符串的最小 ASCII 删除总和143. 最长同值路径139.完美数140. 可爱串141. 好二叉树 121. 小红的区间翻转 小红拿到了两个长度为 n 的数组 a 和 b,她仅可以执行一次以下翻转操作:选择a数组中的一个区间[i, j]&…...

万界星空科技AI低代码平台:重塑数字化创新边界

在这个日新月异的数字化时代,技术的飞速发展正以前所未有的力量重塑着每一个行业。企业如何在瞬息万变的市场环境中保持竞争力,实现业务的快速迭代与创新? 重塑开发模式,加速数字化转型 传统软件开发周期长、成本高、门槛高&…...

iredmail服务器安装步骤详解!如何做配置?

iredmail服务器安全性设置指南?怎么升级邮件服务器? iredmail是一个功能强大的邮件服务器解决方案,它集成了多个开源软件,使您能够快速部署和管理邮件服务。AokSend将逐步引导您完成安装过程,无需深入的编程知识即可轻…...

【vue深入学习第1章】Vue.js 中的 Ajax 处理:vue-resource 库的深度解析

在现代前端开发中,Ajax 请求是与后端进行数据交互的关键技术。Vue.js 作为一个渐进式 JavaScript 框架,提供了多种方式来处理 Ajax 请求,其中 vue-resource 是一个较为常用的库。尽管 vue-resource 在 Vue 2.x 之后不再是官方推荐的 Ajax 处理…...

JDK新特性(Lambda表达式,Stream流)

Lambda表达式: Lambda 表达式背后的思想是函数式编程(Functional Programming)思想。在传统的面向对象编程中,程序主要由对象和对象之间的交互(方法调用)构成;而在函数式编程中,重点…...

【ARM】MDK-服务器与客户端不同网段内出现卡顿问题

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 记录不同网段之间的请求发送情况以及MDK网络版license文件内设置的影响。 2、 问题场景 客户使用很久的MDK网络版,在获取授权时都会出现4-7秒的卡顿,无法对keil进行任何操作,彻底…...

c++树(一)定义,遍历

目录 树的定义 树的基本术语 树的初始起点:我们定义为根 树的层次: 树的定义: 树的性质 性质1: 性质2: 树形结构存储的两种思路 树的遍历模板 树上信息统计方式1-自顶向下统计 树上信息统计方式2-自底向上统…...

YOLOv5和LPRNet的车牌识别系统

车牌识别系统 YOLOv5和LPRNet的车牌识别系统结合了深度学习技术的先进车牌识别解决方案。该系统整合了YOLOv5目标检测框架和LPRNet文本识别模型 1. YOLOv5目标检测框架 YOLO是一种先进的目标检测算法,以其实时性能和高精度闻名。YOLOv5是在前几代基础上进行优化的…...

内容安全(深度行为检测技术、IPS、AV、入侵检测方法)

1、深度行为检测技术 深度行为检测技术:是一种基于深度学习和机器学习的技术,它通过分析用户在网络中的行为模式,识别异常或潜在威胁行为,从而保护网络安全和内容安全 分类: 深度包检测技术(Deep Packet…...

MySQL双主双从实现方式

双主双从(MM-SS) 前言 避免单一主服务器宕机,集群写入能力缺失 从 1 复制 主1 ,从 2 复制 主 2 主 1 复制 主 2,主 2 复制主 1 也就是 主 1 和主 2 互为主从。主1主2互为主从, 是为了以下情景&#xff0c…...

pico+unity手柄和摄像机控制初级设置

1、摄像头配置 摄像头模式、floor是追踪原点类型(将根据设备检测到地面的高度来计算追踪原点), Device 模式时,为通常理解的 Eye 模式,不会将根据设备检测到地面的高度来计算追踪原点 选择floor时,修改相…...

vxe-grid 实现配置式form搜索条件 form搜索条件框可折叠 配置式table

文章目录 效果图代码 效果图 代码 <template><div class"app-container"><vxe-grid refxGrid v-bind"gridOptions" v-if"tableHeight" :height"tableHeight"><template #billDate"{ data }"><e…...

TS相较于JS有什么优缺点

TypeScript&#xff08;TS&#xff09;是JavaScript的一个超集&#xff0c;它添加了静态类型检查和编译时的强大功能&#xff0c;目的是提高代码质量和维护性。相较于JavaScript&#xff0c;TS的主要优点和缺点如下&#xff1a; 优点&#xff1a; 类型安全性&#xff1a;通过…...

【Harmony】SCU暑期实训鸿蒙开发学习日记Day2

目录 Git 参考文章 常用操作 ArkTS的网络编程 Http编程 发送请求 GET POST 处理响应 JSON数据解析 处理响应头 错误处理 Web组件 用生命周期钩子实现登录验证功能 思路 代码示例 解读 纯记录学习日记&#xff0c;杂乱&#xff0c;误点的师傅可以掉了&#x1…...

vue3前端开发-执行npm run dev提示报错怎么解决

vue3前端开发-执行npm run dev提示报错怎么解决&#xff01;今天在本地安装初始化了一个vue3的案例demo。但是当我执行npm run dev想启动它时报错了说&#xff0c;找不到dev。让我检查package.json文件是否包含dev。如下图所示&#xff1a; 实际上&#xff0c;不必惊慌&#xf…...

解锁B站视频资源:bilibili-parse解析工具全面应用指南

解锁B站视频资源&#xff1a;bilibili-parse解析工具全面应用指南 【免费下载链接】bilibili-parse bilibili Video API 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-parse bilibili-parse是一款基于PHP开发的Bilibili视频解析工具&#xff0c;为开发者提供简…...

掌控散热:OmenSuperHub开源风扇控制与性能优化工具深度解析

掌控散热&#xff1a;OmenSuperHub开源风扇控制与性能优化工具深度解析 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普暗影精灵系列游戏本打造的开源控制软件&#xff0c;提供完全离线的硬件监控…...

从FAST_LIO到Livox HAP:ROS驱动版本升级中的消息适配实战

1. 当FAST_LIO遇上Livox HAP&#xff1a;问题诊断与场景分析 最近在实验室部署Livox HAP雷达时遇到了一个典型的技术断层问题&#xff1a;最新采购的HAP雷达只支持livox_ros_driver2驱动&#xff0c;而团队长期使用的FAST_LIO算法仍然依赖旧版livox_ros_driver。这就像给最新款…...

WiFi DensePose:用无线电波“看透“世界 — 无摄像头人体感知革命

No cameras. No wearables. No Internet. Just radio waves. 没有摄像头&#xff0c;没有可穿戴设备&#xff0c;不需要联网。只有物理世界的无线电波。&#x1f31f; 引言&#xff1a;重新定义"感知" 想象这样一个场景&#xff1a;一位独居老人在浴室摔倒&#xff0…...

从原理到上板:FPGA动态数码管的视觉暂留效应详解(Verilog/Vivado)

从原理到上板&#xff1a;FPGA动态数码管的视觉暂留效应详解&#xff08;Verilog/Vivado&#xff09; 当你在FPGA开发板上看到数码管稳定显示数字时&#xff0c;可能不会想到这背后隐藏着精妙的"视觉欺骗"。这种看似简单的动态显示技术&#xff0c;实际上是人眼生理特…...

全民拼购的“低门槛+全权益”,到底戳中了商业的哪个命门

一、先给全民拼购画个像&#xff1a;不是“割韭菜”&#xff0c;是“普惠式信任游戏”老陈一开始也怕&#xff1a;“拼购不都是‘砍一刀免费拿’‘拉3人返现’吗&#xff1f;我可不想踩红线。”我跟他说&#xff1a;新型全民拼购和传统拼购的本质区别&#xff0c;是“从‘赚快钱…...

Dify工作流HTTP请求配置全攻略:从基础到进阶的系统优化指南

Dify工作流HTTP请求配置全攻略&#xff1a;从基础到进阶的系统优化指南 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-…...

旋变信号处理中的相位问题:如何用仿真工具分析并补偿滤波电路带来的相移

旋变信号相位补偿实战&#xff1a;从仿真到硬件设计的全链路解决方案 电机控制系统中&#xff0c;旋转变压器&#xff08;旋变&#xff09;作为高精度位置传感器&#xff0c;其信号质量直接影响闭环控制性能。然而工程师们常遇到一个棘手问题——旋变反馈信号与激励信号之间的…...

深入解析MCU Systick:从基础配置到精准延时与系统时间获取实战

1. Systick定时器基础解析 Systick是Cortex-M内核内置的24位递减计数器&#xff0c;堪称MCU的"心跳发生器"。我第一次在STM32项目中使用它时&#xff0c;就像发现了一个隐藏的瑞士军刀——简单却功能强大。这个看似简单的定时器&#xff0c;实际上承担着三大核心功能…...

Python+Cartopy实战:用MODIS数据绘制全球气溶胶热力图(附完整代码)

PythonCartopy实战&#xff1a;用MODIS数据绘制全球气溶胶热力图&#xff08;附完整代码&#xff09; 当我们需要分析全球气溶胶分布时&#xff0c;卫星遥感数据提供了最全面的视角。MODIS&#xff08;中分辨率成像光谱仪&#xff09;作为NASA的重要观测工具&#xff0c;每天都…...