当前位置: 首页 > 知识库问答 >
问题:

前端 - 中国制霸简版地图 SVG 数据来源?

翟默
2023-05-22

类似神奇海螺试验场这样的:

它与实际地图导出的 SVG 不同,少了很多边缘的曲线路径,这种就非常方便数据可视化。所以我就想知道这样的地图数据来源是哪里(这个是国家省份级的),想做省市级的展示。

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1134 976">
<style></style>
<style>
text{
    font-family: 'Tensentype-JiaLiDaYuanJF',sans-serif;
    fill:#111;
    font-size:30px;
}
#标题,
#分数{font-size:60px;}
.fs24{font-size:24px;}
#地区 path,
#曾母暗沙,
.边框{
    fill-rule:evenodd;
    clip-rule:evenodd;
    stroke:#000;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
#地区 path{
    fill:#FFF;
    cursor: pointer;
    pointer-events: auto;
}
#曾母暗沙,
.边框{fill:none;}
#地区 path[level="5"]{fill:#FF7E7E;}
#地区 path[level="4"]{fill:#FFB57E;}
#地区 path[level="3"]{fill:#FFE57E;}
#地区 path[level="2"]{fill:#A8FFBE;}
#地区 path[level="1"]{fill:#88AEFF;}
</style>
<text x="425" y="119" id="标题">中国制霸</text>
<g id="地区">
    <path id="黑龙江" d="M1100,33v158H894V33H1100z"/>
    <path id="甘肃" d="M585,191v371H351V191H585z"/>
    <path id="吉林" d="M894,191v85h206v-85H894z"/>
    <path id="内蒙古" d="M894,33H738v158H499v227h227l168-108V33z"/>
    <path id="山东" d="M779,446v92h139v-92H779z"/>
    <path id="河北" d="M861,310H726v180h117v-95h18V310z"/>
    <path id="北京" d="M763 336h80v52H763Z"/>
    <path id="天津" d="M763,388h80v43h-80V388z"/>
    <path id="西藏" d="M389,770H35V466h354V770z"/>
    <path id="新疆" d="M35,466V87h316v379H35z"/>
    <path id="河南" d="M779,490H654v117h125V490z"/>
    <path id="安徽" d="M852,538h-73v138h73V538z"/>
    <path id="山西" d="M654,418v108h72V418H654z"/>
    <path id="湖北" d="M779,688v-81H654v81H779z"/>
    <path id="青海" d="M442,626V395H228v231H442z"/>
    <path id="辽宁" d="M861,276v119h154V276H861z"/>
    <path id="广东" d="M823,788H679v81h144V788z"/>
    <path id="江苏" d="M899,538v87h-62v-87H899z"/>
    <path id="江西" d="M852,806V676H749v130H852z"/>
    <path id="浙江" d="M852,625l74,1v107h-74V625z"/>
    <path id="福建" d="M823,733v107h73V733H823z"/>
    <path id="上海" d="M882 602h72v47H882Z"/>
    <path id="陕西" d="M585,653h69V418h-69V653z"/>
    <path id="湖南" d="M654,688h95v100h-95V688z"/>
    <path id="广西" d="M679,788H537v81h142V788z"/>
    <path id="香港" d="M758 856h42v33H758Z"/>
    <path id="澳门" d="M701 856h45v33H701Z"/>
    <path id="贵州" d="M654,709H537v79h117V709z"/>
    <path id="重庆" d="M565 653h89v56H565Z"/>
    <path id="四川" d="M565,737v-84h20v-91H389v175H565z"/>
    <path id="云南" d="M537,737H389v115h148V737z"/>
    <path id="宁夏" d="M585,418h-86v96h86V418z"/>
    <path id="台湾" d="M918 788h45v87H918Z"/>
    <path id="海南" d="M615 897h78v46H615Z"/>
