Mapv 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Mapv 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票

软件简介

Mapv 是一款基于百度地图的大数据可视化开源库,可以用来展示大量的点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据。

浏览器支持

Mapv使用canvas开发,支持现在被称为“现代”浏览器, 通常兼容除了IE8及IE以下版本的其他大部分浏览器。

使用

<script src="dist/mapv.js" charset="utf-8"></script>

开发调试

安装相关的node插件

npm install

执行grunt监听src代码变化

grunt

示例

访问更多示例地址

point_simplepoint_bubblepoint_heatmappolygon_intensitypolyline_simplepolyline_simple_animation

示例代码

创建mapv对象

// 第一步创建mapv示例var mapv = new Mapv({
    map: map  // 百度地图的map实例});

创建点数据图层

// 创建一个图层var layer = new Mapv.Layer({
    zIndex: 3, // 图层的层级
    mapv: mapv, // 对应的mapv
    dataType: 'point', // 数据类型,point:点数据类型,polyline:线数据类型,polygon:面数据类型
    //数据,格式如下
    data: [
        {
            lng: 116.46507, // 经度
            lat: 39.929101, // 纬度
            count: 1 // 当前点的权重值
        },
        {
            lng: 116.43507,
            lat: 39.909101,
            count: 2
        }
    ],
    drawType: 'simple', // 渲染数据方式, simple:普通的打点, [更多查看类参考](https://github.com/huiyan-fe/mapv/wiki/%E7%B1%BB%E5%8F%82%E8%80%83)
    // 渲染数据参数
    drawOptions: {
        fillStyle: "rgba(255, 255, 50, 1)",  // 填充颜色
        strokeStyle: "rgba(50, 50, 255, 0.8)", // 描边颜色,不传就不描边
        lineWidth: 5, // 描边宽度
        radius: 5, // 半径大小
        unit: 'px' // 半径对应的单位,px:默认值,屏幕像素单位,m:米,对应地图上的大约距离,18级别时候1像素大约代表1米
    }
});

创建线数据图层

var layer = new Mapv.Layer({
    mapv: mapv,
    dataType: 'polyline',
    data: [
        {
            geo: [
                [116.39507, 39.879101],
                [116.49507, 39.889101],
                [116.46507, 39.929101],
                [116.43507, 39.909101]
            ],
            count: 10
        }
    ],
    drawType: 'simple',
    zIndex: 5,
    animation: true,
    drawOptions: {
        lineWidth: 2,
        strokeStyle: "rgba(0, 0, 255, 1)"
    },
    animationOptions: {
        radius: 10
    }
});

创建面数据图层

var layer = new Mapv.Layer({
    zIndex: 3,
    mapv: mapv,
    dataType: 'polygon',
    data: [
        {
            geo: [
                [116.39507, 39.879101],
                [116.49507, 39.889101],
                [116.46507, 39.929101],
                [116.43507, 39.909101]
            ],
            count: 10
        }
    ],
    drawType: 'simple',
    drawOptions: {
        lineWidth: 8,
        strokeStyle: "rgba(255, 255, 0, 1)",
        fillStyle: "rgba(255, 0, 0, 0.8)"
    }
});

谁在使用

百度慧眼

百度交通云

资源

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (5)

加载中
赞一个 #Mapv#
2015/09/13 16:39
回复
举报
很刁 赞一下百度 #Mapv#
2015/09/13 19:00
回复
举报
我去,功能这么强! #Mapv#
2015/09/13 19:13
回复
举报
收藏了 #Mapv#
2015/09/13 19:24
回复
举报
同志们,请问如何清除 生成的new Mapv.Layer 图层啊? #Mapv#
2015/11/10 11:03
回复
举报
更多评论
暂无内容
发表了博客
2018/08/16 21:13

OpenLayer4与mapV结合蜂巢图效果

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

0
0
发表于大前端专区
2016/11/15 10:25

百度 mapv地理信息可视化开源库

http://mapv.baidu.com/

0
0
发表了博客
2019/06/03 19:38

arcgis api 4.x for js 图层拓展篇之mapvLayer(附源码下载)

因为在项目开发过程中,使用的arcgis js api版本是4.7,并不能支持客户端渲染热力图,想到arcgis js api 4.x的渲染是基于canvas,故琢磨着是否能借助类似于mapV、echart、heatmap.js等同样基于canvas的优秀可视化库来操作,本篇主要讲述拓展支持mapV图层的过程,我们可以参看mapV的相关说明,它的渲染是基于我们的屏幕坐...

0
0
发表于开发技能专区
07/17 21:39

聊聊dubbo-go的GenericFilter

序 本文主要研究一下dubbo-go的GenericFilter GenericFilter dubbo-go-v1.4.2/filter/filter_impl/generic_filter.go const ( // GENERIC //generic module name GENERIC = "generic" ) func init() { exte......

0
0
发表了博客
2019/03/16 09:31

可视化&地图__公司收集

原文地址:https://github.com/zhongcaiwei/Data-visualization-technology-sharing 一、数据可视化企业(部分) 数字冰雹 光启元-腾讯 DataV数据可视化-阿里云 卡巴斯基 Skyline Supermap Supermap IEarth 中视典 城市数据派 GeoHey极海 北京优锘科技 火星科技 (基于 cesium ,案例大部分可以在GitHub上找到 YanzheZh...

0
0
06/05 16:31

示例中心全新发布,应用效果所见即所得

本文作者:用****9 示例中心全新发布,应用效果所见即所得,覆盖多端,样式丰富,还可以“一键复制”直接应用到自身业务,真正实现“零门槛”接入。 想实现一个基于位置服务的功能,但不知道如何做? 想好了功能如何实现,但不知道效果怎么样? 看到了好的效果,想“一键Copy”? ... 很多开发者可能或多或少都会遇到相似...

0
0
发表于开发技能专区
2016/11/15 10:22

百度地图划多边形圈,并判断某个经纬度是否在某个圈中

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #filter { float: left; width: 30%; height: 100%; } #map { width: 70%; height: 100%; } #dealers_list { margin: 10px; overf...

0
0
发表于服务端专区
01/02 16:30

百度地图-离线地图-兼容百度API

一、介绍 完全基于百度API,支持离线矢量瓦片本地访问。 支持各种自定义样式 自动下载矢量瓦片(地图自动移动、自动缩放) 手动下载矢量瓦片(手动 拖动访问地图即可) Vue+ElementUI控制面板 二、操作指南 访问:...

0
1
发表于AI & 大数据专区
04/08 12:29

GIS:开源webgl大数据地图类库整理

随着webgl的发展,涌现了一大批的地图大数据展示类库,有商用的,也有开源的,这里整理了一些典型的开源类库。 一、echarts及echarts-gl 国内百度开源的图表类库,熟知的是做各类统计图,其中也有地图相关方面的应...

0
0
发表了博客
2018/04/23 17:05

gis和threejs的学习资料

*********************************** 基础知识/名词 瓦片/矢量瓦片 GeoJson - 绘制GeoJson看数据, geojson规范, 中文版 *********************************** WEB前端地图框架 Openlayers (3.x apiDoc http://geoadmin.github.io/ol3/apidoc/) mapbox-gl-js *********************************** Geo可视化 turf.js ...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
5 评论
396 收藏
分享
返回顶部
顶部