echarts应用openlayers地图,黑客攻击（迁移）Demo

先上效果图

echarts用openlayers做底图，左侧可以根据选择级别进行显示，，，，，，，当然这不是我做的，虽然与设计图不符，但是效果这么好，记录一下，以备不时之需。

步骤一：npm install openlayers_echart;

步骤二：import ADLayer from ‘openlayers_echart’

步骤三：var oe = new ADLayer(option,map,echarts)

or.render()

我的代码：

 move(){var map = this.map;(function(){var geoCoordMap = {'上海': [121.4648,31.2891],'乌鲁木齐': [87.9236,43.5883],'佛山': [112.8955,23.1097],'保定': [115.0488,39.0948],'兰州': [103.5901,36.3043],'包头': [110.3467,41.4899],'北京': [116.4551,40.2539],'北海': [109.314,21.6211],'南京': [118.8062,31.9208],'南宁': [108.479,23.1152],'南昌': [116.0046,28.6633],'南通': [121.1023,32.1625],'厦门': [118.1689,24.6478],'台州': [121.1353,28.6688],'合肥': [117.29,32.0581],'呼和浩特': [111.4124,40.4901],'咸阳': [108.4131,34.8706],'哈尔滨': [127.9688,45.368],'广州': [113.5107,23.2196],'廊坊': [116.521,39.0509],'延安': [109.1052,36.4252],'张家口': [115.1477,40.8527],'徐州': [117.5208,34.3268],'德州': [116.6858,37.2107],'惠州': [114.6204,23.1647],'成都': [103.9526,30.7617],'扬州': [119.4653,32.8162],'承德': [117.5757,41.4075],'拉萨': [91.1865,30.1465],'无锡': [120.3442,31.5527],'日照': [119.2786,35.5023],'昆明': [102.9199,25.4663],'杭州': [119.5313,29.8773],'枣庄': [117.323,34.8926],'柳州': [109.3799,24.9774],'株洲': [113.5327,27.0319],'武汉': [114.3896,30.6628],'汕头': [117.1692,23.3405],'江门': [112.6318,22.1484],'沈阳': [123.1238,42.1216],'沧州': [116.8286,38.2104],'河源': [114.917,23.9722],'泉州': [118.3228,25.1147],'福州': [119.4543,25.9222],'秦皇岛': [119.2126,40.0232],'绍兴': [120.564,29.7565],'聊城': [115.9167,36.4032],'肇庆': [112.1265,23.5822],'舟山': [122.2559,30.2234],'苏州': [120.6519,31.3989],'莱芜': [117.6526,36.2714],'菏泽': [115.6201,35.2057],'营口': [122.4316,40.4297],'葫芦岛': [120.1575,40.578],'衡水': [115.8838,37.7161],'衢州': [118.6853,28.8666],'西宁': [101.4038,36.8207],'西安': [109.1162,34.2004],'贵阳': [106.6992,26.7682],'连云港': [119.1248,34.552],'邢台': [114.8071,37.2821],'邯郸': [114.4775,36.535],'郑州': [113.4668,34.6234],'鄂尔多斯': [108.9734,39.2487],'重庆': [107.7539,30.1904],'金华': [120.0037,29.1028],'铜川': [109.0393,35.1947],'银川': [106.3586,38.1775],'镇江': [119.4763,31.9702],'长春': [125.8154,44.2584],'长沙': [113.0823,28.2568],'长治': [112.8625,36.4746],'阳泉': [113.4778,38.0951],'青岛': [120.4651,36.3373],'韶关': [113.7964,24.7028]};var BJData = [[{name: '上海',value: 100}, {name: '杭州'}],[{name: '广州',value: 70}, {name: '杭州'}],[{name: '哈尔滨',value: 30}, {name: '杭州'}],[{name: '青岛',value: 50}, {name: '杭州'}],[{name: '南昌',value: 20}, {name: '杭州'}],[{name: '银川',value: 10}, {name: '杭州'}],[{name: '拉萨',value: 80}, {name: '杭州'}],[{name: '西安',value: 55}, {name: '杭州'}],[{name: '乌鲁木齐',value: 90}, {name: '杭州'}]];var convertData = function (data) {console.log(data);var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = transform(geoCoordMap[dataItem[0].name], "EPSG:4326", "EPSG:900913");var toCoord = transform(geoCoordMap[dataItem[1].name], "EPSG:4326", "EPSG:900913");if (fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord}]);}}return res;};var color = ['#a6c84c', '#ffa022', '#46bee9'];var series = [];[['杭州', BJData]].forEach(function(item, i) {series.push({type: 'lines',zlevel: 2,effect: {show: true,period: 4,trailLength: 0.02,symbol: 'arrow',symbolSize: 5,},lineStyle: {normal: {width: 1,opacity: 0.6,curveness: 0.2}},data: convertData(item[1])},{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {period: 4,brushType: 'stroke',scale: 4},label: {normal: {show: true,position: 'right',offset: [5, 0],formatter: '{b}'},emphasis: {show: true}},symbol: 'circle',symbolSize: function(val) {return 4 + val[2] / 10;},itemStyle: {normal: {show: false,color: '#f00'}},data: item[1].map(function(dataItem) {return {name: dataItem[0].name,value: transform(geoCoordMap[dataItem[0].name],"EPSG:4326", "EPSG:900913").concat([dataItem[0].value])};}),},//被攻击点{type: 'scatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {period: 4,brushType: 'stroke',scale: 4},label: {normal: {show: true,position: 'right',//                         offset:[5, 0],color: '#00ffff',formatter: '{b}',textStyle: {color: "#00ffff"}},emphasis: {show: true}},symbol: 'pin',symbolSize: 30,itemStyle: {normal: {show: true,color: '#f5f5f5'}},data: [{name: item[0],value:  transform(geoCoordMap[item[0]],"EPSG:4326", "EPSG:900913").concat([100]),}],});});var option = {// timeline: {//   axisType: 'category',//   data: [1896, 1900, 1904, 1908, 1912, 1920, 1924, 1928, 1932, 1936, 1948, 1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],//   autoPlay: true,//   playInterval: 1000,//   left: '10%',//   right: '10%',//   bottom:'0px'// },tooltip : {trigger: 'item'},visualMap: {min: 0,max: 100,calculable: true,color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],textStyle: {color: '#fff'}},series: series};var oe= new ADLayer(option,map,echarts)oe.render()})();},

我把它封装在 move方法中，因为我是用vue 写的，已经有一个openalyers的map放在map里了，我就直接用this.map 了。这个是黑客攻击的demo ,当然可以改成迁移等功能。

最后感谢https://github.com/wangbingqian110/openlayers_echart，这里面有更为详细的说明。

echarts应用openlayers地图,黑客攻击（迁移）Demo相关推荐

openlayers学习——14、openlayers结合echarts图表和地图
openlayers结合echarts图表和地图一.普通饼图.柱图二.加载炫酷地图标记前言:基于Vue,学习openlayers,根据官网demo,记录常用功能写法.本人不是专业GIS开发,只是 ...
uni-app 实现echarts地图（河北省）demo例子
目录一.效果图二.下载地址: 一.效果图二.下载地址: echarts地图(河北省)demo例子
成佩涛——iPviking:在线黑客攻击可视化地图
http://map.ipviking.com/ iPviking:在线黑客攻击可视化地图有一个由挪威公司对全世界互联网数据流攻击进行的实时检测可视化数据图,用户可以直观的看到世界各地的攻击数据,这个 ...
微信小程序使用Echarts实现省市地图（山东地图demo）
上篇写过在PC端使用Echarts实现省市地图效果,今天说下在小程序中如何使用echarts实现省市地图,这次就拿山东地图来说下. 1.首先还是下载Echarts在git上提供的组件,下载到本地放到 ...
任天堂遭史上最严重黑客攻击：完整源代码、设计文档及技术演示泄露
十三发自凹非寺量子位报道 | 公众号 QbitAI 任天堂的这一波泄露事件,可以说是相当惨烈. 多少文件被泄露? 超过2TB. 涉及什么内容? 完整源代码.设计文档,近乎一切用于构建Wii主机 ...
使用Python进行汽车黑客攻击：泄露GPS和OBDIICAN总线数据
本文会介绍一种基于Python用于从OBDII端口发送和接收CAN消息的设备,还可以从行驶中的车辆获取实时GPS坐标.所有的CAN和GPS数据都有可能被泄漏到云中,因此可以通过Web浏览器对汽车进行远 ...
2009年云计算将引发一场黑客攻击高潮
本文讲的是2009年云计算将引发一场黑客攻击高潮,[IT168 资讯]虚拟化技术.云计算和其他新兴技术的大受欢迎同样也吸引来了黑客的注意力.据安全厂商AppRiver称,2009年云计算将掀起一股黑客 ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项
由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GI ...

echarts应用openlayers地图,黑客攻击（迁移）Demo

echarts应用openlayers地图,黑客攻击（迁移）Demo相关推荐

最新文章

热门文章