</g>
<path id="曾母暗沙" d="M827 941L827 897L908 897L908 941"/>
<g id="地名">
    <text x="659" y="266">内蒙古</text>
    <text x="951" y="123">黑龙江</text>
    <text x="966" y="242">吉林</text>
    <text x="906" y="347">辽宁</text>
    <text x="773" y="371">北京</text>
    <text x="773" y="419">天津</text>
    <text x="751" y="469">河北</text>
    <text x="861" y="488">山</text>
    <text x="861" y="518">东</text>
    <text x="685" y="579">河南</text>
    <text x="684" y="658">湖北</text>
    <text x="684" y="733">湖</text>
    <text x="684" y="763">南</text>
    <text x="846" y="575">江</text>
    <text x="846" y="605">苏</text>
    <text x="888" y="635">上海</text>
    <text x="872" y="685">浙</text>
    <text x="872" y="715">江</text>
    <text x="844" y="783">福</text>
    <text x="844" y="813">建</text>
    <text x="925" y="826">台</text>
    <text x="925" y="856">湾</text>
    <text x="625" y="930">海南</text>
    <text x="721" y="842">广东</text>
    <text x="772" y="736">江</text>
    <text x="772" y="766">西</text>
    <text x="793" y="603">安</text>
    <text x="793" y="633">徽</text>
    <text x="674" y="466">山</text>
    <text x="674" y="496">西</text>
    <text x="604" y="536">陕</text>
    <text x="604" y="566">西</text>
    <text x="527" y="460">宁</text>
    <text x="527" y="490">夏</text>
    <text x="411" y="304">甘</text>
    <text x="411" y="334">肃</text>
    <text x="301" y="520">青海</text>
    <text x="453" y="660">四川</text>
    <text x="432" y="805">云南</text>
    <text x="579" y="839">广西</text>
    <text x="566" y="759">贵州</text>
    <text x="579" y="691">重庆</text>
    <text x="104" y="639">西藏</text>
    <text x="163" y="288">新疆</text>
    <text x="767" y="880" class="fs24">港</text>
    <text x="711" y="880" class="fs24">澳</text>
</g>
<a href="https://lab.magiconch.com" target="_blank">
    <text x="37" y="937">神奇海螺试验场</text>
</a>
<text id="分数" x="35" y="883">分数</text>
<g id="等级">
    <path fill="#FF7E7E" d="M983 450h120v50H983Z"/>
    <path fill="#FFB57E" d="M983 500h120v50H983Z"/>
    <path fill="#FFE57E" d="M983 550h120v50H983Z"/>
    <path fill="#A8FFBE" d="M983 600h120v50H983Z"/>
    <path fill="#88AEFF" d="M983 650h120v50H983Z"/>
    <path fill="#FFF" d="M983 700h120v50H983Z"/>
    <path class="边框" d="M983 448h120v304H983Z"/>
    <text x="1000" y="484">居住5</text>
    <text x="1000" y="535">短居4</text>
    <text x="1000" y="585">游玩3</text>
    <text x="1000" y="635">出差2</text>
    <text x="1000" y="685">路过1</text>
    <text x="998" y="735">没去过</text>
</g>
</svg>

共有1个答案

萧伟兆
2023-05-22

这些东西以前echarts都是可以下载的, 不过现在没有了, 但是阿里的高德还是提供地图数据JSON的

http://datav.aliyun.com/portal/school/atlas/area_selector#&la...

具体的就在这里面找就行了

 类似资料:
  • 「中国制霸生成器」是中国三十四省级行政区域制霸标记生成工具。 功能 可以在线标记 居住过、住宿过、游玩过、出差过、路过的省级行政区域 标记后可生成图片进行社区分享 标记过的信息会记录到本地存储,有什么新进展再次打开网页更新即可

  • 如何在前端项目中简单优雅的使用 svg 图标并且适应排版? 我 clone 了一个项目改改改 https://github.com/zauberzeug/nicegui 原版项目右上角是一个 github 的图标:https://github.com/zauberzeug/nicegui/blob/main/website/static/github.svg 因为我的项目是 gitlab 的,所以

  • 我对谷歌的android地图api完全陌生,我想知道是否有可能将地图显示的区域限制在一个国家。我的意思是,我的目标用户只在我自己的国家,当应用程序逻辑只在这个国家上时,向他们展示整个世界是没有用的,也不符合逻辑的。 有什么想法吗? PS:如果在谷歌的api中不可能,有没有办法用另一个api从另一个提供映射服务的源中做到这一点?

  • 本章以中国地图为例,介绍地图的制作方法。 在数据可视化中,地图是很重要的一部分。很多情况会与地图有关联,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起。 地图数据的获取 制作地图需要 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式,可以学习【JSON 浅谈】系列。 将 JSON 的格式应用于地理上

  • 本文向大家介绍PHP+Mysql+jQuery中国地图区域数据统计实例讲解,包括了PHP+Mysql+jQuery中国地图区域数据统计实例讲解的使用技巧和注意事项,需要的朋友参考一下 今天我要给大家介绍在实际应用中,如何把数据载入到地图中。本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果。 本例以统计某产品在各省份的活跃用户数为背景,数据来源于mysql数据库,根据