echarts衡水市冀州区geoJson地图根据经纬度显示自定义html弹窗效果实例

echarts yekong 535℃

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

冀州区,隶属于河北省衡水市,位于河北省东南部,衡水市西南部,地处华北平原腹地,介于北纬37°18′40″-37°44′25″,东经115°09′57″-115°41′07″之间,属暖温带大陆性季风气候。全区总面积918平方千米。截至2019年,全区下辖6镇4乡,常住人口37万人。根据第七次人口普查数据,截至2020年11月1日零时,冀州区常住人口304854人 。

echarts衡水市冀州区地图根据经纬度显示自定义html弹窗

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

echarts衡水市冀州区地图根据经纬度显示自定义html弹窗

threejs衡水市冀州区地图3d地图

通过threejs绘制的3d地图实例,如果想系统的学习threejs的话,可以观看threejs视频课程 3D可视化Three.js视频教程

threejs衡水市冀州区地图3d地图

更多效果实例

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地图指定区域闪烁效果实例

衡水市冀州区下辖有门家庄乡,魏家屯镇,小寨乡,冀州镇,周村镇,西王镇,码头李镇,南午村镇,官道李镇,徐家庄乡,北漳淮乡

衡水市冀州区下辖区域坐标

{"门家庄乡":[115.35645121844674,37.66842060653661],"魏家屯镇":[115.64255257519588,37.57988259729318],"小寨乡":[115.47314009573033,37.6294054214577],"冀州镇":[115.5692106901898,37.54317297689089],"周村镇":[115.48523050942715,37.46523585113147],"西王镇":[115.23601467162555,37.60168190751268],"码头李镇":[115.34374423314722,37.57675143328245],"南午村镇":[115.55036111415777,37.37872774041333],"官道李镇":[115.4340876494588,37.69060593427515],"徐家庄乡":[115.40579620184421,37.50140344071318],"北漳淮乡":[115.40207363843848,37.42295058305869]}

衡水市冀州区echarts地图效果实例和threejs地图效果实例下载

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