LeaFlet结合leaflet-dvf实现数据可视化

前言：说起来GIS我觉得侧重于分析，渲染展示，做出来一些直观的专题图让人一眼就能了解数据的含义，今天结合的leaflet的插件实现数据的可视化，该插件可以做很多的功能，下面是一些地址：

api插件地址：https://github.com/humangeo/leaflet-dvf/wiki/6.-Markers#lstarmarker

在线引用地址：https://cdnjs.com/libraries/leaflet-dvf

关于一些饼状图、直方图demo展示：http://humangeo.github.io/leaflet-dvf/examples/html/markers.html

放张图：

一、关于js和css设置（我是在线引用的）

    <link href="../script/leaflet/leaflet.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" integrity="sha256-Nd2GYmWjQVljoYgRUP2AWWniAYagCg1k7QhXa9N1kLg=" crossorigin="anonymous" /><script src="../script/leaflet/leaflet.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script><style>#map {width: 100%;height: 1000px;}</style>

二、关于饼状图、直方图使用（这里只解释直方图，其他类似）

       //直方图var colorValue = Math.random() * 360;//设置直方图的样式var options = {color: '#000',weight: 1,fillColor: 'hsl(' + colorValue + ',100%,50%)',radius: 20,fillOpacity: 0.7,rotation: 0.0,position: {x: 0,y: 0},offset: 0,width: 8};//设置每个直方的数据options.data = {'dataPoint1': Math.random() * 20,'dataPoint2': Math.random() * 20,'dataPoint3': Math.random() * 20,'dataPoint4': Math.random() * 20};//设置每个直方的样式等options.chartOptions = {'dataPoint1': {fillColor: '#F2F0F7',minValue: 0,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}},'dataPoint2': {fillColor: '#CBC9E2',minValue: 0,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}},'dataPoint3': {fillColor: '#9E9AC8',minValue: -40,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}},'dataPoint4': {fillColor: '#6A51A3',minValue: 0,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}}};//声明一个直方图类对象var barChart = new L.BarChartMarker(new L.LatLng(41.92, 116.46), options);map.addLayer(barChart);

三、完整的demo

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>leaflet数据显示</title><link href="../script/leaflet/leaflet.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" integrity="sha256-Nd2GYmWjQVljoYgRUP2AWWniAYagCg1k7QhXa9N1kLg=" crossorigin="anonymous" /><script src="../script/leaflet/leaflet.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script><style>#map {width: 100%;height: 1000px;}</style>
</head>
<body><div id="map"></div><script>var map = new L.Map('map', { center: [39.92, 116.46], zoom: 10, CRS: L.CRS.EPSG4326 });L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'}).addTo(map);//饼状图显示var colorValue = Math.random() * 360;var options = {color: '#000',weight: 1,fillColor: 'hsl(' + colorValue + ',100%,50%)',radius: 40,fillOpacity: 0.7,rotation: 0.0,position: {x: 0,y: 0},offset: 0,numberOfSides: 50,barThickness: 10};options.data = {'猪肉': Math.random() * 20,'羊肉': Math.random() * 20,'牛肉': Math.random() * 20,'鸡肉': Math.random() * 20};options.chartOptions = {'猪肉': {fillColor: '#F1EEF6',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}},'羊肉': {fillColor: '#BDC9E1',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}},'牛肉': {fillColor: '#74A9CF',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}},'鸡肉': {fillColor: '#0570B0',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}}};var pieChartMarker = new L.PieChartMarker(new L.LatLng(39.92, 116.46), options);map.addLayer(pieChartMarker);//Coxcom图var colorValue = Math.random() * 360;var options = {color: '#000',weight: 1,fillColor: 'hsl(' + colorValue + ',100%,50%)',radius: 30,fillOpacity: 0.7,rotation: 0.0,position: {x: 0,y: 0},offset: 0,numberOfSides: 50,width: 10};options.data = {'dataPoint1': Math.random() * 20,'dataPoint2': Math.random() * 20,'dataPoint3': Math.random() * 20,'dataPoint4': Math.random() * 20};options.chartOptions = {'dataPoint1': {fillColor: '#EDF8FB',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}},'dataPoint2': {fillColor: '#B2E2E2',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}},'dataPoint3': {fillColor: '#66C2A4',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}},'dataPoint4': {fillColor: '#238B45',minValue: 0,maxValue: 20,maxHeight: 20,displayText: function (value) {return value.toFixed(2);}}};var CoxcombChartMarker = new L.CoxcombChartMarker(new L.LatLng(37.92, 116.46), options);map.addLayer(CoxcombChartMarker);        //直方图var colorValue = Math.random() * 360;var options = {color: '#000',weight: 1,fillColor: 'hsl(' + colorValue + ',100%,50%)',radius: 20,fillOpacity: 0.7,rotation: 0.0,position: {x: 0,y: 0},offset: 0,width: 8};options.data = {'dataPoint1': Math.random() * 20,'dataPoint2': Math.random() * 20,'dataPoint3': Math.random() * 20,'dataPoint4': Math.random() * 20};options.chartOptions = {'dataPoint1': {fillColor: '#F2F0F7',minValue: 0,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}},'dataPoint2': {fillColor: '#CBC9E2',minValue: 0,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}},'dataPoint3': {fillColor: '#9E9AC8',minValue: -40,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}},'dataPoint4': {fillColor: '#6A51A3',minValue: 0,maxValue: 20,maxHeight: 30,displayText: function (value) {return value.toFixed(2);}}};var barChart = new L.BarChartMarker(new L.LatLng(41.92, 116.46), options);map.addLayer(barChart);  </script>
</body>
</html>

