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

openlayers实现图层裁剪,只展示关心区域,抹掉无关区域,“抠”地图

先给大家看一下效果:

很久没有用ol了,今天突发奇想,想完成一下在ol中如何实现图层裁剪,抹掉消除非关心区域的地图的操作。过去写了有关于遮罩和掩膜的教程,现在看来好像有点低级,不足以满足需求,于是我们重新来做一下。

首先要知道ol官方是支持canvas参数传递的,就是说我们在写到比较核心的部分需要用到canvas的时候可以直接调用到context对象的。我们顺着这个思路,只需要使用ctx.clip( )这个关键的方法即可完成需求。

通常我们需要裁剪的图层都是栅格图层,比如说最经常用到的天地图。

在这里我们就以天地图为例子来演示一下如何实现裁剪。

首先第一步还是添加天地图:

  const token = "你的天地图token";
  let rasterLayer = new TileLayer({
    source: new XYZ({
      url:
        "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l

http://www.kler.cn/a/390365.html

相关文章:

  • 基于非时空的离身与反身智能
  • SAP_MM_SD_PP_FICO_视频课程几乎免费送
  • 词嵌入方法(Word Embedding)
  • [CKS] K8S ServiceAccount Set Up
  • Rust 建造者模式
  • learn-F12 Performance(性能)前端性能分析(LCP,CLS,INP)
  • ARM64环境使用docker-compose进行ElasticSearch8集群部署
  • Scala中的可变Map操作:简单易懂指南 #Scala Map #Scala
  • CTF 入门指南:从零开始学习网络安全竞赛
  • 数据结构 栈和队列
  • kafka面试题解答(四)
  • 软件测试学习记录 Day1
  • Mysql中数据添加,修改,删除
  • python实战(七)——基于LangChain的RAG实践
  • Simulink对仿真数据进行FFT频谱分析
  • Unity中IK动画与布偶死亡动画切换的实现
  • 【学习记录丨UVM】2.1uvm_component 与uvm_object
  • 人到一定年纪,要学会远离多巴胺
  • 群控系统服务端开发模式-应用开发-前端框架
  • 必应 Bing 国内广告开户及代运营服务的优势有哪些?
  • UE5.3 CineCameraRigRail组件实测
  • 实现3D热力图
  • VPN相关学习笔记
  • 企业级工位管理:Spring Boot实践
  • wget命令之Tomcat(三)
  • JVM垃圾回收详解二(重点)