Openlayer加载切片地图改变地图样式
Posted hpugisers
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Openlayer加载切片地图改变地图样式相关的知识，希望对你有一定的参考价值。
数据是GIS的灵魂，没有数据GIS一无用处。在我国对地理数据管控极为严格，购买数据也是及其昂贵的，在webgis开发的过程种，为了节省成本一般选择加载第三方的底图，力图天地图、谷歌、OSM等。但是这些底图已经渲染成样式了。我们如何在改变这些切片的样式。接下来讲一下实现的原理及其过程：
一、原理及其实现过程
1、原理
逐像素获取切片的rgba值进行赋值，从而改变切片底图的样式。
2、如何实现
在ol.source.XYZ的tileLoadFunction函数中，获取每一张切片。将切片重新绘制到canvas上，逐像素获取rgba的值进行判断赋值，因为涉及到渐变色的问题。这里采用将rgb三个值取平均值，使其三维变成一维形式。能够方便对rgb同色的阈值判断。
二、代码
代码是群里一位网友给出的，并非作业原创，个人只是稍加应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../script/ol3/ol.css" rel="stylesheet" />
<script src="../script/ol3/ol.js"></script>
<style>
</style>
</head>
<body>
<div id="map"></div>
<script>
function getTdtLayer(lyr)
var url = "http://t0-7.tianditu.com/DataServer?T=" + lyr + "&tk=‘token值’&X=x&Y=y&L=z";
var layer = new ol.layer.Tile(
source: new ol.source.XYZ(
url: url,
tileLoadFunction: function (imageTile, src)
let img = new Image();
img.crossOrigin = '';
img.onload = function ()
let canvas = document.createElement('canvas');
let w = img.width;
let h = img.height;
canvas.width = w;
canvas.height = h;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
let imageData = context.getImageData(0, 0, w, h);
for (var index = 0; index < w * h * 4;index+=4)
let r = imageData.data[index];
let g = imageData.data[index+1];
let b = imageData.data[index+2];
let a = imageData.data[index + 3];
let rgbAverage = (r + g + b) / 3;
if (rgbAverage > 238 && rgbAverage<245)
console.log("AAAAA");
imageData.data[index]=16;
imageData.data[index + 1]=30;
imageData.data[index + 2] = 67;
imageData.data[index + 3] = a;
context.putImageData(imageData, 0, 0);
imageTile.getImage().src = canvas.toDataURL('image/png');
img.src = src;
)
);
return layer;
let vec_c = getTdtLayer("vec_w");
//var cva_c = getTdtLayer("cva_w");
let projection = new ol.proj.Projection(
code: 'EPSG:4326',
units: 'degrees'
);
let map = new ol.Map(
target: 'map',
layers: [vec_c],
view: new ol.View(
projection: projection,
center: [116.456, 40.251],
zoom: 4
)
)
</script>
</body>
</html>
三、效果
参考文献：
1、https://www.cnblogs.com/naaoveGIS/p/11175634.html#4300200
以上是关于Openlayer加载切片地图改变地图样式的主要内容，如果未能解决你的问题，请参考以下文章