echarts沧州市任丘市地图根据经纬度显示自定义html弹窗代码演示

echarts yekong 566℃

随着开发 数据可视化大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理沧州市任丘市echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

任丘市,河北省辖县级市,由沧州市代管,位于河北省中部,北依京津、毗邻雄安,西临白洋淀,是神医扁鹊故里,华北油田总部所在地。全市总面积872平方公里,总人口为81.6万人,下辖辖7个街道办事处(含3个油区办事处)、10个镇、2个乡、1个省级开发区(工业园区),349个行政村 。根据第七次人口普查数据,截至2020年11月1日零时,任丘常住人口为816401人。

echarts沧州市任丘市地图根据经纬度显示自定义html弹窗

echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.

echarts沧州市任丘市地图根据经纬度显示自定义html弹窗

threejs沧州市任丘市地图3d地图自定义贴图加CSS2D标签

通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果想系统的学习threejs的话,可以观看threejs视频 Three.js前端3D可视化教程

threejs沧州市任丘市地图3d地图自定义贴图加CSS2D标签

更多效果实例

echarts 沧州市任丘市地图效果实例

1.echarts沧州市任丘市地图定义颜色演示实例
2.echarts沧州市任丘市地图飞线图代码演示
3.echarts沧州市任丘市地图label样式自定义效果实例
4.echarts沧州市任丘市地图局部颜色渐变效果实例
5.echarts沧州市任丘市地图全局颜色渐变代码演示
6.echarts沧州市任丘市地图 visualMap控制地图颜色演示实例
7.echarts沧州市任丘市地图自定义引导线演示实例
8.echarts沧州市任丘市地图区域闪烁代码演示
9.echarts沧州市任丘市地图添加柱状图效果实例
10.echarts沧州市任丘市地图水滴状气泡图效果
11.echarts沧州市任丘市地图圆形波纹状气泡图实例
12.echarts沧州市任丘市地图点击地图插小旗实例代码
13.echarts沧州市任丘市地图 tooltip轮播代码演示
14.echarts沧州市任丘市地图阴影实例代码
15.echarts沧州市任丘市地图热力图实例
16.echarts沧州市任丘市地图指定区域高亮效果
17.echarts沧州市任丘市地图点击跳转到指定页面实例代码
18.echarts沧州市任丘市地图3d地图代码演示
19.echarts沧州市任丘市地图3d地图自定义图标效果实例
20.echarts沧州市任丘市地图3d地图实例旋转动画实例
21.echarts沧州市任丘市地图点击弹出自定义弹窗代码演示
22.echarts沧州市任丘市地图点击地图获取经纬度实例代码
23.echarts沧州市任丘市地图根据经纬度显示自定义html弹窗实例代码
24.echarts沧州市任丘市地图地图排行榜效果效果
25.echarts沧州市任丘市地图tooltip自定义html实例

threejs 沧州市任丘市地图效果实例

1.threejs沧州市任丘市地图3d地图代码演示
2.threejs沧州市任丘市地图3d地图css2d标签实例
3.threejs沧州市任丘市地图3d地图鼠标移入显示标签并高亮效果
4.threejs沧州市任丘市地图3d地图CSS3D标签演示实例
5.threejs沧州市任丘市地图3d地图添加旋转棱锥演示实例
6.threejs沧州市任丘市地图3d地图自定义贴图加CSS3D标签代码演示
7.threejs沧州市任丘市地图3d地图自定义贴图加CSS2D标签效果
8.threejs沧州市任丘市地图3d地图指定区域闪烁实例代码

沧州市任丘市下辖有梁召镇,开发区,鄚州镇,长丰镇,青塔乡,七间房乡,北辛庄乡,吕公堡镇,于村乡,出岸镇,北汉乡,石门桥镇,苟各庄镇,议论堡乡,辛中驿镇,麻家坞镇,新华路街道,永丰路街道,西环路街道,中华路办事处,华北石油管理局,河北任丘雁翎工业园区,中华路街道

沧州市任丘市下辖区域坐标

{"梁召镇":[116.2998232987688,38.77473199407876],"开发区":[116.1224403083345,38.74333372250589],"鄚州镇":[116.09575846376615,38.85778164243017],"长丰镇":[116.3670899866842,38.72205368435331],"青塔乡":[116.0250543399775,38.73641022910139],"七间房乡":[116.03723933681272,38.80523591416539],"北辛庄乡":[116.108662659076,38.77922746010972],"吕公堡镇":[116.28660540136411,38.7124426759402],"于村乡":[116.20100848518422,38.81570854575914],"出岸镇":[115.99235072735078,38.70426500926577],"北汉乡":[116.14803042355746,38.60840505033687],"石门桥镇":[116.01364293514649,38.63243373364256],"苟各庄镇":[116.1479511130002,38.89775342641904],"议论堡乡":[116.17854233704935,38.72321921426457],"辛中驿镇":[116.03642180598837,38.58604560521883],"麻家坞镇":[116.21028115677184,38.68390104606425],"新华路街道":[116.07683145337137,38.72983869377381],"永丰路街道":[116.12063509867016,38.66162359495005],"西环路街道":[116.06136894399992,38.7037624988795],"中华路办事处":[116.11078012405491,38.72822259082726],"华北石油管理局":[116.08771673458914,38.63539306950206],"河北任丘雁翎工业园区":[116.0841005891964,38.62676835835926],"中华路街道":[116.07361048218209,38.73001427764484]}

沧州市任丘市echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts沧州市任丘市地图根据经纬度显示自定义html弹窗代码演示