四、总结

api插件本身不难，今天浪费了很多时间在这个插件显示上，后来才发现我下载的插件并不对，api本身都有错，该做引用官方的api在线地址，这才解决问题，真坑。

LeaFlet结合leaflet-dvf实现数据可视化相关推荐

Angular + Leaflet 实现房源数据可视化(附github源码)
这是什么?租房信息展示平台宏观的租房数据可视化微观的房源信息展示多条件搜索等等链接地图搜租房来龙去脉受 @李国宝的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息 ...
数据呈现 | 20大数据可视化工具测评
来源:软件定义世界(SDX)本文约2800字,建议阅读9分钟本文为你介绍能制作简单的图表.复杂的图谱及信息图的数据可视化工具. 如今学习应用数据可视化的渠道有很多,你可以跟踪一些专家博客,但更重要的一 ...
独家 | 盘点9个适用所有学科的R数据可视化包（附链接）
作者:Asha Hill 翻译:王雨桐校对:蒋雨畅本文约1900字,建议阅读8分钟. 本文将简要盘点R中常用的9个可视化包,并通过简要介绍包的特点和相关案例来帮助读者深入理解可视化包. 如果最近浏 ...
时空大数据可视化表达分析，看MapGIS七大“超能力”
文章转载自微信公众号中地数码MapGIS,版权归原作者及刊载媒体所有. 伴随着人们探索空间的过程,信息的获取范围也从局部地面.全球地表.地球各个圈层扩展到地球内外的整个空间,从原有的二维平面空间基准逐 ...
30个数据可视化超级工具_Python5个数据可视化工具
源 / 程序君 & 小象编 / 昱良数据可视化的工具和程序库已经极大丰盛,当你习惯其中一种或数种时,你会干得很出色,但是如果你因此而沾沾自喜,就会错失从青铜到王者的新工具和程序库.如果你 ...
52个实用的数据可视化工具！
来源丨原力大数据从数据获得信息的最佳方式之一是,通过视觉化方式,快速抓住要点信息.另外,通过视觉化呈现数据,也揭示了令人惊奇的模式和观察结果,是不可能通过简单统计就能显而易见看到的模式和结论. 目前 ...
12个超炫数据可视化工具_Python5个数据可视化工具
源 / 程序君 & 小象编 / 昱良数据可视化的工具和程序库已经极大丰盛,当你习惯其中一种或数种时,你会干得很出色,但是如果你因此而沾沾自喜,就会错失从青铜到王者的新工具和程序库.如果你 ...
20 款优秀的数据可视化工具，总有一款你用的到！
今天给大家分享20款优秀的数据可视化工具,欢迎收藏! /01/ 入门级工具 01 Excel Excel的图形化功能并不强大,但Excel却是分析数据的理想工具,上图是Excel生成的热力地图. 作为 ...
PoPo数据可视化第8期
PoPo数据可视化聚焦于Web数据可视化与可视化交互领域,发现可视化领域有意思的内容.不想错过可视化领域的精彩内容, 就快快关注我们吧 :) 微信订阅号:popodv_com 谷歌决定关闭云可视化服 ...
大数据可视化html模板开源_8个可靠好用的开源数据可视化工具推荐
数据可视化在数据科学领域中发挥着重要的作用.在不清楚数据的情况下,要监视和调整数据以使其按照应有的方式执行并不容易.这就是数据可视化发挥作用的地方,它把收集到的数据放到一个可视的上下文中,使数据更容易 ...

LeaFlet结合leaflet-dvf实现数据可视化

LeaFlet结合leaflet-dvf实现数据可视化相关推荐

最新文章

热门文章