echarts吉安市泰和县geoJson地图tooltip自定义html代码演示

geoJson2 yekong

可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是吉安市泰和县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

echarts吉安市泰和县geoJson地图tooltip自定义html

echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.

echarts吉安市泰和县geoJson地图tooltip自定义html

echarts吉安市泰和县geoJson地图根据经纬度显示自定义html弹窗

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

echarts吉安市泰和县geoJson地图根据经纬度显示自定义html弹窗

echarts吉安市泰和县geoJson地图3d地图自定义贴图-绿色地面

3d地图自定义贴图-绿色地面,echarts结合echarts-gl实现3d地图自定义贴图效果,通过设置 shading: 'realistic',以及realisticMaterial来设置自定义纹理贴图,当前效果为绿色地面的效果实例

echarts吉安市泰和县geoJson地图3d地图自定义贴图-绿色地面

threejs吉安市泰和县geoJson地图3d地图css2d标签

通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果对threejs感兴趣,可以观看threejs视频教程 Three.js前端3D可视化

threejs吉安市泰和县geoJson地图3d地图css2d标签

threejs吉安市泰和县geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份

threejs吉安市泰和县geoJson地图3d地图CSS3D标签

吉安市泰和县 下辖有 沿溪镇,澄江镇,灌溪镇,石山乡,碧溪镇,禾市镇,苏溪镇,苑前镇,螺溪镇,马市镇,老营盘镇,万合镇,上圯乡,上模乡,中龙乡,冠朝镇,南溪乡,泰和县工业园区,综合垦殖场,武山垦殖场,塘洲镇,小龙镇,井冈山机场,小龙矿区管委会,桥头镇,水槎乡,沙村镇,八一八矿区

吉安市泰和县下辖区域坐标

{"沿溪镇":[114.97628524407773,26.87442835248891],"澄江镇":[114.87293549292336,26.84519826118235],"灌溪镇":[115.09186463230576,26.72743934163471],"石山乡":[114.83878328318454,26.92211626130727],"碧溪镇":[114.39015732004829,26.75546455172847],"禾市镇":[114.67464501007962,26.81467548737457],"苏溪镇":[114.6760310842108,26.72164689338823],"苑前镇":[115.17150043876487,26.7939597077121],"螺溪镇":[114.75073945107218,26.87677530869287],"马市镇":[114.76288498313363,26.74366713739759],"老营盘镇":[115.21895280969576,26.58565847281352],"万合镇":[115.0412795907246,26.86542821864396],"上圯乡":[115.13909568169097,26.60081168919928],"上模乡":[114.97143880080175,26.59325717184347],"中龙乡":[115.2092962138652,26.67131814933723],"冠朝镇":[114.95947576349698,26.68437323124385],"南溪乡":[114.81676375910753,26.84687464342197],"泰和县工业园区":[114.92903386121228,26.84221436121707],"综合垦殖场":[115.00055959716653,26.89055744623053],"武山垦殖场":[114.8858765983052,26.76057020657646],"塘洲镇":[114.9070261674235,26.7499686203],"小龙镇":[115.28338846337871,26.70012092801601],"井冈山机场":[114.74612774265432,26.8530078393381],"小龙矿区管委会":[115.25522879801981,26.68610542444613],"桥头镇":[114.53361545524258,26.76628480577028],"水槎乡":[115.09909570812354,26.53376617720177],"沙村镇":[115.07092709259165,26.65257462711618],"八一八矿区":[114.67576331665556,26.70790891682607]}

吉安市泰和县行政划分代码

[{"name":"沿溪镇","code":"360826115000"},{"name":"澄江镇","code":"360826100000"},{"name":"灌溪镇","code":"360826112000"},{"name":"石山乡","code":"360826200000"},{"name":"碧溪镇","code":""},{"name":"禾市镇","code":"360826103000"},{"name":"苏溪镇","code":"360826105000"},{"name":"苑前镇","code":"360826113000"},{"name":"螺溪镇","code":"360826104000"},{"name":"马市镇","code":"360826106000"},{"name":"老营盘镇","code":"360826110000"},{"name":"万合镇","code":"360826114000"},{"name":"上圯乡","code":"360826204000"},{"name":"上模乡","code":"360826202000"},{"name":"中龙乡","code":"360826205000"},{"name":"冠朝镇","code":"360826108000"},{"name":"南溪乡","code":"360826201000"},{"name":"泰和县工业园区","code":""},{"name":"综合垦殖场","code":"360826502000"},{"name":"武山垦殖场","code":"360826501000"},{"name":"塘洲镇","code":"360826107000"},{"name":"小龙镇","code":"360826111000"},{"name":"井冈山机场","code":"360826404000"},{"name":"小龙矿区管委会","code":"360826402000"},{"name":"桥头镇","code":"360826102000"},{"name":"水槎乡","code":"360826203000"},{"name":"沙村镇","code":"360826109000"},{"name":"八一八矿区","code":""}]

说明

1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。

2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。

3、本数据仅用于echarts threejs地图效果展示。

4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看

吉安市泰和县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts吉安市泰和县geoJson地图tooltip自定义html代码演示