echarts热力图地图加载geoserver的地图

1、数据准备

echarts热力图加载地图可以使用GeoJSON格式的数据，geoserver的WFS服务可以获取到GeoJSON格式的数据。

获取数据接口：

http://localhost:8086/geoserver/demo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=demo%3Alayername&maxFeatures=50&outputFormat=application%2Fjson

其中localhost:8086/geoserver为部署geoserver服务的地址，typeName为图层名称，格式示例demo:layername，demo为工作区名称，layername为图层名称。

得到的GeoJSON数据结构如下

{
    "type":"FeatureCollection",
    "features":[
        {
            "type":"Feature",
            "id":"testpolygon2.1",
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[
                    [
                        [
                            [
                                -0.64073227,
                                0.43935927
                            ],
                            [
                                -0.35926773,
                                0.44622426
                            ],
                            [
                                -0.36842105,
                                0.26315789
                            ],
                            [
                                -0.63844394,
                                0.26086957
                            ],
                            [
                                -0.64073227,
                                0.43935927
                            ]
                        ]
                    ]
                ]
            },
            "geometry_name":"the_geom",
            "properties":{
                "id":1
            }
        },
        {
            "type":"Feature",
            "id":"testpolygon2.2",
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[
                    [
                        [
                            [
                                -0.35926773,
                                0.4416476
                            ],
                            [
                                -0.06636156,
                                0.44851259
                            ],
                            [
                                -0.06407323,
                                0.25171625
                            ],
                            [
                                -0.37070938,
                                0.26773455
                            ],
                            [
                                -0.35926773,
                                0.4416476
                            ]
                        ]
                    ]
                ]
            },
            "geometry_name":"the_geom",
            "properties":{
                "id":2
            }
        },
        {
            "type":"Feature",
            "id":"testpolygon2.3",
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[
                    [
                        [
                            [
                                -0.63615561,
                                0.26315789
                            ],
                            [
                                -0.36842105,
                                0.25858124
                            ],
                            [
                                -0.34324943,
                                0.05263158
                            ],
                            [
                                -0.64302059,
                                0.05720824
                            ],
                            [
                                -0.63615561,
                                0.26315789
                            ]
                        ]
                    ]
                ]
            },
            "geometry_name":"the_geom",
            "properties":{
                "id":3
            }
        },
        {
            "type":"Feature",
            "id":"testpolygon2.4",
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[
                    [
                        [
                            [
                                -0.36842105,
                                0.27002288
                            ],
                            [
                                -0.06407323,
                                0.25858124
                            ],
                            [
                                -0.03661327,
                                0.05949657
                            ],
                            [
                                -0.33867277,
                                0.04347826
                            ],
                            [
                                -0.36842105,
                                0.27002288
                            ]
                        ]
                    ]
                ]
            },
            "geometry_name":"the_geom",
            "properties":{
                "id":4
            }
        }
    ],
    "totalFeatures":4,
    "numberMatched":4,
    "numberReturned":4,
    "timeStamp":"2023-05-05T08:13:19.171Z",
    "crs":{
        "type":"name",
        "properties":{
            "name":"urn:ogc:def:crs:EPSG::4326"
        }
    }
}

geoserver中发布的地图，如图所示：

 2、echarts加载geoserver地图数据

代码如下：

drawEchart() {
            let myechart = this.$echarts.init(document.getElementById("heatechart")) // 获取需要显示图表的dom元素
            let geoJson = this.options.geoJson // 此处数据为上文中的GeoJSON数据
            let optionData = [ // 热力图显示数据，格式为：坐标，数值
                [-0.49301,0.38040,100],
                [-0.16479,0.29800,50],
                [-0.42984,0.16617,10],
            ]
            this.$echarts.registerMap('roadmap', geoJson) // 注册地图
            let option = {
                geo: {
                    map: 'roadmap',// echarts注册的地图的名称
                    z: -1,
                    roam: true, // 支持缩放
                   
                    scaleLimit: {
                        min: 1,
                        max: 15
                    },
                   
                    emphasis: { // 高亮状态下的样式
                        disabled: true
                    },
                    regions: [],
                    label: {
                        show: false
                    },
                },
                backgroundColor: '#f2efe9', // 图表背景色
                visualMap: {
                    type: 'continuous',
                    show: false,
                    min: 0,
                    max: 100,
                    inRange: {
                        color: ['blue', 'green', 'yellow', 'red'],
                        // symbolSize: [30, 100]
                    }
                },
                series: [
                    {
                        type: 'heatmap', // series图表类型
                        coordinateSystem: 'geo', // series坐标系类型
                        z: 1,
                        pointSize: 5,
                        blurSize: 3,
                        data: optionData // 显示数据
                    }
                ]
            }
            myechart.setOption(
                option
            )
},

3、展示效果