前言

openlayers5-webpack 入門開發系列環境知識點了解：

node 安裝包下載
webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址

webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學

vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯

openlayers5 api文檔介紹，詳細介紹 openlayers5 每個類的函數以及屬性等等

openlayers5 在線例子

內容概覽

openlayers5 結合 echarts4 實現散點圖
源代碼 demo 下載

效果圖如下：

地圖加載代碼如下：

const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
],
view: new View({
center: [113.53450137499999, 34.44104525],
projection: 'EPSG:4326',
zoom: 6
})
});

echarts數據源設置：

function getJSON (url, callback) {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open('get', url, true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
callback(xhr.response);
} else {
throw new Error(xhr.statusText);
}
};
xhr.send();
}
 
getJSON('data.json', function (res) {
if (res) {
var data = res.locations;
var geoCoordMap = res.coordinates;
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var option = {
title: {
text: '全國主要城市空氣質量',
subtext: '',
sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
openlayers: {},
legend: {
orient: 'vertical',
y: 'top',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff'
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
};
}
});

hideOnMoving=false 設置地圖移動過程中不隱藏 echarts 效果，hideOnZooming=false 設置地圖縮放過程中不隱藏 echarts 效果，stopEvent =false 設置不阻止echarts 事件

文章提供源碼，對本專欄感興趣的話，可以關注一波

本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請點擊舉報。

精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

前言

內容概覽