{"action":"created","issue":{"url":"https://api.github.com/repos/huiyan-fe/mapv/issues/44","repository_url":"https://api.github.com/repos/huiyan-fe/mapv","labels_url":"https://api.github.com/repos/huiyan-fe/mapv/issues/44/labels{/name}","comments_url":"https://api.github.com/repos/huiyan-fe/mapv/issues/44/comments","events_url":"https://api.github.com/repos/huiyan-fe/mapv/issues/44/events","html_url":"https://github.com/huiyan-fe/mapv/issues/44","id":163630455,"number":44,"title":"关于绘制线热力图时，色彩始终在较小值区间的问题","user":{"login":"mirari","id":4995159,"avatar_url":"https://avatars.githubusercontent.com/u/4995159?v=3","gravatar_id":"","url":"https://api.github.com/users/mirari","html_url":"https://github.com/mirari","followers_url":"https://api.github.com/users/mirari/followers","following_url":"https://api.github.com/users/mirari/following{/other_user}","gists_url":"https://api.github.com/users/mirari/gists{/gist_id}","starred_url":"https://api.github.com/users/mirari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mirari/subscriptions","organizations_url":"https://api.github.com/users/mirari/orgs","repos_url":"https://api.github.com/users/mirari/repos","events_url":"https://api.github.com/users/mirari/events{/privacy}","received_events_url":"https://api.github.com/users/mirari/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-07-04T08:48:53Z","updated_at":"2016-07-04T09:59:28Z","closed_at":null,"body":"做线热力图的时候遇到一个坑，折腾了半天才发现问题所在，分享一下以免后人走弯路。\r\n\r\n首先，线热力图的绘制流程是：\r\n1.绘制折线，每条线都会根据count权重、max最大值来决定这条线的globalAlpha透明度。\r\n比如count是9，max是10，全局透明度就是0.9。\r\n2.取出整个画布，逐像素根据其透明度确定该像素的色彩。\r\n比如透明度是0.9，配置项的色彩区间是红色，那么就会按红色渲染该像素。\r\n\r\n但是，最大的坑就是，globalAlpha并非最终画布上像素的透明度。示例的配置项上还有一句`strokeStyle: 'rgba(0, 0, 0, 0.2)'`，这句话的效果就是，线条会采用透明度为0.2的黑色绘制。也就是说，在线条不重合的情况下，这条线在画布上的像素透明度应该是0.2*0.9=0.18。\r\n示例上的线路应该有至少4条以上的重合，所以才看到了不少红色区块。但是我所用的数据源是几乎不重合的线网，希望通过权重来展现色彩差异，因为这个缘故，结果没有一条线的透明度超过0.4，所以呈现的效果就是几乎所有的线都是最低区段的颜色，无论其权重是否接近最大值。\r\n\r\n如果你的情况与我类似，理想的配置项应该是类似这样的：\r\n```\r\ndrawOptions: {\r\n                blur: true, // 是否有模糊效果\r\n                shadowBlur: 20,\r\n                shadowColor: 'black',\r\n                max: 10, // 设置显示的权重最大值\r\n                lineWidth: 5, // 半径大小\r\n                strokeStyle: 'rgba(0, 0, 0, 1)',\r\n                maxOpacity: 0.8,//最终透明度\r\n                gradient: { // 显示的颜色渐变范围\r\n                    '0': 'blue',\r\n                    '0.2': 'cyan',\r\n                    '0.5': 'lime',\r\n                    '0.7': 'yellow',\r\n                    '1': 'red'\r\n                }\r\n            }\r\n```\r\n确保strokeStyle的透明度为1，这样每条线在不重合的情况下才能根据权重与最大值的比值正确显示其区段颜色。\r\nmaxOpacity是最终图层输出的透明度，如果一条线渲染结果是红色的，这里最终输出就是0.8透明度的红色。"},"comment":{"url":"https://api.github.com/repos/huiyan-fe/mapv/issues/comments/230253402","html_url":"https://github.com/huiyan-fe/mapv/issues/44#issuecomment-230253402","issue_url":"https://api.github.com/repos/huiyan-fe/mapv/issues/44","id":230253402,"user":{"login":"mirari","id":4995159,"avatar_url":"https://avatars.githubusercontent.com/u/4995159?v=3","gravatar_id":"","url":"https://api.github.com/users/mirari","html_url":"https://github.com/mirari","followers_url":"https://api.github.com/users/mirari/followers","following_url":"https://api.github.com/users/mirari/following{/other_user}","gists_url":"https://api.github.com/users/mirari/gists{/gist_id}","starred_url":"https://api.github.com/users/mirari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mirari/subscriptions","organizations_url":"https://api.github.com/users/mirari/orgs","repos_url":"https://api.github.com/users/mirari/repos","events_url":"https://api.github.com/users/mirari/events{/privacy}","received_events_url":"https://api.github.com/users/mirari/received_events","type":"User","site_admin":false},"created_at":"2016-07-04T09:59:28Z","updated_at":"2016-07-04T09:59:28Z","body":"@zmofei master就是默认版本吧，我用的是master最新版"}}
{"actor":{"display_login":"mirari"}}