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);

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

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

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

相关文章

Python爬虫-淘宝搜索热词数据

前言 本文是该专栏的第70篇,后面会持续分享python爬虫干货知识,记得关注。 在本专栏之前,笔者有详细针对“亚马逊Amazon搜索热词”数据采集的详细介绍,对此感兴趣的同学,可以往前翻阅《Python爬虫-某跨境电商(AM)搜索热词》进行查看。 而在本文,笔者将以淘宝为例,获取…

【扩散模型(五)】IP-Adapter 源码详解3-推理代码

系列文章目录 【扩散模型(一)】中介绍了 Stable Diffusion 可以被理解为重建分支(reconstruction branch)和条件分支(condition branch)【扩散模型(二)】IP-Adapter 从条件分支的视…

【OAuth2系列】集成微信小程序登录到 Spring Security OAuth 2.0

作者:后端小肥肠 创作不易,未经允许严禁转载。 姊妹篇: 【Spring Security系列】权限之旅:SpringSecurity小程序登录深度探索_spring security 微信小程序登录-CSDN博客 目录 1. 前言 2. 总体登录流程 3. 数据表设计 3.1. sys…

Python测试服务器连接的实战代码

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

windows server——4.安装DNS管理器

windows server——4.安装DNS管理器 一、准备二、安装DNS管理器1.打开服务器管理器2.添加dns服务器 三、验证 一、准备 windows server电脑(已安装IIS) 静态网站数据包 二、安装DNS管理器 1.打开服务器管理器 2.添加dns服务器 点击管理——添加角色和…

Java语言程序设计基础篇_编程练习题*15.16(两个可移动的顶点以及它们间的距离)

*15.16(两个可移动的顶点以及它们间的距离) 请编写一个程序,显示两个分别位于(40,40)和(120,150) 的半径为10的圆,并用一条直线连接两个圆,如图15-28b所示。圆之间的距离显示在直线上。 用户可以拖动圆&am…

指标平台新书发布:智能驱动,数据管研用一体化新革命

在当下数字化经营的市场环境中,企业面临着前所未有的挑战和机遇。随着业务的不断扩展和市场的日益复杂,数据作为企业的核心资产,其重要性愈发凸显。然而“数据孤岛和数据不清晰”这一问题却成为了制约企业数字化进程和竞争力的关键因素。为了…

Windows下载、安装、部署Redis服务的详细流程

本文介绍在Windows电脑中,下载、安装、部署并运行Redis数据库服务的方法。 Redis(Remote Dictionary Server)是一个开源、高性能的键值存储系统,最初由Salvatore Sanfilippo在2009年发布,并由Redis Labs维护。Redis因其…

软考高级第四版备考--第27天(项目工作绩效域)

核心概念: 项目工作可使团队保持专注,并使项目活动顺序进行实现的预期目标主要包含:高效且有效的项目绩效;适合项目和环境的项目过程;干系人适当的沟通和参与;对实物资源进行了有效的管理;对采购进行有效管…

创建React应用的2种方式

一、使用create-react-app创建 1、全局安装脚手架库: create-react-app npm i -g create-react-app 2、创建项目:create-react-app (my-app)项目名称; create-react-app my-app 3、进入项目文件夹 cd my-app 4、运行项目 npm start 二、使用vite创建&…

<数据集>水果识别数据集<目标检测>

数据集格式:VOCYOLO格式 图片数量:10012张 标注数量(xml文件个数):10012 标注数量(txt文件个数):10012 标注类别数:7 标注类别名称:[Watermelon, Orange, Grape, Apple, peach, Banana, Pineapple] 序…

自建网站统计工具 Umami 替代 Google Analytics

本文首发于只抄博客,欢迎点击原文链接了解更多内容。 前言 Umami 是一款开源的网站统计工具,与 Google Analytics 相比更加的轻量,且不会收集网站用户的个人信息。同时,Umami 的仪表盘界面简洁,UI 精美,方便我们查看网站的历史统计数据。 Umami 使用方式也与 Google Ana…

n7.Nginx 第三方模块

Nginx 第三方模块 第三模块是对nginx 的功能扩展,第三方模块需要在编译安装Nginx 的时候使用参数–add-modulePATH指定路径添加,有的模块是由公司的开发人员针对业务需求定制开发的,有的模块是开 源爱好者开发好之后上传到github进行开源的模…

《0基础》学习Python——第二十四讲__爬虫/<7>深度爬取

一、深度爬取 深度爬取是指在网络爬虫中,获取网页上的所有链接并递归地访问这些链接,以获取更深层次的页面数据。 通常,一个简单的爬虫只会获取到初始页面上的链接,并不会进一步访问这些链接上的其他页面。而深度爬取则会不断地获…

计数排序(桶排序思想)

这段代码是一个计数排序算法的实现。计数排序是一种非比较排序算法,适用于整数数组,其时间复杂度为O(nk),其中n是数组长度,k是数组中的最大值。以下是该算法的步骤: 首先检查输入数组是否为空或长度小于2,…

python os库使用教程

os库使用教程 1.创建文件夹os.path.exists()检查文件是否存在os.listdir查看文件夹下的所有文件filename.endswith()查看文件列表的png或者txt结尾的所有文件shutil.move移动目标到文件夹 1.创建文件夹 先在盘符里创建一个文件用来演示,我这里…

前端JS特效第48集:terseBanner焦点图轮播插件

terseBanner焦点图轮播插件&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatibl…

word转pdf图变得模糊(解决)

日常小记 目录问题解决方案 结语 目录 问题 word转pdf图变得模糊后图变得不清晰 解决方案 首先在ppt中进行画图其次复制该图的所有元素直接复制到word&#xff0c;在粘贴中选中选择性粘贴&#xff0c;增强性图形即可解决&#xff01;&#xff01;&#xff01; 其余方案 可以…

Go语言 流程控制和循环语句

本文主要内容为Go语言中流程控制语句和循环语句介绍及示例。 目录 流程控制语句 If条件语句 If使用规则 表达式语句 Switch语句 使用fallthrough 判断表达式结果 从命令行获取参数 For循环语句 简单循环 省略循环条件 For无限循环 For循环中的continue 新型for循…

java中处理stream.filter()

在Java中&#xff0c;stream.filter方法用于对流中的元素进行筛选。filter方法接受一个Predicate&#xff08;一个返回布尔值的函数&#xff09;&#xff0c;然后返回一个包含所有匹配元素的新流。 使用场景 假设有一个包含多个元素的集合&#xff0c;需要对其中的元素进行筛…