Giter Club home page Giter Club logo

mapv's Introduction

Mapv - 地图可视化工具库

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

更多文档信息请查看wiki

示例

访问更多示例地址

point_simple point_bubble point_heatmap polygon_intensity polyline_simple polyline_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)"
    }
});

谁在使用

百度慧眼

百度交通云

mapv's People

Contributors

hinikai avatar zmofei avatar

Watchers

破碎の眼泪 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.