数据可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理威海市荣成市echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
荣成市,山东省辖县级市,由威海市代管。地处山东半岛最东端,三面环海,海岸线长500公里,是中国大陆距离韩国最近的地方。介于东经122°08’—122°42’、北纬36°45′—37°27′之间,北、东、南三面濒临黄海,海岸线曲长达491.9公里;辖3个功能区、12个镇、10个街道,面积1526平方公里。根据第七次人口普查数据,截至2020年11月1日零时,荣成市常住人口714211人。
echarts威海市荣成市geoJson地图3d地图自定义图标
echarts 3d地图添加自定义图标实例
echarts威海市荣成市geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts威海市荣成市geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
threejs威海市荣成市geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例,如果对threejs感兴趣,可以观看threejs视频课程 Three.js 3D可视化
threejs威海市荣成市geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
threejs威海市荣成市geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁
威海市荣成市 下辖有 桃园街道,港湾街道,王连街道,大疃镇,荫子镇,虎山镇,东山街道,斥山街道,上庄镇,寻山街道,俚岛镇,港西镇,人和镇,埠柳镇,夏庄镇,崖西镇,成山镇,滕家镇,城西街道,宁津街道,崂山街道,崖头街道
威海市荣成市下辖区域坐标
{"桃园街道":[122.45448983414366,36.9340293573496],"港湾街道":[122.39757414436535,36.88388367526395],"王连街道":[122.36340901748505,36.9878726022726],"大疃镇":[122.29357906735295,37.1065852074389],"荫子镇":[122.32374014965734,37.22030045752628],"虎山镇":[122.22005745646814,36.94647992093702],"东山街道":[122.44818261821788,36.99218227453876],"斥山街道":[122.37172372325,36.93050842996074],"上庄镇":[122.26800055055027,37.0066457817735],"寻山街道":[122.51966065280092,37.18499712475318],"俚岛镇":[122.54142659262342,37.25491566201965],"港西镇":[],"人和镇":[],"埠柳镇":[122.43101145369128,37.31789369138345],"夏庄镇":[122.45252021460553,37.23518582968178],"崖西镇":[122.34928427683731,37.25196959272574],"成山镇":[],"滕家镇":[122.3403006969086,37.06870022342182],"城西街道":[],"宁津街道":[],"崂山街道":[],"崖头街道":[122.45153003090235,37.15191172733105]}
威海市荣成市行政划分代码
[{"name":"桃园街道","code":"371082003000"},{"name":"港湾街道","code":"371082002000"},{"name":"王连街道","code":"371082004000"},{"name":"大疃镇","code":"371082109000"},{"name":"荫子镇","code":"371082107000"},{"name":"虎山镇","code":"371082111000"},{"name":"东山街道","code":"371082005000"},{"name":"斥山街道","code":"371082006000"},{"name":"上庄镇","code":"371082110000"},{"name":"寻山街道","code":"371082009000"},{"name":"俚岛镇","code":"371082101000"},{"name":"港西镇","code":"371082104000"},{"name":"人和镇","code":"371082112000"},{"name":"埠柳镇","code":"371082103000"},{"name":"夏庄镇","code":"371082105000"},{"name":"崖西镇","code":"371082106000"},{"name":"成山镇","code":"371082102000"},{"name":"滕家镇","code":"371082108000"},{"name":"城西街道","code":"371082008000"},{"name":"宁津街道","code":"371082001000"},{"name":"崂山街道","code":"371082010000"},{"name":"崖头街道","code":"371082007000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示