echarts地图和散点图同时缩放_openlayers5-webpack 入门开发系列结合 echarts4 实现散点图（附源码下载）...

前言

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 事件

更多详情见下面链接：

openlayers5-webpack 入门开发系列结合 echarts4 实现散点图（附源码下载） － 小专栏​xiaozhuanlan.com

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家店铺：GIS之家
GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询