概述

前面有两篇文章分别介绍了矢量数据点和线、面的实现，本文讲讲静态图片的绘制和WMS服务的展示。

4.绘制图片

图片的绘制我们分两种：静态图片和WMS服务。

4.1 静态图片

绘制静态图片我们只需要两个参数：图片地址和图片四至。实现代码如下：

/*** 绘制静态图片* @private*/
ImageLayer.prototype._drawStaticImage = function () {const that = this;const extent = that._params.extent;const url = that._params.url;const pixelMin = that._map2pixel([extent[0], extent[1]]);const pixelMax = that._map2pixel([extent[2], extent[3]]);const width = Math.abs(pixelMax.x - pixelMin.x);const height = Math.abs(pixelMax.y - pixelMin.y);const img = new Image();img.src = url;img.onload = function () {that._ctx.drawImage(img, pixelMin.x, pixelMax.y, width, height);}
}

实现后效果如下：

4.2绘制WMS服务

一个wms服务的请求应包括以下参数：

{SERVICE: 'WMS',REQUEST: 'GetMap',FORMAT: 'image/png',TRANSPARENT: true,LAYERS: that._params.layer,SRS: 'EPSG:3857',WIDTH: width,HEIGHT: height,BBOX: projMin.concat(projMax).join(',')
}

一个完整的wms的请求地址如：http://localhost:8081/geoserver/lzugis/wms?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=lzugis:china_prov_people&SRS=EPSG:3857&WIDTH=1920&HEIGHT=969&BBOX=5721121.240344884,1414403.022565099,17727742.969104737,7473994.926298538。wms的实现方式如下：

/*** 绘制wms服务* @private*/
ImageLayer.prototype._drawWmsImage = function () {const that = this;let extent = that._map.getBounds().toArray();extent = extent[0].concat(extent[1]);// 超范围处理const xmin = extent[0] < -180 ? -180 : extent[0];const ymin = extent[1] < -90 ? -90 : extent[1];const xmax = extent[2] > 180 ? 180 : extent[2];const ymax = extent[3] > 90 ? 90 : extent[3];const pixelMin = that._map2pixel([xmin, ymin]);const pixelMax = that._map2pixel([xmax, ymax]);const width = Math.round(Math.abs(pixelMax.x - pixelMin.x));const height = Math.round(Math.abs(pixelMax.y - pixelMin.y));const projMin = turf.projection.toMercator([xmin, ymin]);const projMax = turf.projection.toMercator([xmax, ymax]);const wmsParams = {SERVICE: 'WMS',REQUEST: 'GetMap',FORMAT: 'image/png',TRANSPARENT: true,LAYERS: that._params.layer,SRS: 'EPSG:3857',WIDTH: width,HEIGHT: height,BBOX: projMin.concat(projMax).join(',')};let url = that._params.url;for(const key in wmsParams) {const join = url.indexOf('wms?') !== -1? '&': '?';url += `${join}${key}=${wmsParams[key]}`;}const img = new Image();img.src = url;img.setAttribute('crossOrigin', 'anonymous');img.onload = function () {that._ctx.drawImage(img, pixelMin.x, pixelMax.y, width, height);}
}

实现后效果如下：

跟牛老师一起学WEBGIS——WEBGIS实现（绘制图片）相关推荐

跟牛老师一起学WEBGIS——WEBGIS基础（基础概念）
1.基础概念 1.1 定义 WebGIS是一种在Internet或Intranet环境下基于HTTP协议的用来存储.管理.分析.发布和共享地理信息的B/S模式分布式计算机应用系统. 1.2 基本特征 ...
跟牛老师一起学WEBGIS——GIS基础（空间数据）
3.空间数据 3.1 空间数据模型空间数据模型可以分为三种: 场模型:用于描述空间中连续分布的现象: 要素模型:用于描述各种空间地物: 网络模型:可以模拟现实世界中的各种网络: 1. 场模型对于模 ...
跟牛老师一起学WEBGIS——WEBGIS实现（绘制切片）
概述前面已经有三篇文章分别讲述了点.线和面.图片的绘制,在本文讲讲如何实现切片的绘制. 5. 绘制切片前面的文章地图切片提到了切片的几个重要参数:切片范围.切片原点.分辨率,这些概念在实现切片的调 ...
跟牛老师一起学WEBGIS——WEBGIS基础（WMS服务）
2.2 WMS服务 WMS是Web Map Service(网络地图服务)的缩写,是开放地理空间联盟 (OGC) 定义提供和使用动态地图时需遵守的国际规范.到目前为止,已发布了四个版本的 WMS 规范 ...
跟牛老师一起学WEBGIS——WEBGIS基础（地图切片）
2.1 切片服务 1.定义瓦片数据是将矢量或影像数据进行预处理,采用高效的缓存机制(如金字塔)形成的缓存图片集,采用"级.行.列"方式进行组织,可在网页中快速加载.因此,瓦片地图 ...
对于牛老师作业陈老师作业补充（老陈、小石头的典型用户、用例图、场景）...
对于牛老师作业陈老师作业补充(老陈,小石头的典型用户.用例图.场景) 一 : 典型用户 (1)名字:小石头性别:男年龄: 8岁职业:学生收入:无知识层次能力:小学二年级生活/工作 ...
我们学校一牛老师的语录
我们学校一牛老师的语录<转载> 来天大都快四年多了,本科开学就听说了天大四大才子这么一说,但一直以来都没有机会了解下,现在上了研究生,无意中拾起了这个想法,终于在这周一蹭了他一节美学概论, ...
牛客2020年七夕节比赛 D.拜托了，牛老师
牛客2020年七夕节比赛 D.拜托了,牛老师题目链接题目描述时钟指向0点,又是新的一天.今天是七夕节,看着朋友圈牛云.牛郭.牛陈.牛余.牛lan等脱单牛准点发送的虐牛图,牛牛心理丝毫没有波动,因 ...
拜托了，牛老师(DFS)
拜托了,牛老师(DFS) 思路:dfsdfsdfs,因为nnn最大只有1e61e61e6,考虑因数最多只有两百多,因为要求因数不同,可以考虑以递增顺序剪枝dfsdfsdfs. 时间复杂度:O(kn)O ...

跟牛老师一起学WEBGIS——WEBGIS实现（绘制图片）

概述

4.绘制图片

4.1 静态图片

4.2绘制WMS服务

跟牛老师一起学WEBGIS——WEBGIS实现（绘制图片）相关推荐

最新文章

热门文章