huiyan-fe / mapv

a library of geography visualization-地理信息可视化库

Mapv - 地理信息可视化开源库

主页: http://mapv.baidu.com/

备用主页: huiyan-fe.github.io/mapv/

简介 English

Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。 当前是Mapv 2.0的预发布版本，当前api是不稳定的并有可能随时发生变化。

示例

相关文档

API 参考

支持环境

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

安装使用

NPM

如果你使用NPM开发环境，可使用NPM 安装，Mapv 能很好地和诸如 Webpack、Browserify 或 fis 的 CommonJS 模块打包器配合使用。

npm install mapv

安装使用

你可以直接加载官网(mapv.baidu.com)最新的js脚本文件。如:

<script src="http://mapv.baidu.com/build/mapv.min.js"></script>

或

<script src="http://huiyan-fe.github.io/mapv/build/mapv.min.js"></script>

你也可以下载最后发布的版本。也可以使用示例中的版本。

初始化环境

npm install

开发

npm test

发布

npm run publish

谁在使用

联系我们

邮箱: [email protected]

QQ群: 321519841

许可证

Copyright (c) 2016, Baidu, Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

• Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

• Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

• Neither the name of the Baidu, Inc. nor the names of it contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

mapv's Issues

请问支持事件么？

比如我点上边的一个点，然后出现一个alert之类的。

请问是否支持世界地图

请问是否支持世界地图

同样的代码在电脑上显示好好的，在手机上连地图都没出来而且没报错，mapv支持手机浏览器吗？

需求收集

Hey~ 各位Mapv的用户大家好~
作为Mpav的开发者之一，我们希望所有人都能加入到Mapv的开发以及代码贡献的工作中，一同构建这个强大的可视化工具。

当然作为开发者，并不能完全覆盖到所有使用者的各种场景，如果你有任何希望mapv实现的需求，可以在这里提出，我们会根据大家的反馈，优先开发~ 谢谢大家

时间动画类参考

请问关于时间动画类的api参考说明吗？
想了解关于animationOptions的详细参数，另外关于动画回调接口之类的说明，谢谢

Hexagon貌似不是正六边形？以及cell的每个sizeX的计算疑问

canva绘制的代码显示，绘制的hexagon不是正六边形？此外，在计算每个cell的sizeX的时候：

    var gridStep = size / zoomUnit;
    var depthX = gridStep;
    var depthY = gridStep * 3 / 4;
    var sizeY = 2 * size * 3 / 4;
    // var yIsOdd = !!(startYMc / sizeY % 2);
    var sizeX = depthX * size;

这块代码解释不通，在pointy topped这种形式的hexagon下， sizeX理应等于gridStep，为什么还要乘上一个size？

draw:image怎么修改图片大小（width/height）

怎么向地图上的点添加点击事件呢？

找到了~

关于方形网格密度这个例子中Units的问题

看了density对应的drawOptions说明，可以选择像素（px）和米（m），我做了一个1000m的栅格密度图，但是使用百度的测量工具量出来栅格间距是850m左右，这其中是不是有大地坐标系和投影坐标系相互转换的问题？

关于traffic示例数据如何加载

请问关于traffic示例的数据是如何加载的，发现并不是road.js里的，也没有看到哪里有数据接口，请大神指点

v2版存在作用域污染

第1002行
var pixel = map.pointToPixel(new BMap.Point(coordinate[j][0], coordinate[j][1]));
在例子中运行正常是因为map是全局变量，如果例子中新建的map实例改成任意其他名字都会导致初始化报错：mapv.js:1002 Uncaught TypeError: map.pointToPixel is not a function

有没有只显示**地图的方法，还有baiduMapLayer和Layer是什么关系

为什么baiduMapLayer和Layer的用法不一样？

V2版本建议

建议新版本，为控制代码大小，在压缩时，使用配置的方式，除了基础代码，可以使用配置选择打包不同的显示效果

请问动画可否提供回调函数？

http://huiyan-fe.github.io/mapv/examples/polyline_simple_time.html
就像这个示例里的，如果只有一条曲线，
是否可以在网线运动到某一点时，得到通知？

可否配置在某一个点停留一定的时间再继续动画？

拖动地图的时候，地图上的点有时会发生轻微的抖动（同个点的绘制位置会有偏差）

请教Heatmap热力图模块的一些问题

