前端地图之色斑图渲染（数据格式为.tif的栅格数据）（一）—

前言

项目里经常会在地图上渲染一些色斑图，比如从后台拿到的各种栅格数据（重分类数据、空间插值数据等）需要在前端页面展示，这些数据在后台处理生成。通常后台处理生成的栅格常用的格式是.tif。现在的需求就是把这些后台生成的.tif格式的栅格类数据，在前端地图进行渲染展示，不使用后台去读取tif信息返回给前端。之前做过类似的事情：在内网环境不能访问在线地图等数据的时候，还想去使用那些地图数据，那么就通过python爬虫爬取地图切片数据（天地图、百度高德），在通过geoserver发布地图服务，那么在内网环境就可以使用发布的地图数据了。我们也可以通过后台生成的栅格数据去发布一个地图服务，这样可以加载到前端去显示，但如果前端地图频繁的需要加载这种数据，这种方式就不太友好了。

思路

前端页面请求时，后台直接返回一个tif数据，此时在前端直接读取tif数据的内容（主要是读取tif数据的极值坐标、行列数、二维矩阵数据）；然后使用canvas画布进行绘制，tif中获取的行列数据确定canvas的宽高，根据矩阵数据（栅格数据所有象元值）用来确定canvas在绘制每一个像素点时所填充的颜色，其实就是把tif的二维矩阵数据用canvas画布来重现一下；最后待canvas绘制完成后，把canvas对象转成png或jpg类的图片，在把得到的png或jpg类的图片加载到地图，使用leaflet的话，直接使用L.imageOverlay方法，其中的边界位置坐标就是前面获取的tif数据的极值坐标。
**注：读取tif数据，使用插件geotiff，关于geotiff的介绍网上并不多，可以参考链接：https://www.npmjs.com/package/geotiff；用vue做项目可以安装一下geotiff，然后引用import { fromArrayBuffer } from 'geotiff’来使用fromArrayBuffer方法获取tif数据的主要信息。

关键代码

实例代码使用的是leaflet地图框架，像openlayer、cesium也测试过可以。

import { fromArrayBuffer } from 'geotiff'const renderTIFF = async (url, prodectName) => {const response = await fetch(url)const arrayBuffer = await response.arrayBuffer()console.log(arrayBuffer)const tiff = await fromArrayBuffer(arrayBuffer)const img = await tiff.getImage()const data = await img.readRasters()var meta = img.getFileDirectory();var xMin = meta.ModelTransformation[3];var xMax = xMin + meta.ModelTransformation[0] * meta.ImageWidth;var yMin = meta.ModelTransformation[7];var yMax = yMin + meta.ModelTransformation[5] * meta.ImageLength;const bounds = [xMin, yMin, xMax, yMax]const canvas = document.createElement('canvas')canvas.width = img.getWidth()canvas.height = img.getHeight()

效果

前端地图之色斑图渲染（数据格式为.tif的栅格数据）（一）——以leaflet为例相关推荐

高德地图与CAD图叠加显示方法汇总及优缺点分析
前言高德地图应用在许多领域,平常我们用的地图导航,除过正常的地图导航指引功能之外,其实还有很多实用的功能.如高德影像地图应用在包括地理.土地测量.水文学.生态学.气象学以及海洋学等方面.Auto ...
[译] 绘制路径：Android 中矢量图渲染
原文地址:Draw a Path: Rendering Android VectorDrawables 原文作者:Nick Butcher 译文出自:掘金翻译计划本文永久链接:github.com/ ...
echart地图飞线图
echart中国地图飞线图(附加省份颜色自定义) 本文参考了模拟迁徙效果图 1.vue项目安装echart,vue-baidu-map:申请百度地图ak npm install echarts -- ...
GIS二次开发：实验二地图数据访问与渲染
实验二地图数据访问与渲染一.实验目的熟悉不同数据类型对应的工作空间及其使用: 掌握矢量文件.栅格文件.个人数据库以及文件夹数据库的加载: 掌握ArcGIS engine 中图层的渲染类型及所用接 ...
搭建直播平台前端界面初步切图
搭建直播平台前端界面初步切图我们先来看下初步的成果图首页直播房间页搭建直播平台前端界面初步切图帅气的小伙伴们,有发现什么共同的特点了吗? 没错,就是它们的头部导航栏都是一样的,而vue中一个很 ...
openlayers前端地图框架
openlayer Openlayers 是开源的前端地图框架,基于Javacript开发,免费.开源的前端地图开发库, 可以很容易的开发出WebGIS系统. 链接: 网站主页它的作用主要是用于展现 ...
php静态地图api,静态图API | 百度地图API SDK
百度地图静态图API,可实现将百度地图以图片形式嵌入到您的网页中.您只需发送HTTP请求访问百度地图静态图服务,便可在网页上以图片形式显示您的地图.静态图API较之JavaScript API载入的动 ...
新图表来袭，FineReport新增热力地图、漏斗图、图表切换新功能
12月初,报表软件FineReport更新了图表插件V8.30,新增了热力地图.漏斗图.图表切换等七大新功能.新增内容如下: 一.热力地图热力地图是用来展示地理空间中点分布密集情况的图表类型.其效果 ...
滁州市区地图小区楼盘图矢量高清cdr|pdf2021年（高品质）
滁州市区地图小区楼盘图矢量高清cdr|pdf2021年(高品质).pdf导入cdr,ai软件里面另保存cdr,ai格式可以编辑内容,修改文字>下载图看:https://download.csdn ...
Qgis 如何根据范围来裁剪地图，高程图等
原创分享其实gis和qgis都差不多的!但是呢!qgis 2个小时就上手了!非常快!而我呢,平时工作的时候用的qgis非常简单,所以就挑出部分功能来讲解一下! 其实地图和高程图都是一个原理!首先,在 ...

前端地图之色斑图渲染（数据格式为.tif的栅格数据）（一）——以leaflet为例

前言

思路

关键代码

效果

前端地图之色斑图渲染（数据格式为.tif的栅格数据）（一）——以leaflet为例相关推荐

最新文章

热门文章