echarts塔城地区乌苏市geoJson地图点击弹出自定义弹窗代码演示

geoJson2 yekong

数据大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理塔城地区乌苏市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

乌苏市(维吾尔语:شىخۇ شەھىرى‎),隶属新疆维吾尔自治区塔城地区。位于新疆维吾尔自治区西北部,东与克拉玛依市、奎屯市、沙湾市毗连,南与尼勒克县相望,西与精河县为邻,北与托里县接壤。这片区域统称为“三地四方”,被经济学界誉为新疆经济发展的“金三角”。全市总面积20700平方公里。有哈萨克、汉、维吾尔、回、蒙古等民族。辖10镇、7乡、3个牧场、185个村队和1个林场,5个街道办事处、16个社区。 截至2019年末,乌苏市户籍人口21.46万人。

echarts塔城地区乌苏市geoJson地图点击弹出自定义弹窗

我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.

echarts塔城地区乌苏市geoJson地图点击弹出自定义弹窗

echarts塔城地区乌苏市geoJson地图热力图

echarts通过heatmap实现热力图效果

echarts塔城地区乌苏市geoJson地图热力图

echarts塔城地区乌苏市geoJson地图点击地图获取经纬度

echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.

echarts塔城地区乌苏市geoJson地图点击地图获取经纬度

threejs塔城地区乌苏市geoJson地图3d地图css2d标签

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

threejs塔城地区乌苏市geoJson地图3d地图css2d标签

threejs塔城地区乌苏市geoJson地图3d地图自定义贴图加CSS2D标签

通过threejs绘制3d地图并添加CSS2D标签和自定义贴图

threejs塔城地区乌苏市geoJson地图3d地图自定义贴图加CSS2D标签

threejs塔城地区乌苏市geoJson地图3d地图CSS2D外加旋转棱锥

通过threejs绘制3d地图CSS2D外加旋转棱锥效果

threejs塔城地区乌苏市geoJson地图3d地图CSS2D外加旋转棱锥

塔城地区乌苏市 下辖有 石桥乡,夹河子乡,乌苏监狱,白杨沟镇,兵团一二七团,兵团一二六团,头台乡,百泉镇,皇宫镇,西湖镇,吉尔格勒特郭愣蒙古民族乡,四棵树镇,九间楼乡,南苑街道,古尔图镇,甘河子镇,车排子镇,虹桥街道,西大沟镇,八十四户乡,哈图布呼镇,新市区街道,甘家湖牧场,兵团一二三团,兵团一三零团,兵团一二五团,兵团一二八团,兵团一二四团,塔布勒合特蒙古民族乡,赛力克提牧场,巴音沟牧场

塔城地区乌苏市下辖区域坐标

{"石桥乡":[84.25670712819078,44.98032792322516],"夹河子乡":[84.79498803074519,44.48730937149816],"乌苏监狱":[84.30140263633714,44.51557759718678],"白杨沟镇":[84.37730245235386,44.15849561594926],"兵团一二七团":[84.40814730982315,45.07027996603851],"兵团一二六团":[84.24207423268882,45.08784874100603],"头台乡":[84.62066708191949,44.67981379412137],"百泉镇":[84.38880620153247,44.43529140807239],"皇宫镇":[84.74423146487106,44.61199634848884],"西湖镇":[84.61223067901491,44.53746660743262],"吉尔格勒特郭愣蒙古民族乡":[84.16534333282249,44.32299026260367],"四棵树镇":[84.22435298397838,44.42703057567171],"九间楼乡":[84.81944502004089,44.57644523652407],"南苑街道":[84.68275608141911,44.40305304500954],"古尔图镇":[83.93951527205357,44.50418369250791],"甘河子镇":[84.46297787435714,44.48992903993619],"车排子镇":[],"虹桥街道":[84.64226851252548,44.43433849917955],"西大沟镇":[84.56818664432177,44.26764659967419],"八十四户乡":[84.70003387615859,44.51204356153355],"哈图布呼镇":[84.2626370621218,44.44490089723502],"新市区街道":[84.7576297159755,44.43005679032323],"甘家湖牧场":[],"兵团一二三团":[84.50628642453579,44.97648617905067],"兵团一三零团":[],"兵团一二五团":[84.46411364807474,44.7046863677274],"兵团一二八团":[84.58645890250318,45.04014120361609],"兵团一二四团":[84.12544541807475,44.52702369859402],"塔布勒合特蒙古民族乡":[],"赛力克提牧场":[],"巴音沟牧场":[84.8519230858627,43.94675316766951]}

塔城地区乌苏市行政划分代码

[{"name":"石桥乡","code":"654202203000"},{"name":"夹河子乡","code":"654202201000"},{"name":"乌苏监狱","code":"654202403000"},{"name":"白杨沟镇","code":"654202100000"},{"name":"兵团一二七团","code":""},{"name":"兵团一二六团","code":""},{"name":"头台乡","code":"654202204000"},{"name":"百泉镇","code":"654202105000"},{"name":"皇宫镇","code":"654202102000"},{"name":"西湖镇","code":"654202108000"},{"name":"吉尔格勒特郭愣蒙古民族乡","code":"654202205000"},{"name":"四棵树镇","code":"654202106000"},{"name":"九间楼乡","code":"654202202000"},{"name":"南苑街道","code":"654202001000"},{"name":"古尔图镇","code":"654202107000"},{"name":"甘河子镇","code":"654202104000"},{"name":"车排子镇","code":"654202103000"},{"name":"虹桥街道","code":"654202002000"},{"name":"西大沟镇","code":"654202109000"},{"name":"八十四户乡","code":"654202200000"},{"name":"哈图布呼镇","code":"654202101000"},{"name":"新市区街道","code":"654202003000"},{"name":"甘家湖牧场","code":"654202400000"},{"name":"兵团一二三团","code":""},{"name":"兵团一三零团","code":""},{"name":"兵团一二五团","code":""},{"name":"兵团一二八团","code":""},{"name":"兵团一二四团","code":""},{"name":"塔布勒合特蒙古民族乡","code":"654202206000"},{"name":"赛力克提牧场","code":"654202402000"},{"name":"巴音沟牧场","code":"654202401000"}]

说明

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

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

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

塔城地区乌苏市echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts塔城地区乌苏市geoJson地图点击弹出自定义弹窗代码演示