随着开发 可视化数据大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理淮安市涟水县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts淮安市涟水县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts淮安市涟水县geoJson地图3d地图自定义图标
echarts 3d地图添加自定义图标实例
echarts淮安市涟水县geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
threejs淮安市涟水县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话，可以观看threejs教程视频 3D可视化Three.js视频教程
threejs淮安市涟水县geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
threejs淮安市涟水县geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁
淮安市涟水县 下辖有 义兴镇,红窑镇,五港镇,陈师镇,保滩镇,前进镇,南集镇,高沟镇,灰墩街道,唐集镇,北集街道,大东镇,岔庙镇,徐集乡,时码街道,成集镇,朱码镇,梁岔镇,杨口街道,经济开发区,涟城镇,河网街道,浅集街道,石湖镇,黄营乡,东胡集镇,余圩街道,南禄街道,方渡街道,机场产业园区,麻垛农业开发区,小李集工业园区
淮安市涟水县下辖区域坐标
{"义兴镇":[119.3590544141002,34.00697113413708],"红窑镇":[119.31369703572815,33.94334114894422],"五港镇":[119.42049917910722,33.96304405256919],"陈师镇":[119.14254111581647,33.82768366210119],"保滩镇":[119.17826998677864,33.69828814767942],"前进镇":[119.13982453185908,33.96086288038217],"南集镇":[119.470974836321,33.73916092861353],"高沟镇":[119.20490020214439,34.0246112476903],"灰墩街道":[119.28910672817116,34.01009263570437],"唐集镇":[119.55122936746662,33.89768072513343],"北集街道":[119.45339487588627,33.79479860995755],"大东镇":[119.4045036930664,33.84477751088797],"岔庙镇":[119.21306264472057,33.94217519320469],"徐集乡":[119.37556670095259,33.72883267839366],"时码街道":[119.36178669305765,33.88563804761573],"成集镇":[119.08541277298824,33.84896297654136],"朱码镇":[119.27550683951719,33.82444593731375],"梁岔镇":[119.13480713254968,33.88730735942177],"杨口街道":[119.13630955553072,34.04182552180174],"经济开发区":[119.22396923420891,33.79597312775866],"涟城镇":[119.276644859187,33.76344194705007],"河网街道":[119.22430487407388,33.86410837139368],"浅集街道":[119.29747360534199,33.88305925848959],"石湖镇":[119.60405688279167,33.92510664115069],"黄营乡":[119.50841832903117,33.83184532151576],"东胡集镇":[119.44218397086853,33.89638234730393],"余圩街道":[119.03709242947687,33.8976012198126],"南禄街道":[119.54167645216206,33.96955556032695],"方渡街道":[119.50247243618367,33.98672548827086],"机场产业园区":[119.13467966958484,33.76041848665324],"麻垛农业开发区":[119.0727072768577,33.94543039200651],"小李集工业园区":[119.35219701262055,33.80431685249718]}
淮安市涟水县行政划分代码
[{"name":"义兴镇","code":""},{"name":"红窑镇","code":"320826114000"},{"name":"五港镇","code":"320826105000"},{"name":"陈师镇","code":""},{"name":"保滩镇","code":""},{"name":"前进镇","code":""},{"name":"南集镇","code":"320826111000"},{"name":"高沟镇","code":"320826101000"},{"name":"灰墩街道","code":""},{"name":"唐集镇","code":"320826102000"},{"name":"北集街道","code":""},{"name":"大东镇","code":"320826104000"},{"name":"岔庙镇","code":"320826109000"},{"name":"徐集乡","code":""},{"name":"时码街道","code":""},{"name":"成集镇","code":"320826113000"},{"name":"朱码镇","code":""},{"name":"梁岔镇","code":"320826106000"},{"name":"杨口街道","code":""},{"name":"经济开发区","code":""},{"name":"涟城镇","code":""},{"name":"河网街道","code":""},{"name":"浅集街道","code":""},{"name":"石湖镇","code":"320826107000"},{"name":"黄营乡","code":""},{"name":"东胡集镇","code":"320826110000"},{"name":"余圩街道","code":""},{"name":"南禄街道","code":""},{"name":"方渡街道","code":""},{"name":"机场产业园区","code":""},{"name":"麻垛农业开发区","code":""},{"name":"小李集工业园区","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
