在这里mapV是一款数据可视化的软件，数据的展示的效果灰常炫酷，但是问题来了，mapV是百度出的，是基于百度地图api做的，百度地图api是不开源的，说到是不是感觉很绝望，如果想做到mapV和OpenLayer结合，我们可以超图的一款api基于openlayer开发的api,刚好该api也结合mapV,我们可以间接结合二者。
来张图：
一、js文件引入
1 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> 2 <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> 3 <script src="http://mapv.baidu.com/build/mapv.min.js"></script> 4 <link href="../script/leaflet/Supermapopenlayers/iclient9-openlayers.css" rel="stylesheet" /> 5 <script src="../script/leaflet/Supermapopenlayers/iclient9-openlayers.js"></script>
二、关于mapV声明以及数据添加（核心）
1 var randomCount = 300; 2 var data = []; 3 var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"]; 4 // 构造数据 5 for (var i = 0; i < 300; i++) { 6 var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]); 7 data.push({ 8 geometry: { 9 type: 'Point', 10 coordinates: ol.proj.transform([cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4], 'EPSG:4326', 'EPSG:3857') 11 }, 12 count: 30 * Math.random() 13 }); 14 } 15 16 var dataSet = new mapv.DataSet(data); 17 //参数设置 18 var mapvOptions = { 19 fillStyle: 'rgba(55, 50, 250, 0.8)', 20 shadowColor: 'rgba(255, 250, 50, 1)', 21 shadowBlur: 20, 22 max: 100, 23 size: 50, 24 label: { 25 show: true, 26 fillStyle: 'white' 27 }, 28 globalAlpha: 0.5, 29 gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)" }, 30 draw: 'honeycomb' 31 }; 32 var options = { 33 map: map, 34 dataSet: dataSet, 35 mapvOptions: mapvOptions 36 };
三、全部源码
1<!DOCTYPE html> 2<html lang="en-US"> 3<head> 4 <meta charset="UTF-8"> 5 6 <!--<script type="text/javascript" include="mapv" src="../script/leaflet/Supermapopenlayers/include-openlayers.js"></script>--> 7 <title></title> 8 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> 9 <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> 10 <script src="http://mapv.baidu.com/build/mapv.min.js"></script> 11 <link href="../script/leaflet/Supermapopenlayers/iclient9-openlayers.css" rel="stylesheet" /> 12 <script src="../script/leaflet/Supermapopenlayers/iclient9-openlayers.js"></script> 13 <!--<script src="../script/leaflet/Supermapopenlayers/include-web.js"></script>--> 14</head> 15<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%"> 16 <div id="map" style="width: 100%;height:100%"></div> 17 <script type="text/javascript"> 18 19 function getTdtLayer(lyr) { 20 var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}"; 21 var layer = new ol.layer.Tile({ 22 source: new ol.source.XYZ({ 23 url: url 24 }) 25 }); 26 return layer; 27 } 28 var vec_c = getTdtLayer("vec_w"); 29 var cva_c = getTdtLayer("cva_w"); 30 var map = new ol.Map({ 31 target: 'map', 32 layers: [vec_c, cva_c], 33 view: new ol.View({ 34 center: ol.proj.transform([105.403119, 38.028658], 'EPSG:4326', 'EPSG:3857'), 35 zoom: 4, 36 projection: 'EPSG:3857' 37 }) 38 }); 39 var randomCount = 300; 40 var data = []; 41 var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"]; 42 // 构造数据 43 for (var i = 0; i < 300; i++) { 44 var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]); 45 data.push({ 46 geometry: { 47 type: 'Point', 48 coordinates: ol.proj.transform([cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4], 'EPSG:4326', 'EPSG:3857') 49 }, 50 count: 30 * Math.random() 51 }); 52 } 53 54 var dataSet = new mapv.DataSet(data); 55 //参数设置 56 var mapvOptions = { 57 fillStyle: 'rgba(55, 50, 250, 0.8)', 58 shadowColor: 'rgba(255, 250, 50, 1)', 59 shadowBlur: 20, 60 max: 100, 61 size: 50, 62 label: { 63 show: true, 64 fillStyle: 'white' 65 }, 66 globalAlpha: 0.5, 67 gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)" }, 68 draw: 'honeycomb' 69 }; 70 var options = { 71 map: map, 72 dataSet: dataSet, 73 mapvOptions: mapvOptions 74 }; 75 map.addLayer(new ol.layer.Image({ 76 source: new ol.source.Mapv(options) 77 })); 78 79 </script> 80</body> 81</html>
四、总结
蜂巢图也是散点聚合的一种，虽然并不是很常用，感觉效果很赞，超图也有基于leaflet的api,这些api都是开源的，以前认为api开不开源没啥区别，现在感觉开源的东西是真的好，不仅会用，还可以自己扩展。