talkingdata / inmap Goto Github PK

View Code? Open in Web Editor NEW

2.7K 108.0 355.0 13.8 MB

大数据地理可视化

Home Page: https://fengluhome.github.io/inmap-doc

License: Apache License 2.0

JavaScript 98.77% Less 1.23%

inmap visualization data-visualization visualize-data map talkingdata

inmap's People

Contributors

Stargazers

Watchers

Forkers

chenli8 fengluhome airsola513 chenhuiliu wxy360 kilikila amwihtfei hogwartsrico gto999 gracelinmumu zzzzin wx60666 rain2372 luckytao09 libin1991 unreal0 eideo jeromehan sunshine5856 zetrosoft cube3power dconstan dodolooking sunguo justinzhanggis fighteryu dream-seeker linecode fnet123 henryleecn a70 hiekay sinlmao guardwu2015 zcc888 juqkai gaodevops xiazemin bobcui001 livewithfront qfz9527 daweifeng nemochina2008 lyqjfrog bhqt ruixj winer110 zjuhjm forging2012 booshaw zuikenai happypot ofroad 44727065 sanen zhuzhangmangxie love2157dream wangruifangweb somehow-yw ljx0305 wztboyking dengchengjiang l769829723 leeeex zmyer 0wenwu unistate qinpengwei chinpeng lsylvanus tongchengqiu pinkhide27 thinklib ralic cluo tommytong2002 huangll99 honestpixels rynechan woruoweiwang665 baozi926 brightoneqq foolee888 viktorjc98 jiaduobao xanja kinbod youngseu zzl81cn haohaodayouxi 347154468 selinafocus jinlonghe marsqi rency0812 shadowkun lukw00heck ladyia dk9761 vovoma

inmap's Issues

在安装指引的时候，直接给出一个百度地图的ak是不是不大好

百度地图的ak除了申请使用地图，还有统计、限制平台等功能，我觉得应当引导开发者去自己申请一个，而不是给出一个公共的ak。

鼠标指针和提示的位置

这个地方在鼠标放上去的时候，是一个小手，会把那个数字遮住，也就是说指针遮住了一部分提示内容。
http://inmap.talkingdata.com/#/docs/introduce 这个页面最后面的示例里。

展示的地图能否只展示**地图，并展示城市名称？

我想实现的需求是只展示**的地图，而不是世界地图，地图上展示每个城市的名称，请问这样能否实现？

热力图设置半径样式后，地图上的点全部消失，代码如下

var data=[{"count":6,"geometry":{"type":"Point","coordinates":["116.395645","39.929986"]}},{"count":6,"geometry":{"type":"Point","coordinates":["121.487899","31.249162"]}},{"count":5,"geometry":{"type":"Point","coordinates":["117.210813","39.14393"]}},{"count":4,"geometry":{"type":"Point","coordinates":["106.530635","29.544606"]}},{"count":4,"geometry":{"type":"Point","coordinates":["117.216005","31.859252"]}},{"count":8,"geometry":{"type":"Point","coordinates":["117.984943","26.050118"]}},{"count":2,"geometry":{"type":"Point","coordinates":["102.457625","38.103267"]}},{"count":9,"geometry":{"type":"Point","coordinates":["113.394818","23.408004"]}},{"count":1,"geometry":{"type":"Point","coordinates":["108.924274","23.552255"]}},{"count":2,"geometry":{"type":"Point","coordinates":["106.734996","26.902826"]}},{"count":0,"geometry":{"type":"Point","coordinates":["109.733755","19.180501"]}},{"count":2,"geometry":{"type":"Point","coordinates":["115.661434","38.61384"]}},{"count":0,"geometry":{"type":"Point","coordinates":["113.486804","34.157184"]}}];
var inmap = new inMap.Map({
  id: "allmap",
  skin: "Blueness",
  center: [105.403119, 38.028658],
  zoom: {
    value: 5,
    show: true,
    max: 18,
    min: 5
  }
});
var overlay = new inMap.HeatOverlay({
  style: {
      radius: 10, // 半径
      minScope: 0, // 最小区间,小于此区间的不显示
      maxScope: 1 // 最大区间,大于此区间的不显示
  }
});
inmap.add(overlay);
overlay.setData(data);
setTimeout(() => {
  overlay.setOptionStyle({
    radius: 20
  });
},3000);

