talkingdata / inmap Goto Github PK
View Code? Open in Web Editor NEW大数据地理可视化
Home Page: https://fengluhome.github.io/inmap-doc
License: Apache License 2.0
大数据地理可视化
Home Page: https://fengluhome.github.io/inmap-doc
License: Apache License 2.0
FlashDotOverlay onState回调不起作用
真的是,你们和maptalk太有缘分了,maptalk是很棒的一个开源地图js库,名字互相暧昧。。。
希望能适配maptalk的地图,百度地图毕竟是一个不开源的项目啊。期待
您好,我想根据自定义的一个值,在DotOverlay,让一个点变成选中的样子,有办法吗?
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);
你好,请问我如何修改线路动画,我看文档只有默认动画,望指教
文档中默认是false,但实际情空中是true,望解决
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)
你好,请问非线图是否支持弧度?
我在官网的demo中测试网格的时候,发现拖拽的时候,网格不随着地图移动。正常情况下,网格是根据经纬度设置位置的,可是地图的位置变化了,可是网格的位置并没有变化。这个是什么原因呢?
how to draw the MultiPolygon layer. do not have MultiPolygonOverLayer
我想实现的需求是只展示**的地图,而不是世界地图,地图上展示每个城市的名称,请问这样能否实现?
系统:windows 10 专业版64位
浏览器:IE11
URL:http://localhost:8088/examples/MoveLineOverlay.html
发现两处报错:
' + formatter.replace(/\{/g, '${overItem.') + '
';DotOverlay绘画类的文档中,发现下面几个问题:
style.normal.mergeCount
的解释;百度地图拥有自己的坐标系,大部分使用者的Geojson中坐标点并不是百度坐标系下的,我觉得这是一个很大的问题。如果能够提供不同坐标系转到百度坐标系的接口,精度不用太高。这样的话,可能会有更多使用者。鄙人愚见,恐有不当,见谅。
大打扰了。
文档中似乎提到了可以自定义主题,但是如何自定义呢?
比如 地图背景我想显示百度地图原版的样式
如果每次更新的时候调用add,那么点不是重绘,而是添加
有3d版本吗
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.
如题
你好大佬,我想问个问题,就是所有涂层的setData 是否会导致图层重绘,因为我每次更新数据时都会闪动一下,闪屏,用户体验不是很好,还是我的设置有问题?如果重置,有办法去改善这种闪一下吗?期待大佬回复
请问能和百度地图解耦,在高德/Google 地图上实现么?
setOptionStyle时legend.show从true设为false时,legend没有消失
inmap/src/overlay/PolygonOverlay.js
Line 217 in 51e9f02
围栏中的区域如何构造? 在百度地图中获取智能获取到某市的多边形 区域 下属区域无法获取
现在基本上都使用微信办公的比较多,能不能提供一个微信群供大家进行技术交流啊?我申请加入扣扣群,杳无音信呢
在DotOverlay调用splitList进行区分区间无法调整
怎么在inMap中使用百度地图的方法
出现环境: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方法。但是此方法可能无法适用于多图层点重合的情况
加油,有值得学习的地方!
官网说效果最好的传入数据量为1W到10W,为何该演示页面8万多的数据,就很卡?是否显示大数据场景仅为在某一个缩放等级下展示大数据,而不适合切换缩放级别的场景?
这个地方在鼠标放上去的时候,是一个小手,会把那个数字遮住,也就是说指针遮住了一部分提示内容。
http://inmap.talkingdata.com/#/docs/introduce 这个页面最后面的示例里。
监听百度地图zoom 和 center实时请求数据,然后调用inmap接口重绘热力图会出现重影。
原因:inmap也会监听zoom事件, 重绘
解决方法:
每次请求数据之前 先清空inmap的overlay图层的数据,调用setData([])清空
百度地图的ak除了申请使用地图,还有统计、限制平台等功能,我觉得应当引导开发者去自己申请一个,而不是给出一个公共的ak。
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);
使用方法如下:
{ skin: { "featureType": "land", "elementType": "all", "stylers": { "color": "#05131fff" } } }
这样设置无法生效
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.
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)
想在inmap中放置工具栏,但使用BMapLib.DrawingManager后报错,提示Uncaught (in promise) TypeError: h.addControl is not a function,请问如何解决?
如果您和您的的公司或组织正在使用inMap,非常感谢您的支持,希望可以在这里留下您的公司信息。您的回复将成为维护者、社区用户和观望者的信心来源。
回复格式示例如下:
公司或组织:TalkingData
链接:http://www.talkingdata.com
方便的话,可以晒一晒截图
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)
最近项目中需要在地图上实现一些功能,因而前几日有朋友推荐使用你们的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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.