大屏数据可视化 项目中经常需要渲染echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理宁波市宁海县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts宁波市宁海县geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
echarts宁波市宁海县geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts宁波市宁海县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs宁波市宁海县geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs视频课程 WebGL/Three.js前端高薪3D可视化
threejs宁波市宁海县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
threejs宁波市宁海县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
宁波市宁海县 下辖有 一市镇,前童镇,力洋镇,岔路镇,强蛟镇,桑洲镇,深甽镇,胡陈乡,茶院乡,西店镇,越溪乡,长街镇,黄坛镇,大佳何镇,桃源街道,梅林街道,跃龙街道,桥头胡街道
宁波市宁海县下辖区域坐标
{"一市镇":[121.46923372484325,29.1850263542669],"前童镇":[121.33128366147598,29.23541939140094],"力洋镇":[121.61789687080272,29.28373631760225],"岔路镇":[121.24804504782188,29.21357367107265],"强蛟镇":[121.5480109864433,29.45501048847528],"桑洲镇":[121.30564772004223,29.14873148605728],"深甽镇":[121.29645962762692,29.41279237523059],"胡陈乡":[121.69435399345116,29.34492530627373],"茶院乡":[121.55410715623822,29.31380046571085],"西店镇":[121.41800723258038,29.46054478556628],"越溪乡":[121.54840612024361,29.23081973909111],"长街镇":[121.72926139657136,29.22094473846015],"黄坛镇":[121.27280844590433,29.29530298725815],"大佳何镇":[121.58542767767355,29.43061381562078],"桃源街道":[121.45383988219737,29.3421581896268],"梅林街道":[121.40125614512186,29.38728301287895],"跃龙街道":[121.43713680522595,29.28892031491614],"桥头胡街道":[121.52363130708105,29.39946906526717]}
宁波市宁海县行政划分代码
[{"name":"一市镇","code":"330226104000"},{"name":"前童镇","code":"330226106000"},{"name":"力洋镇","code":"330226102000"},{"name":"岔路镇","code":"330226105000"},{"name":"强蛟镇","code":"330226110000"},{"name":"桑洲镇","code":"330226107000"},{"name":"深甽镇","code":"330226112000"},{"name":"胡陈乡","code":"330226200000"},{"name":"茶院乡","code":"330226201000"},{"name":"西店镇","code":"330226111000"},{"name":"越溪乡","code":"330226202000"},{"name":"长街镇","code":"330226101000"},{"name":"黄坛镇","code":"330226108000"},{"name":"大佳何镇","code":"330226109000"},{"name":"桃源街道","code":"330226002000"},{"name":"梅林街道","code":"330226003000"},{"name":"跃龙街道","code":"330226001000"},{"name":"桥头胡街道","code":"330226004000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