1.radius是做什么的，为什么会画一个黑色渐变球，我看heatmap.js也有类似的代码？
2.对defaultGradient参数是如何使用的，包括colorize？
3.drawHeatmap的思路，看的不是很懂？

在webpack中使用echarts文件打包过大

实际打包后的bundle.js达到5.7M之巨,哪怕是按需引入也是同样的大小,请问具体是什么原因呢

数据一大 动画 不稳定 跑一会就失效了

数据一大 动画 不稳定 跑一会就失效了

工具条在拖动的时候，从最上端拖动到最下端，然后放手，再次就不能拖动了。

工具条在拖动的时候，从最上端拖动到最下端，然后放手，再次就不能拖动了。

点聚合point_cluster 存在问题

使用点聚合point_cluster 例子时，如果将数据点的权重即count设置为1时，如果对地图放大操作时，聚合点不再聚合后，单个的marker不会显示，请开发人员测试一下，该现象是否是bug？

v2版的蜂窝图或网格图，要如何在**显示文字标签？

旧版的蜂窝图**有累加的权重数字，新版我在文档中没找到显示文本的地方，而且无法跟网格联动，感觉只有颜色变化的视觉呈现太单调了。希望能补上这个功能。

Layer事件回调参数增加原始事件对象

目前图层的click回调只有data参数：

self.options.methods.click(data[i]);

代码：https://github.com/huiyan-fe/mapv/blob/master/src/map/baidu-map/Layer.js#L82

假设需要在点击地图时向点击位置添加InfoWindow，同时InfoWindow的渲染需要data上的信息，当前的事件回调参数无法满足此需求，因拿不到点击发生的位置

解决此问题只需在回调中传出原始事件对象即可：

self.options.methods.click(data[i], e);

运行测试出现错误

把mapv/package.json贴到自己项目根目录后，运行npm install map成功
但是运行npm test 就报以下错误：

PENG-MacBook-Pro:HousePricing PENG-mac$ npm test

> [email protected] test /Users/PENG-mac/Dropbox/rubyTest/HousePricing
> npm run watch


> [email protected] watch /Users/PENG-mac/Dropbox/rubyTest/HousePricing
> npm-watch

[build] [nodemon] 1.10.2
[build] 
> [email protected] build /Users/PENG-mac/Dropbox/rubyTest/HousePricing
> mkdir -p build && mkdir -p build/release && node -e 'process.stdout.write("export var version = \"" + require("./package.json").version + "\";\n");' > build/version.js && rollup -c

[build] [Error: Could not load null: path must be a string]
[build] [nodemon] clean exit - waiting for changes before restart

刚接触npm小白，用的是Rails，谢谢！

需要做全球迁徙图，请问mapv是否支持google地图呀？

需要做全球迁徙图，请问mapv是否支持google地图呀？
想把迁徙图的底图，改成google .http://mapv.baidu.com/examples/#qianxi.html

mapvLayer.hide() 删除图层的问题

首先是我的配置：
var options = {
strokeStyle: 'rgba(255,0, 0, 1)', // 描边颜色
lineWidth: 0.2, // 描边宽度
globalAlpha: 0.7,
gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"}
methods: {
click: function (item) {
alert("该栅格的人总数 = " + item.count);
}
}
}

我在地图上画了一个包含许多个矩形的图层，配置(options)中有一个添加了一个click事件。
当我使用 mapvLayer.hide()删除图层的时候，再次点击刚刚出现矩形的地方(现在无矩形),还是产生了单击事件。可见，mapvLayer.hide() 只是隐藏了图层，并没有真正的删除图层。
请问，这个怎么解决呢？
谢谢大家。

怎么删除图层和更新图层数据呢

RTRTRTRTRTRT

拖动地图的时候会出现图层被截断的问题

在拖动地图的时候会出现图层被截断的问题，如下图，停止拖拽后才会闪现剩余的部分

移动端和pc端都会出现，这个是百度地图的问题，还是mapv本身的实现有问题？亦或是浏览器本身的渲染问题？

动画效果开启后似乎不会在删除图层时完全释放

我仿照
http://mapv.baidu.com/examples/#baidu-map-point-heatmap-time.html
做了一个动画效果的热力图，内容随查询条件变化而刷新。
实际应用时发现，每次刷新数据，浏览器都会变得越来越卡，直至动画无法流畅播放或崩溃。

