echarts菏泽市牡丹区geoJson地图label自定义样式实例

geoJson2 yekong 100℃

数据大屏可视化 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理菏泽市牡丹区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

牡丹区,隶属于山东省菏泽市,位于山东省西南部,黄河下游南岸,北靠鄄城,东接郓城、巨野,南邻定陶、曹县,西与东明相连,西北一隅濒临黄河,与河南省濮阳市隔河相望。介于北纬30°39″—35°53″,东经114°48″—116°24″之间,总面积1041平方千米,东北距省会济南市220千米。下辖7个街道、12个镇。

echarts菏泽市牡丹区geoJson地图label自定义样式

echarts通过scatter实例可以配置自己想要的图标,以及label文字的样式效果

echarts菏泽市牡丹区geoJson地图label自定义样式

echarts菏泽市牡丹区geoJson地图点击地图获取经纬度

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

echarts菏泽市牡丹区geoJson地图点击地图获取经纬度

echarts菏泽市牡丹区geoJson地图点击地图插小旗

echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.

echarts菏泽市牡丹区geoJson地图点击地图插小旗

threejs菏泽市牡丹区geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果对threejs感兴趣,可以观看threejs教程视频 3D可视化Three.js视频教程

threejs菏泽市牡丹区geoJson地图3d地图添加金色效果

threejs菏泽市牡丹区geoJson地图3d地图自定义贴图加CSS3D标签

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

threejs菏泽市牡丹区geoJson地图3d地图自定义贴图加CSS3D标签

threejs菏泽市牡丹区geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例

threejs菏泽市牡丹区geoJson地图3d地图

菏泽市牡丹区 下辖有 佃户屯街道,皇镇乡,胡集镇,丹阳街道,吕陵镇,吴店镇,安兴镇,小留镇,李村镇,沙土镇,都司镇,何楼街道,高庄镇,黄堽镇,西城街道,万福街道,东城街道,北城街道,南城街道,大黄集镇,岳程街道,牡丹街道,王浩屯镇,马岭岗镇

菏泽市牡丹区下辖区域坐标

{"佃户屯街道":[115.50344854345619,35.16595308744216],"皇镇乡":[115.65001742396124,35.2742979759939],"胡集镇":[115.68474726319913,35.40035190213716],"丹阳街道":[115.50001669131714,35.23879780586523],"吕陵镇":[115.3056792902853,35.2752443875132],"吴店镇":[115.39263970653195,35.32655061785749],"安兴镇":[115.68304004657588,35.33315131381579],"小留镇":[115.41860944190313,35.37715118920593],"李村镇":[115.25291295361772,35.39857043720278],"沙土镇":[115.74696509884853,35.31671330229845],"都司镇":[115.61152953160003,35.34792029976797],"何楼街道":[115.41924861186354,35.15544529067001],"高庄镇":[115.33480157722839,35.37546138600958],"黄堽镇":[115.5184776827189,35.35180803921381],"西城街道":[115.41956459531346,35.24265785959868],"万福街道":[115.38558907488526,35.26369133693581],"东城街道":[115.47316169419761,35.25446114870137],"北城街道":[115.44057508993816,35.26627222628966],"南城街道":[115.44238493337326,35.22654321284699],"大黄集镇":[115.290663126633,35.08262912285698],"岳程街道":[115.56273395747277,35.24908704025058],"牡丹街道":[115.52593177320337,35.29374434505232],"王浩屯镇":[115.30510100212607,35.11870643845621],"马岭岗镇":[115.32347814373165,35.19658124095528]}

菏泽市牡丹区行政划分代码

[{"name":"佃户屯街道","code":""},{"name":"皇镇乡","code":""},{"name":"胡集镇","code":"371702112000"},{"name":"丹阳街道","code":""},{"name":"吕陵镇","code":""},{"name":"吴店镇","code":"371702101000"},{"name":"安兴镇","code":"371702109000"},{"name":"小留镇","code":"371702106000"},{"name":"李村镇","code":"371702107000"},{"name":"沙土镇","code":"371702100000"},{"name":"都司镇","code":"371702104000"},{"name":"何楼街道","code":"371702009000"},{"name":"高庄镇","code":"371702105000"},{"name":"黄堽镇","code":"371702103000"},{"name":"西城街道","code":"371702002000"},{"name":"万福街道","code":""},{"name":"东城街道","code":"371702001000"},{"name":"北城街道","code":"371702004000"},{"name":"南城街道","code":"371702003000"},{"name":"大黄集镇","code":"371702110000"},{"name":"岳程街道","code":""},{"name":"牡丹街道","code":"371702005000"},{"name":"王浩屯镇","code":"371702102000"},{"name":"马岭岗镇","code":""}]

说明

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

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

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

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

菏泽市牡丹区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts菏泽市牡丹区geoJson地图label自定义样式实例