OpenLayer4与mapV结合蜂巢图效果

在这里mapV是一款数据可视化的软件，数据的展示的效果灰常炫酷，但是问题来了，mapV是百度出的，是基于百度地图api做的，百度地图api是不开源的，说到是不是感觉很绝望，如果想做到mapV和OpenLayer结合，我们可以超图的一款api基于openlayer开发的api,刚好该api也结合mapV,我们可以间接结合二者。

来张图：

一、js文件引入

    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"><script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script><script src="http://mapv.baidu.com/build/mapv.min.js"></script><link href="../script/leaflet/Supermapopenlayers/iclient9-openlayers.css" rel="stylesheet" /><script src="../script/leaflet/Supermapopenlayers/iclient9-openlayers.js"></script>

二、关于mapV声明以及数据添加（核心）

        var randomCount = 300;var data = [];var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];// 构造数据for (var i = 0; i < 300; i++) {var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);data.push({geometry: {type: 'Point',coordinates: ol.proj.transform([cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4], 'EPSG:4326', 'EPSG:3857')},count: 30 * Math.random()});}      var dataSet = new mapv.DataSet(data);//参数设置var mapvOptions = {fillStyle: 'rgba(55, 50, 250, 0.8)',shadowColor: 'rgba(255, 250, 50, 1)',shadowBlur: 20,max: 100,size: 50,label: {show: true,fillStyle: 'white'},globalAlpha: 0.5,gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)" },draw: 'honeycomb'};var options = {map: map,dataSet: dataSet,mapvOptions: mapvOptions};

三、全部源码

<!DOCTYPE html>
<html lang="en-US">
<head><meta charset="UTF-8"><!--<script type="text/javascript" include="mapv" src="../script/leaflet/Supermapopenlayers/include-openlayers.js"></script>--><title></title><link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"><script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script><script src="http://mapv.baidu.com/build/mapv.min.js"></script><link href="../script/leaflet/Supermapopenlayers/iclient9-openlayers.css" rel="stylesheet" /><script src="../script/leaflet/Supermapopenlayers/iclient9-openlayers.js"></script><!--<script src="../script/leaflet/Supermapopenlayers/include-web.js"></script>-->
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%"><div id="map" style="width: 100%;height:100%"></div><script type="text/javascript">function getTdtLayer(lyr) {var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}";var layer = new ol.layer.Tile({source: new ol.source.XYZ({url: url})});return layer;}var vec_c = getTdtLayer("vec_w");var cva_c = getTdtLayer("cva_w");var map = new ol.Map({target: 'map',layers: [vec_c, cva_c],view: new ol.View({center: ol.proj.transform([105.403119, 38.028658], 'EPSG:4326', 'EPSG:3857'),zoom: 4,projection: 'EPSG:3857'})});var randomCount = 300;var data = [];var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];// 构造数据for (var i = 0; i < 300; i++) {var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);data.push({geometry: {type: 'Point',coordinates: ol.proj.transform([cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4], 'EPSG:4326', 'EPSG:3857')},count: 30 * Math.random()});}      var dataSet = new mapv.DataSet(data);//参数设置var mapvOptions = {fillStyle: 'rgba(55, 50, 250, 0.8)',shadowColor: 'rgba(255, 250, 50, 1)',shadowBlur: 20,max: 100,size: 50,label: {show: true,fillStyle: 'white'},globalAlpha: 0.5,gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)" },draw: 'honeycomb'};var options = {map: map,dataSet: dataSet,mapvOptions: mapvOptions};map.addLayer(new ol.layer.Image({source: new ol.source.Mapv(options)}));</script>
</body>
</html>

四、总结

蜂巢图也是散点聚合的一种，虽然并不是很常用，感觉效果很赞，超图也有基于leaflet的api,这些api都是开源的，以前认为api开不开源没啥区别，现在感觉开源的东西是真的好，不仅会用，还可以自己扩展。

OpenLayer4与mapV结合蜂巢图效果相关推荐

php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
安卓设置菊花动画_Android仿ios加载loading菊花图效果
项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况 ...
jquery点击缩略图切换视频播放的视频切换焦点图效果
一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器, ...
图片插值数据_结合PS用这招来增强ArcGIS插值图出图效果
1 概述在一些科研领域,经常会遇到使用插值的方式进行处理,并生成最终的插值图.插值图在ArcGIS里面非常容易生成,只要具备了采用点数据,通过ArcToolBox里面的插值的工具可以直接生成最终的插 ...
Android开发p图软件,媲美大神P图效果 Android软件抠图神手
媲美大神P图效果 Android软件抠图神手 2013年02月20日 01:50作者:杨霏霏编辑:杨霏霏文章出处:泡泡网原创分享泡泡网手机频道2月20日 PS的功能大家耳熟能详,其中抠图便是各位P ...
Android 循环滚动控件ViewFlipper，可实现跑马灯或轮播图效果
ViewFlipper--Android循环滚动控件 1.效果如下: 2.实现方法 (1)创建进出动画上下滚动动画 y_in.xml <?xml version="1.0" ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
需求实现轮播图效果 1022
需求实现轮播图效果图片素材 https://img13.360buyimg.com/da/s1180x940_jfs/t1/127256/5/8166/72936/5f223421Ed9f6be7 ...

OpenLayer4与mapV结合蜂巢图效果

OpenLayer4与mapV结合蜂巢图效果相关推荐

最新文章

热门文章