更新图层动作如下：

function (result) {
            mapvLayer&&mapvLayer.hide();
            var dataSet = new mapv.DataSet(convertData(result.data));
            mapvLayer = new mapv.baiduMapLayer(map, dataSet, option);
        }

option与例子一致：

    var option = {
        size: 13,
        gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
        max: 10,
        animation: {
            type: 'time',
            stepsRange: {
                start: 0,
                end: 100
            },
            steps: 100,
            trails: 10,
            duration: 5,
        },
        draw: 'heatmap'
    }

如果开启了动画效果，控制台会疯狂输出drawGray和changeColor的计时。
经过测试发现，只要option当中加入了animation配置信息并生成了一次内容，之后如果用不带animation的option重新生成内容，控制台就依然会疯狂输出，而不是预料中的只输出一次drawGray和changeColor，哪怕此时的热力图是静态的。
即使用map.clearOverlays()或者mapvLayer.hide()也无法将mapv图层的效果重置。

另外，在API里我只看到更新option的方法layer.update，没有更新dataSet的方法，也就是说如果图层要更新数据，只能像我现在写的一样用map.clearOverlays()、map.removeOverlay(layer)或者mapvLayer.hide()销毁并重建吧？

多次绘制时，如何请除之前已绘制的数据？

多次绘制数据时，发现绘画结果为多个数据的重叠效果，请问如何在绘制前清除，或是在插件内部把问题处理掉。

mapv首页的英文

totaly --> totally，实在看不下去了。

[开发建议]simple模式下的layer绘制能否提供类似label中的maxZoom以及minZoom属性呢？

本人开发过程中想分层次显示同一区域不同层次下的不同layer，但是一起绘制就层层覆盖了；layer属性中在mapV.js中没有找到maxZoom的相关代码，请问最近是否会添加这一功能？或者有其他的区域收缩显示不同层详细数据的方法？
谢谢。

var layer = new Mapv.Layer和 var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);的区别？

var layer = new Mapv.Layer和 var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);的区别？
如何删除前者的layer图层。

请问这是基于最新的百度地图api么

在最新的百度地图api中，关于subway，能看到成都地铁最新开放的地铁3号线，但是在mapv里面，始终没有3号线，最近项目在使用，求解!!!!!!

补充几个问题

补充几个问题：

1、所有类似intensity的值域调节控件，“上面”的bar拖动与“下面”的bar重合时，将不能复原

2、drawTypeControl可否调节位置，两种图叠加的时候，图例就重合了

3、cluster的drawOptions里面试了好几个属性都无效？包括颜色什么的

4、intensity里面linewidth只能作用于最后一个polygon；

5、choropleth的值域控件出来的效果，跟设置的splitlist有时候不一致；

谢谢！

有几个问题请教一下

有几个问题请教一下

1、在哪里调用编辑器mapvE?
2、points_density_honeycomb下的label off失效；
3、points_intensity的值域控件调整后，需要操作地图（缩放，平移等）才能生效；
4、IE10和EDGE下不支持webgl?
5、polygon_intensity的值域控件调整，地图没有反应；
6、webgl除了支持simple，还支持choropleth等其它方式吗？

谢谢！

开发计划

功能开发：

9月25日

• 点动画
• 线动画，按时间来展示
• 线按热力图展示

其他计划

• 行政区域，详细demo
• 时间轴面板开发
• 线动画功能，移动动画效果
• 数据格式支持geojson
• 图例组件优化

架构工具

2015年9月18日

• 构建工具改为gulp

其他计划

• 引入es6

3d：

• 地图
• 地球

宣传页面：

9月25日

• 官网开发上线，banner动画
• 示例在线页面开发上线

10月15日

• h5页面

编辑器优化

• 编辑器优化
• 编辑器显示数量

请问能否增加更多的coordType选择呢

目前好像只支援百度经纬度及百度墨卡托坐标，暂时没有看到gcj02，wgs84这种常见经纬度的支援

src/map/baidu-map/Layer.js 代码写错了

src/map/baidu-map/Layer.js Line 87

