openlayers 其他坐标系散列点绘制图像

前言： 照道理来说应该是与昨天刚写的那个是差不多的。不过实现上略有曲折。上一个是以canvas为核心，先画出正确的图像再渲染至地图上，而这次是直接把这个由点组成得到图像绘制到地图上。所以不可避免的，我们只能使用ol原生提供的大量数据的渲染API。
首先请确认你的版本存在WebGLPointsLayer ，
在ol/layer目录下可以找到webGLPoints，就说明存在。https://openlayers.org/en/latest/examples/webgl-points-layer.html。从这个示例中可以看出，style 的设置与以往new 一个style类不同，它是只接收字面量参数的。啥是字面量参数？简单来说就是一串指定的字符串，会被识别并处理。 这里上方示例也有。重点关注如下

完成示例：

数据类型

数据就不过多占用篇幅，详情可查看我的上篇文章， 说直白点，经纬度 +值，跟最大最小值就可以。

代码

// 绘制扇形图
        drawFanChart: function (map) {
            let header = testdata.header
            let data = testdata.data
            let valSize = header.valSize
            const projection = map.getView().getProjection()
            let source = new VectorSource()
            //颜色
            let colors = []
            let legendDate = datalist[0].legendDate
            for (let i = 0; i < legendDate.length; i++) {
                colors.push(legendDate[i].color)
            }
            // colors: [ [111,111,111] , [0,0,0] ] 
            // interpolate 字面量 通过在输入对和输出对之间对区间做判断，返回插值。
            // linear 字面量 线性的 get val  获取 feature 的 val 属性 进行判断.
            let literColorStyle = ['interpolate', ['linear'], ['get', 'val'] ]
            let [minData, maxData] = [header.valMin, header.valMax]
            let legendLen = legendDate.length;
            // 每段间隔数   从 mindata 开始
            let diff = (maxData - minData) / (legendLen - 1);
            for(let i = 0;i < legendLen;i++){
                console.log(legendDate[i].color.join(','));
                literColorStyle.push(minData + diff * i, 'rgb(' + legendDate[i].color.join(',') +')');
            }
            console.log(literColorStyle);
            const style = {
                symbol: {
                    symbolType: 'circle',
                    size: 8,
                    color: literColorStyle,
                    opacity: 1,
                },
            }

            let features = []
            for (let i = 0; i < valSize; i++) {
                let pos = transform(
                    [data.lon[i], data.lat[i]],
                    'EPSG:4326',
                    projection
                )
                features.push(
                    new Feature({
                        geometry: new Point(pos),
                        val: data.val[i]
                    })
                )
            }

            source.addFeatures(features)

            const layer = new WebGLPointsLayer({
                source,
                style,
                disableHitDetection: false,
            })


            map.addLayer(layer)
        },

修改 20220106

嗯，后面还是老老实实改成栅格类的数据了，缩放到某个层级的时候会造成看到的是一堆密密麻麻的点， 所以这个标题起的并不合适。但写也写了 ，姑且先看着先把。