百度地图结合mapvgl实现散点图（大小颜色变化）

本文主要是介绍百度地图结合mapvgl实现散点图（大小颜色变化），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图
在这里插入图片描述

点的颜色大小都是可调的

在项目中引入百度地图 ,百度地图封装的common.js，mapv，mapvgl.min.js，

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.27/dist/mapvgl.min.js"></script>

2.定义map的dom元素

<div id="map_container"></div>

3.初始化百度地图可以使用common.js封装的方法，会更加方便快捷。
不过地图容器限制了id必须为 map_container

var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京');
var map = initMap({tilt: 0,center: [cityCenter.lng, cityCenter.lat],zoom: 10,style: snowStyle})

4.准备数据源利用城市中心点经纬度，来模拟数据，实际生产中可以通过接口返回数据

// 根据城市名来随机获取 多个数据点
var data = [];
var random = 700;
var cities = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
while(random--){var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);data.push({geometry: {type: 'Point',coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]},properties: { //点的数据sales: Math.random() * 100}});
}
//控制只展示大于50的数据
data = data.filter( _ =>_.properties.sales > 50);

5.绘制数据源

//1.生成 mapvgl 视图 View
var view = new mapvgl.View({map});
//2.初始化Intensity对象 工具类，使得点随数据的大小，有差异，更直观的反应变化
var intensity = new mapvgl.Intensity({min: 0,max: 100,minSize: 5,maxSize: 30,gradient: {0: 'rgba(25,66,102,0.8)',0.3: 'rgba(145,102,129,0.8)',0.7: 'rgba(210,131,137,0.8)',1:'rgba(248,177,149,0.8)'}});//3.初始化 mapvgl 的 PointLayer对象
var pointLayer = new mapvgl.PointLayer({size: function(data){console.log(intensity.getSize(data.properties.sales));return intensity.getSize(data.properties.sales)},color: function(data){return intensity.getColor(data.properties.sales);}});
//3.将 PointLayer 对象加入 View 中
view.addLayer(pointLayer);
//4.将data 与 PointLayer 进行绑定 
pointLayer.setData(data);

6.html源码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>百度地图</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style type="">html, body, #map_container {width: 100%;height: 100%;padding: 0;margin: 0;}#map_container {width: 100%;height: 100%;}.anchorBL, .Bmap_cpyCtrl {display: none;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=mQnIhkcrCDE5ZVY0xIhpqi6w8BEINcx4"></script><script src="https://mapv.baidu.com/gl/examples/static/common.js"></script><script src="https://mapv.baidu.com/build/mapv.js"></script><script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.27/dist/mapvgl.min.js"></script><!-- 如果使用到Three.js相关的图层需要引用 --><script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.53/dist/mapvgl.threelayers.min.js"></script></head><body><div id="map_container"></div><script>var map = initBMap();var data = initData();setData(data, map);//初始化百度地图 common.js快速定义百度地图map对象function initBMap(){var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京');var map = initMap({tilt: 0,center: [cityCenter.lng, cityCenter.lat],zoom: 10,style: snowStyle})return map;}// 准备数据源	function initData(){var data = [];var random = 700;var cities = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];while(random--){var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);data.push({geometry: {type: 'Point',coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]},properties: {sales: Math.random() * 100}});}//控制只展示大于50的数据data = data.filter( _ =>_.properties.sales > 50);return data;}function setData(data, map){//绘制数据源//1.生成 mapvgl 视图 Viewvar view = new mapvgl.View({map});//2.初始化Intensity对象var intensity = new mapvgl.Intensity({min: 0,max: 100,minSize: 5,maxSize: 30,gradient: {0: 'rgba(25,66,102,0.8)',0.3: 'rgba(145,102,129,0.8)',0.7: 'rgba(210,131,137,0.8)',1:'rgba(248,177,149,0.8)'}});//3.初始化 mapvgl 的 PointLayer对象var pointLayer = new mapvgl.PointLayer({size: function(data){console.log(intensity.getSize(data.properties.sales));return intensity.getSize(data.properties.sales)},color: function(data){return intensity.getColor(data.properties.sales);}});//3.将 PointLayer 对象加入 View 中view.addLayer(pointLayer);//4.将data 与 PointLayer 进行绑定 pointLayer.setData(data);}</script></body>
</html>

这篇关于百度地图结合mapvgl实现散点图（大小颜色变化）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！