Layer.prototype.transferToMercator = function() {
    var projection = map.getMapType().getProjection();

应该是this.map.getMapType().getProjection();

请教一下本项目和echarts项目是啥关系？

http://echarts.baidu.com/doc/example.html
看介绍上面，有好多功能都是重合的。
echarts的功能更多一些呢。
http://echarts.baidu.com/extension/BMap/doc/example.htm
http://echarts.baidu.com/doc/example/map14.html
lhttp://echarts.baidu.com/doc/example/map18.html
http://echarts.baidu.com/doc/example/map19.html

大量线数据是很容易卡死

大约10万条轨迹已经卡死了，改context=webgl似乎没用？有没有什么解决方案？谢谢了

楼主，你好我想问下如何用到ios app开发中，有没有使用的例子

请问 mapv/examples/data/drive.js 中的坐标格式

文件中的坐标在demo中显示是在北京，格式是12945599,4812583。不是常见的116.47517, 40.0162，请问如何转换？

关于DEMO里用到的dataType是line

案例名称是polyline_simple_mofei
查看代码的时候发现当dataType是line的时候（关于line这个属性wiki里没有描述），
drawOptions内的lineWidth，globalCompositeOperation，strokeStyle这几个属性的设置都是无效的

小辈查看源代码后发现这三个属性都是静态的不支持传入参数的，略加修改后便可实现了

希望各位大神能在接下来的版本更新中修复这个问题并增加关于line这个datatype的相关描述。

万分感谢大神们开发出MAPV如此酷炫和高效的可视化产品！

关于绘制线热力图时，色彩始终在较小值区间的问题

做线热力图的时候遇到一个坑，折腾了半天才发现问题所在，分享一下以免后人走弯路。

首先，线热力图的绘制流程是：
1.绘制折线，每条线都会根据count权重、max最大值来决定这条线的globalAlpha透明度。
比如count是9，max是10，全局透明度就是0.9。
2.取出整个画布，逐像素根据其透明度确定该像素的色彩。
比如透明度是0.9，配置项的色彩区间是红色，那么就会按红色渲染该像素。

但是，最大的坑就是，globalAlpha并非最终画布上像素的透明度。示例的配置项上还有一句strokeStyle: 'rgba(0, 0, 0, 0.2)'，这句话的效果就是，线条会采用透明度为0.2的黑色绘制。也就是说，在线条不重合的情况下，这条线在画布上的像素透明度应该是0.2*0.9=0.18。
示例上的线路应该有至少4条以上的重合，所以才看到了不少红色区块。但是我所用的数据源是几乎不重合的线网，希望通过权重来展现色彩差异，因为这个缘故，结果没有一条线的透明度超过0.4，所以呈现的效果就是几乎所有的线都是最低区段的颜色，无论其权重是否接近最大值。

如果你的情况与我类似，理想的配置项应该是类似这样的：

drawOptions: {
                blur: true, // 是否有模糊效果
                shadowBlur: 20,
                shadowColor: 'black',
                max: 10, // 设置显示的权重最大值
                lineWidth: 5, // 半径大小
                strokeStyle: 'rgba(0, 0, 0, 1)',
                maxOpacity: 0.8,//最终透明度
                gradient: { // 显示的颜色渐变范围
                    '0': 'blue',
                    '0.2': 'cyan',
                    '0.5': 'lime',
                    '0.7': 'yellow',
                    '1': 'red'
                }
            }

确保strokeStyle的透明度为1，这样每条线在不重合的情况下才能根据权重与最大值的比值正确显示其区段颜色。
maxOpacity是最终图层输出的透明度，如果一条线渲染结果是红色的，这里最终输出就是0.8透明度的红色。

heatmap与地图底图在移动过程中不匹配

我通过以下两种方式对layer进行隐藏与显示操作：

• layer.canvasLayer.hide()
• layer.setMapv(null)

然后通过同样的操作使该layer正常显示，发现在正常显示之后，若此时通过鼠标移动地图，底图在移动的同时，heatmap便不再移动，而是保留在原有的相对页面的一个固定位置，造成heatmap与地图不匹配的BUG。

如何让它支持OpenLayers3?

支持OpenLayers3么?

getColorByGradient() 生成alpha的值域bug

rgba(r,g,b,a) 里面a应当是0-1的，这里离散化有点问题吧？

leaflet支持

mapv可能支持leaflet么?
或者以后有这样的打算么?
目前没有看到相关的内容

没有事件，tooltip么

bubble的dataRangeControl:false无效，一样还是会绘制

Hi,bubble set option datarangecontrol false invalid..