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
)
},