先上一张目前的效果图,现在还属于demo阶段,数据都是随意添加的,视觉颜色也是网上找的,还没有进一步完善.由于项目最终使用场景是sh市某地,以下内容几乎都为sh市地图。
当前效果-上海市
从开始说一下这个东西的诞生吧！
给的效果图，需要制作成这样
在我没知道这是等压面(自我认为)之前,以我的能力，我只能看出这是热力图,那就以热力图来制作吧。其实实现热力图的方法有很多，就拿百度地图，高德地图，heatmap.js（这个没试过）这些来说都可以实现，可是呢，到时候我们的项目部署环境是内网的，无法使用这些需要依赖网络的，哎~，当时头一下就大了，但是因为项目中经常用到 ECharts ，自己又在没事的时候在 ECharts官网上看了看，就发现里面有人制作过热力图，我只需要把它改成上海市的json文件，再引用他现成的代码，不就ok了么，想着觉得有点靠谱的，那就着手开始做吧。
ECharts实例
ECharts实例
这样制作出来的效果跟给的图，还是有区别的，但是领导看了下说也勉强可以，然后当时就认为就可以了。
有了当前的基础，后期肯定还是要改进的咯。
一脸懵逼的图
就以此图为例吧，领导给我讲解了一下这种东西，初中物理里面不是有那种等高线么，那种什么山脉、山脊等等等等，然后简单的说了一写形成原理，让我用前端的技术实现出来（就是觉得之前的效果不好呗，没办法，我自己也认为有点丑）
这回依然是头大啊，咱也没见过前端写过有类似的东西啊（原谅我是只井底蛙），不过幸好没给我提期限，在完成手头工作的基础后再来寻找解决方案，中间那些无从下手的过程就省略了吧，经历了太多了，再写下去我能写几千字，直接来电硬货。
这是我改完的效果
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" />
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="./data1.js"></script>
<script src="./kriging.js-master/kriging.js"></script>
<!--几乎没太改什么,就是改了下地图中心坐标点，然后区域范围-->
这样看貌似是实现了，但是还是跟给的示例有差距呀，参考他这个好像比我的好看多了，然后仔细找了下，我俩的区别，最终发现是我的颜色的问题，我把颜色改成他这样的就好了，看上去就有点像呢。
效果图
也看到了我当前引入的路径都是在线的，存在的问题就是，当前界面加载地图很慢，等了30多秒有的区域还是白块，这个领导一看就说要解决，刚好我又看了openLayers是可以使用瓦片图的，我就想着换成瓦片图一切不就又ok了嘛，使用瓦片图中又遇到了很多坑，直接跳过了吧，要说的话又能说老半天了。
经过多个下载瓦片图的软件要付费购买会员的教训后，找到了一款依旧需要付费买会员的软件，但是经过对比，感觉这个还是蛮好用的，向我这么抠门的人会买会员？帮他门发了朋友圈，然后领了两天的试用，这足以满足我的需求，里面下载瓦片图的种类很多，谷歌地图，百度，天地图等等很多很多，我也下了好几个版本的（为啥下好几个就不说了吧，因为前面的全都失败了呀，哈哈哈哈，找的方向都是可以用来给openLayers加载的），谷歌地图瓦片图，百度地图瓦片图，高德地图瓦片图，现在我选用的是高德地图。
舍弃谷歌地图的原因：项目后期是要提供坐标点给我的，难道让我自行转换成谷歌坐标点么，还有经过公司有些模块可以感知，很大可能只给我一个地名，小区名，让我自行查经纬度，所以舍弃了吧，省的后期麻烦。
舍弃百度地图的原因：百度地图的坐标点要转换，我现在还没完全看懂kriging.js是咋玩的，所以转换的时候加载瓦片图，跟kriging有点冲突。（哎呀，我也不知道这么说这个，不过你们可以尝试一下，看下报错然后解决一下，后期可以跟我交流一下）
使用高德地图：
// 利用openLayers加载高德瓦片图
var gaodeMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'tiles/{z}/{x}/{y}.png' // tiles放置瓦片图的文件夹名
})
});
var map = new ol.Map({
layers: [gaodeMapLayer],
view: new ol.View({
center: [121.35778, 31.21618], // 中心点
projection: 'EPSG:4326', // 这个是啥投影啥的，没太了解懂，你有兴趣可以百度
zoom: 10,
minZoom:10, // 最小缩放
maxZoom:15 // 最大缩放
}),
target: 'map'
});
这些是利用kriging.js来绘制canvas图层
let params = {
mapCenter: [121.35778, 31.11618],
krigingModel: "exponential", //model还可选'gaussian','spherical'
krigingSigma2: 0,
krigingAlpha: 226,
canvasAlpha: 0.55, //canvas图层透明度
colors: [
"#006837"，
......
]
};
let WFSVectorSource = new ol.source.Vector(); // 提供矢量图层数据
let WFSVectorLayer = new ol.layer.Vector({
source: WFSVectorSource
});
map.addLayer(WFSVectorLayer);
//创建要素
for (let i = 0; i < data.features.length; i++) {
let feature = new ol.Feature({
geometry: new ol.geom.Point([
data.features[i].attributes.x,
data.features[i].attributes.y
]),
value: data.features[i].attributes.z
});
feature.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
// 设置点的样式
radius: 5, // 图中标点的大小
fill: new ol.style.Fill({ color: "#00F" }) // 图中点的颜色
})
})
);
WFSVectorSource.addFeature(feature);
}
//定义裁剪边界,提供给kriging.js来绘制图片边界
let coord = [
[
[121.977805, 31.610308],
[121.648216, 31.689803]
......
]
];
let clipgeom = new ol.geom.Polygon(coord); // 创建多边形
//绘制kriging插值图
let canvasLayer = null;
let drawKriging = function (extent) {
let values = [], // 传入的数据
lngs = [],
lats = [];
WFSVectorSource.forEachFeature(function (feature) {
values.push(feature.getProperties().value);
lngs.push(feature.getGeometry().getCoordinates()[0]);
lats.push(feature.getGeometry().getCoordinates()[1]);
});
console.log(values.length);
if (values.length > 3) {
let letiogram = kriging.train(
values,
lngs,
lats,
params.krigingModel,
params.krigingSigma2,
params.krigingAlpha
);
let ex = clipgeom.getExtent();
let grid = kriging.grid(coord, letiogram, (ex[2] - ex[0]) / 200);
//移除已有图层
if (canvasLayer !== null) {
map.removeLayer(canvasLayer);
}
//创建新图层
canvasLayer = new ol.layer.Image({
source: new ol.source.ImageCanvas({
canvasFunction: (
extent,
resolution,
pixelRatio,
size,
projection
) => {
console.log(extent);
let canvas = document.createElement("canvas");
canvas.width = size[0];
canvas.height = size[1];
canvas.style.display = "block";
//设置canvas透明度
canvas.getContext("2d").globalAlpha = params.canvasAlpha;
//使用分层设色渲染
kriging.plot(
canvas,
grid,
[extent[0], extent[2]],
[extent[1], extent[3]],
params.colors
);
return canvas;
},
projection: "EPSG:4326"
})
});
//向map添加图层
console.log(canvasLayer)
map.addLayer(canvasLayer);
} else {
alert("有效样点个数不足，无法插值");
}
};
//首次加载，自动渲染一次差值图
let extent = clipgeom.getExtent();
drawKriging(extent);
引入了data.js（当前效果-上海市，图上的那些点的数据）ol.css 、 ol.js) 、kriging.js，ol这两个之前下载的好像是最新版的还是太老版本的有点忘记了，结果页面就一片空白了，也不报错，最后根据加载高德地图的那些资料，改为了5点几的版本就出效果了。
前端新手,只为记录困惑的东西,有问题请指出,加以改正.
网友评论