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因其…

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

数据集格式: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>深度爬取

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

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…

HTTPServer改进思路1

Nginx源码思考项目改进 架构模式 事件驱动架构(EDA&#xff09;用于处理大量并发连接和IO操作 优点&#xff1a;高效处理大量并发请求&#xff0c;减少线程切换和阻塞调用技术实现&#xff1a;直接使用EPOLL&#xff0c;参考Node.js的http服务器 网络通信 协议&#xff1a;HTT…

【LeetCode】对称二叉树

目录 一、题目二、解法完整代码 一、题目 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#…

友力科技数据中心搬迁方案

将当前运行机房中的所有设备、应用系统安全搬迁至新数据中心机房&#xff0c;实现平滑切换、平稳过渡&#xff0c;最大限度地降低搬迁工作对业务的影响。 为了确保企事业单位能够顺利完成数据中心机房搬迁工作&#xff0c;我们根据实际经验提供了4个基本原则&#xff0c;希望能…

异步电机矢量控制matlab simulink

1、内容简介 略 86-可以交流、咨询、答疑 异步电机、矢量控制 2、内容说明 略 3、仿真分析 略 4、参考论文 略

YOLOv2小白精讲

YOLOv2是一个集成了分类和检测任务的神经网络&#xff0c;它将目标检测和分类任务统一在一个单一的网络中进行处理。 本文在yolov1的基础上&#xff0c;对yolov2的网络结构和改进部分进行讲解。yolov1的知识点可以看我另外一篇博客&#xff08;yolov1基础精讲-CSDN博客&#xf…

设计模式-抽象工厂

抽象工厂属于创建型模式。 抽象工厂和工厂设计模式的区别&#xff1a; 工厂模式的是设计模式中最简单的一种设计模式&#xff0c;主要设计思想是&#xff0c;分离对象的创建和使用&#xff0c;在Java中&#xff0c;如果需要使用一个对象时&#xff0c;需要new Class()&#xff…