一个建议

真的是，你们和maptalk太有缘分了，maptalk是很棒的一个开源地图js库，名字互相暧昧。。。
希望能适配maptalk的地图，百度地图毕竟是一个不开源的项目啊。期待

谁正在使用inMap，欢迎来大家反馈！

如果您和您的的公司或组织正在使用inMap，非常感谢您的支持，希望可以在这里留下您的公司信息。您的回复将成为维护者、社区用户和观望者的信心来源。
回复格式示例如下：

公司或组织：TalkingData
链接：http://www.talkingdata.com
方便的话，可以晒一晒截图

MultiPolygon is not support。

how to draw the MultiPolygon layer. do not have MultiPolygonOverLayer

setOptionStyle时legend.show从true设为false时,legend没有消失

报错信息inmap.enableEditing is not a function

iview的AutoComplete组件需要提供一个数据源，请问inmap怎么获取百度地图的数据源？

IE11下JS报错的问题

系统：windows 10 专业版64位
浏览器：IE11
URL：http://localhost:8088/examples/MoveLineOverlay.html

发现两处报错：

Array.prototype.findIndex 未定义
代码：
{
key: 'compileTooltipTemplate',
value: function compileTooltipTemplate(formatter) {
formatter = '' + formatter.replace(/\{/g, '${overItem.') + '';
this.tooltipTemplate = new Function('overItem', 'return ' + formatter); // 此行运行时报错
}

为何百度地图导出的json无法使用？

使用方法如下：
{ skin: { "featureType": "land", "elementType": "all", "stylers": { "color": "#05131fff" } } }

这样设置无法生效

Always show tooltip?

Currently, users have to hover on a data point to see the tooltip, which is inconvenient or even impossible on mobile devices.

I think it would be great if I can make tooltips always showing, or alternatively, able to add a fixed label on the map.

坐标系问题

百度地图拥有自己的坐标系，大部分使用者的Geojson中坐标点并不是百度坐标系下的，我觉得这是一个很大的问题。如果能够提供不同坐标系转到百度坐标系的接口，精度不用太高。这样的话，可能会有更多使用者。鄙人愚见，恐有不当，见谅。

如何设置主题？

大打扰了。
文档中似乎提到了可以自定义主题，但是如何自定义呢？
比如地图背景我想显示百度地图原版的样式

可以创建迁移图吗？

像这样的
http://echarts.baidu.com/echarts2/extension/BMap/doc/BMap.html

conputeAfter 这个貌似应该是computeAfter

inmap/src/overlay/PolygonOverlay.js

Line 217 in 51e9f02

this._setState(State.conputeAfter);

PointOverlay-BigData演示页面很卡

官网说效果最好的传入数据量为1W到10W，为何该演示页面8万多的数据，就很卡？是否显示大数据场景仅为在某一个缩放等级下展示大数据，而不适合切换缩放级别的场景？

网格图拖拽有问题

我在官网的demo中测试网格的时候，发现拖拽的时候，网格不随着地图移动。正常情况下，网格是根据经纬度设置位置的，可是地图的位置变化了，可是网格的位置并没有变化。这个是什么原因呢？

GriddingOverlay的配置style.type设置成'avg'没有效果

如题

扣扣技术交流群问题

现在基本上都使用微信办公的比较多，能不能提供一个微信群供大家进行技术交流啊？我申请加入扣扣群，杳无音信呢

setData是否会导致图层重绘

你好大佬，我想问个问题，就是所有涂层的setData 是否会导致图层重绘，因为我每次更新数据时都会闪动一下，闪屏，用户体验不是很好，还是我的设置有问题？如果重置，有办法去改善这种闪一下吗？期待大佬回复

inMap实例化出错

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.
at e.value (http://localhost:8080/dist/0.chunk.js:107:119623)
at Object.td_0_msgId_2 (http://localhost:8080/dist/0.chunk.js:107:119259)
at Worker.value (http://localhost:8080/dist/0.chunk.js:107:102605)

根据自定义属性值，让点选中

您好，我想根据自定义的一个值，在DotOverlay，让一个点变成选中的样子，有办法吗？

DotOverlay绘画类文档勘误

DotOverlay绘画类的文档中，发现下面几个问题：

没有style.normal.mergeCount的解释；
tooltip.offsets在示例三中是一个对象，但是在文档中的解释为Number类型
style.normal.globalCompositeOperation文档中没有解释
legend.title文档中没有解释

BMapLib.DrawingManager工具栏不兼容

想在inmap中放置工具栏，但使用BMapLib.DrawingManager后报错，提示Uncaught (in promise) TypeError: h.addControl is not a function，请问如何解决？

Baidu Map not support foreign registry?

I'd like to try this lib, but I can registry baidu map member by another country phone number.
Is there have any solution or support another kind map source? Thanks.

[Bug Report]多图层时tooltip无法正常显示问题

出现环境：Win7 x64，chrom 版本 68.0.3440.106（正式版本）（32 位）
问题复现链接：http://smartdata.b0.upaiyun.com/inmap/PointOverlay02.html
问题描述：地图上绘制的黄色小方块，tooltip无法正常显示
问题原因推测：由于在地图上移动鼠标回触发各个overlay的_tMousemove方法，各个图层会调用getTarget方法从自身的workerData中查找当前event的pixel是否存在点，当点出现在第一个图层时，会调用tooltip.render将tooltip的dom的display设置为true，但第二个图层在getTarget是返回的是null，故又会将tooltip的dom的display设置为false，故导致tooltip无法正常显示。
解决方案：目前只想到一个解决方案是在tmousemove方法中加入一个判断，即在event.geometry.pixel不变的情况下，如果gettarget方法命中一个非null的图层，在鼠标不动的情况下，不去再次调用settooltip方法。但是此方法可能无法适用于多图层点重合的情况

热力图第二次执行setData方法不生效，代码如下

var data=[{"count":9,"geometry":{"type":"Point","coordinates":["128.047414","47.356592"]}},{"count":3,"geometry":{"type":"Point","coordinates":["112.410562","31.209316"]}},{"count":7,"geometry":{"type":"Point","coordinates":["111.720664","27.695864"]}},{"count":7,"geometry":{"type":"Point","coordinates":["119.368489","33.013797"]}},{"count":0,"geometry":{"type":"Point","coordinates":["115.676082","27.757258"]}},{"count":0,"geometry":{"type":"Point","coordinates":["126.262876","43.678846"]}},{"count":4,"geometry":{"type":"Point","coordinates":["122.753592","41.6216"]}},{"count":2,"geometry":{"type":"Point","coordinates":["114.415868","43.468238"]}},{"count":7,"geometry":{"type":"Point","coordinates":["106.155481","37.321323"]}},{"count":5,"geometry":{"type":"Point","coordinates":["96.202544","35.499761"]}},{"count":2,"geometry":{"type":"Point","coordinates":["118.527663","36.09929"]}},{"count":5,"geometry":{"type":"Point","coordinates":["112.515496","37.866566"]}},{"count":7,"geometry":{"type":"Point","coordinates":["109.503789","35.860026"]}},{"count":6,"geometry":{"type":"Point","coordinates":["102.89916","30.367481"]}},{"count":4,"geometry":{"type":"Point","coordinates":["89.137982","31.367315"]}},{"count":1,"geometry":{"type":"Point","coordinates":["85.614899","42.127001"]}},{"count":4,"geometry":{"type":"Point","coordinates":["101.592952","24.864213"]}},{"count":1,"geometry":{"type":"Point","coordinates":["119.957202","29.159494"]}},{"count":8,"geometry":{"type":"Point","coordinates":["114.186124","22.293586"]}},{"count":6,"geometry":{"type":"Point","coordinates":["113.557519","22.204118"]}},{"count":2,"geometry":{"type":"Point","coordinates":["120.961454","23.80406"]}},{"count":0,"geometry":{"type":"Point","coordinates":["117.282699","31.866942"]}},{"count":3,"geometry":{"type":"Point","coordinates":["117.058739","30.537898"]}},{"count":8,"geometry":{"type":"Point","coordinates":["117.35708","32.929499"]}},{"count":5,"geometry":{"type":"Point","coordinates":["115.787928","33.871211"]}},{"count":3,"geometry":{"type":"Point","coordinates":["117.88049","31.608733"]}},{"count":9,"geometry":{"type":"Point","coordinates":["117.494477","30.660019"]}},{"count":3,"geometry":{"type":"Point","coordinates":["118.32457","32.317351"]}},{"count":3,"geometry":{"type":"Point","coordinates":["115.820932","32.901211"]}},{"count":8,"geometry":{"type":"Point","coordinates":["116.791447","33.960023"]}},{"count":9,"geometry":{"type":"Point","coordinates":["117.018639","32.642812"]}},{"count":5,"geometry":{"type":"Point","coordinates":["118.29357","29.734435"]}},{"count":8,"geometry":{"type":"Point","coordinates":["116.505253","31.755558"]}},{"count":1,"geometry":{"type":"Point","coordinates":["118.515882","31.688528"]}},{"count":3,"geometry":{"type":"Point","coordinates":["116.988692","33.636772"]}}];
var inmap = new inMap.Map({
  id: "allmap",
  skin: "Blueness",
  center: [105.403119, 38.028658],
  zoom: {
    value: 5,
    show: true,
    max: 18,
    min: 5
  }
});
var overlay = new inMap.HeatOverlay({
  style: {
      radius: 10, // 半径
      minScope: 0, // 最小区间,小于此区间的不显示
      maxScope: 1 // 最大区间,大于此区间的不显示
  }
});
inmap.add(overlay);

var mapDataPoint = [{'count': 100, 'geometry': {'type': 'Point', 'coordinates': ['116.395645', '39.929986']}}, {'count': 6, 'geometry': {'type': 'Point', 'coordinates': ['121.487899', '31.249162']}}, {'count': 5, 'geometry': {'type': 'Point', 'coordinates': ['117.210813', '39.14393']}}, {'count': 4, 'geometry': {'type': 'Point', 'coordinates': ['106.530635', '29.544606']}}, {'count': 4, 'geometry': {'type': 'Point', 'coordinates': ['117.216005', '31.859252']}}];

setTimeout(function() {
    overlay.setData(mapDataPoint);    
},3000)

setTimeout(function() {
    overlay.setData(data);    
},5000)

飞线图remove图层时，飞线动画（LineStringAnimationOverlay）没有一起移除，代码如下

let data = [{"from":{"name":"广州","coordinates":[113.270793,23.135308]},"to":{"name":"衡山","coordinates":[112.612787,27.317599]},"count":1},{"from":{"name":"广州","coordinates":[113.270793,23.135308]},"to":{"name":"北京","coordinates":[116.413554,39.911013]},"count":2},{"from":{"name":"广州","coordinates":[113.270793,23.135308]},"to":{"name":"三亚","coordinates":[109.518646,18.258217]},"count":3},{"from":{"name":"广州","coordinates":[113.270793,23.135308]},"to":{"name":"上海","coordinates":[121.480237,31.236305]},"count":4},{"from":{"name":"广州","coordinates":[113.270793,23.135308]},"to":{"name":"韶关","coordinates":[113.603757,24.816174]},"count":4}] 
var inmap = new inMap.Map({
    id: 'allmap',
    skin: "Blueness",
    center: [112.03956, 26.063677],
    zoom: {
        value: 6,
        show: true,
        max: 18,
        min: 5
    },
});
var overlay = new inMap.MoveLineOverlay({
    style: {
        point: { //散点配置
            tooltip: {
                show: true,
                formatter: "{name}"
            },
            style: {
                normal: {
                    backgroundColor: 'rgba(200, 200, 50, 1)',
                    borderWidth: 1,
                    borderColor: "rgba(255,255,255,1)",
                    size: 6,
                    label: {
                        show: true,
                        color: 'rgba(255,255,255,1)'

                    },
                },
                mouseOver: {
                    backgroundColor: 'rgba(200, 200, 200, 1)',
                    borderColor: "rgba(255,255,255,1)",
                    borderWidth: 4,
                },
                selected: {
                    backgroundColor: 'rgba(184,0,0,1)',
                    borderColor: "rgba(255,255,255,1)"
                },
            },
            event: {
                onMouseClick: function (item) {}
            }
        },
        line: { //线的配置
            style: {
                normal: {
                    borderColor: 'rgba(200, 200, 50, 1)',
                    borderWidth: 1,
                    // shadowColor: 'rgba(255, 250, 50, 1)',
                    // shadowBlur: 20,
                    lineCurive: "curve"
                }
            }
        },
        lineAnimation: {
            style: {
                size: 2,
                //移动点颜色
                fillColor: '#fff',
                //移动点阴影颜色
                shadowColor: '#fff',
                //移动点阴影大小
                shadowBlur: 10,
                lineOrCurve: 'curve',
            }

        },
    },
    data: data,

});
inmap.add(overlay); 
setTimeout(function() {
  inmap.remove(overlay);
},3000)

关于网格热力图在实时刷新数据的重影问题

监听百度地图zoom 和 center实时请求数据，然后调用inmap接口重绘热力图会出现重影。
原因：inmap也会监听zoom事件，重绘
解决方法：
每次请求数据之前先清空inmap的overlay图层的数据，调用setData([])清空

欢迎贡献代码

加油，有值得学习的地方！

官网文档点击左侧菜单都会回到intrduce

url：http://inmap.talkingdata.com/#/docs/introduce
如题。

围栏中的区域如何构造？

围栏中的区域如何构造？在百度地图中获取智能获取到某市的多边形区域下属区域无法获取

关于inmap地图实现线路的问题

最近项目中需要在地图上实现一些功能，因而前几日有朋友推荐使用你们的inmap,用了几天，感觉示例比较清晰，也容易上手，而且数据格式比较统一，同一种数据可以展现多种不同的功能地图。昨天需求需要在地图上实现轨道的线路，刚开始使用百度地图的polyline，画起来比较生硬，而且数据量比较大，样式调起来也不好操作。后来想起来inmap有线路的实现方式，试着跟着示例操作，数据格式也是根据要求添加的，可是在添加到地图时，总是不能够显示出来，以下是代码，劳烦指点，谢谢！

<template>
    <div>
        <Button><router-link to="/menuPage">返回菜单列表</router-link></Button>
        <div ref='map' id='map'>
        </div>
    </div>
</template>

<script>
    import {
        marker,
        point
    } from '../../../assets/data/inmap_data'
    export default {
        name: "",
        data() {
            return {
                inmap: null,
                circuitData: [{
                    "geo": [
                        [120.37396060329789, 30.530439105863827],
                        [120.35319588889949, 30.52905382282265],
                        [120.35365520879516, 30.534386412732545],
                        [120.34591991031361, 30.532902214536644],
                        [120.3389366111271, 30.54064291558752],
                        [120.3321960113287, 30.538392715876007],
                        [120.33217401132688, 30.5342472158444],
                        [120.31483030928297, 30.527601213664568],
                        [120.31241580875674, 30.521139013036485],
                        [120.2993002053804, 30.51965540909619],
                        [120.29841970514182, 30.530675608865312],
                        [120.30200920611829, 30.53651121008445],
                        [120.29785840499076, 30.546882608765877],
                    ],
                    "name": "XX镇",
                    "id": 50597,
                    "count": "3"
                }],
            }
        },
        components: {},
        mounted() {
            this.initMap();
        },
        methods: {
            initMap() {
                let dom = this.$refs.map;
                var inmap = new inMap.Map({
                    id: dom,
                    skin: "Blueness WhiteLover", //Blueness WhiteLover  Blueness
                    center: [120.37396060329789, 30.530439105863827],
                    zoom: {
                        value: 11,
                        show: true,
                        max: 18,
                        min: 5
                    },
                });
                inmap.getMap().enableScrollWheelZoom()
                var overlay = new inMap.CircuitOverlay({
                    style: {
                        normal: {
                            borderColor: "red",
                            borderWidth: 1
                        }
                    },

                });
                inmap.add(overlay);
                overlay.setPoints(this.circuitData);
            },
        }
    }
</script>

<style scoped>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    #map {
        position: absolute;
        top: 30px;
        bottom: 0;
        width: 100%;
    }
</style>

PolygonEditorOverlay报错overlay.addEventListener is not a function

let overlay = new inMap.PolygonEditorOverlay({
style: {
strokeColor: 'rgba(24,144,255,1)',
fillColor: 'rgba(24,144,255,0.4)',
strokeWeight: 2,
strokeOpacity: 1,
enableEditing: true
},
data: data
});
overlay.addEventListener('lineupdate', e =>console.log(e));
inmap.add(overlay);

talkingdata / inmap Goto Github PK

inmap's People

Contributors

Stargazers

Watchers

Forkers

inmap's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs