echarts济南市历城区geoJson地图圆形波纹状气泡图代码演示

geoJson2

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

历城区,隶属 山东省 济南市,位于济南市东、南部近郊,南与泰安市泰山区、岱岳区。北倚济南市济阳区,东接章丘区。西与长清区、市中区、历下区、天桥区相邻,总面积1298.57平方千米。截至2023年2月,历城区下辖21个街道,其中3个街道由济南市南部山区代管;5个街道由济南市高新区代管。2021年,历城区户籍总人口72.63万人,常住人口112.84万人。

echarts济南市历城区geoJson地图圆形波纹状气泡图

echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.

echarts济南市历城区geoJson地图圆形波纹状气泡图

echarts济南市历城区geoJson地图地图下钻展示

地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.

echarts济南市历城区geoJson地图地图下钻展示

echarts济南市历城区geoJson地图自定义引导线

echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.

echarts济南市历城区geoJson地图自定义引导线

threejs济南市历城区geoJson地图3d地图

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

threejs济南市历城区geoJson地图3d地图

threejs济南市历城区geoJson地图3d地图css2d标签

通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名

threejs济南市历城区geoJson地图3d地图css2d标签

threejs济南市历城区geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰

threejs济南市历城区geoJson地图3d地图添加金色效果

济南市历城区 下辖有 仲宫镇,彩石镇,柳埠镇,西营镇,港沟街道,洪家楼街道,唐王镇,东风街道,董家镇,郭店街道,王舍人街道,临港街道,全福街道,华山街道,唐冶街道,山大路街道,孙村街道,遥墙街道,鲍山街道,巨野河街道,荷花路街道

济南市历城区下辖区域坐标

{"仲宫镇":[117.07526738384443,36.45245481710867],"彩石镇":[117.29640650149506,36.60505238799405],"柳埠镇":[117.13914703608845,36.40644681446832],"西营镇":[117.24680759976629,36.49883328135556],"港沟街道":[117.18336341729164,36.61758422209036],"洪家楼街道":[117.05638513807223,36.6887673786663],"唐王镇":[117.28612468182465,36.82437947303464],"东风街道":[117.07883505834542,36.68737727691033],"董家镇":[117.26426728341266,36.75768978992558],"郭店街道":[117.25319572846524,36.73430571702004],"王舍人街道":[117.1289091243171,36.738603352715],"临港街道":[117.2233235058074,36.81690907996706],"全福街道":[117.06898746147324,36.70633977920528],"华山街道":[117.06016292724762,36.73736417110651],"唐冶街道":[117.20308715638217,36.69378172345996],"山大路街道":[117.06100417427712,36.67539873338975],"孙村街道":[117.28178058736987,36.68639108369439],"遥墙街道":[117.16055792801404,36.84081745186944],"鲍山街道":[117.16574730650264,36.7416973983791],"巨野河街道":[117.33466474051329,36.67882848078386],"荷花路街道":[117.10512904564145,36.76743099027871]}

济南市历城区行政划分代码

[{"name":"仲宫镇","code":""},{"name":"彩石镇","code":""},{"name":"柳埠镇","code":""},{"name":"西营镇","code":""},{"name":"港沟街道","code":"370112013000"},{"name":"洪家楼街道","code":"370112002000"},{"name":"唐王镇","code":""},{"name":"东风街道","code":"370112003000"},{"name":"董家镇","code":""},{"name":"郭店街道","code":"370112011000"},{"name":"王舍人街道","code":"370112009000"},{"name":"临港街道","code":""},{"name":"全福街道","code":"370112004000"},{"name":"华山街道","code":"370112007000"},{"name":"唐冶街道","code":"370112012000"},{"name":"山大路街道","code":"370112001000"},{"name":"孙村街道","code":""},{"name":"遥墙街道","code":""},{"name":"鲍山街道","code":"370112010000"},{"name":"巨野河街道","code":""},{"name":"荷花路街道","code":"370112008000"}]

说明

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

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

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

济南市历城区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
购买成功后,如无法下载请联系微信:17331886870
喜欢
echarts济南市历城区geoJson地图圆形波纹状气泡图代码演示