与SVG和JQuery的动态地理地图

当我需要创建图表时，我的首选是Google图表或另一个专用库。但是，有时候，我需要一些我在那里找不到的特定功能。在这些情况下，SVG图像被证明非常有价值。 最近，我必须构建一个报告页面，该页面能够显示一张意大利的地图，其中每个区域根据从数据库中检索的某些值具有不同的颜色音调。多亏了SVG，这项任务非常容易。

>

钥匙要点

根据从数据库中检索到的数据，可以使用

SVG图像来创建每个区域的动态地理图。这是通过将每个区域绘制为具有唯一级别名称的单个对象来实现的，该对象与数据库中使用的代码识别其数据。

>可以使地图与CSS和jQuery进行交互，从而允许其显示特定的数据，例如人群值，当鼠标徘徊在区域上时。这是通过添加G：Hover和新的Info_panel类的CSS规则来实现的，以样式的信息框，然后对上一个循环修改，将.data（）添加为存储将在Hover上显示的信息。
• > 可以使
SVG地图响应响应，与其他JavaScript库一起使用，用于数据可视化，甚至是动画。它们也可以自定义和优化以进行性能。但是，创建自定义地图需要对SVG和地理数据有很好的了解，并且复杂的动画会影响性能。
在Illustrator中创建SVG地图
首先，我画了一张意大利的地图，上面写着插图画家：

>每个区域都被绘制为一个对象，并且每个区域都有自己的级别，其名称与数据库中使用的代码匹配以识别其相对数据（例如：托斯卡纳的“ TOS”）。

最后，必须将地图保存为SVG文件。您必须注意将“ CSS属性”选项设置为Illustrator中的“样式元素”，如下所示：

>打开刚刚创建的文件，您会看到它包含一组g标签，其ID与Illustrator级别的名称匹配。

构建我们的html文件

g标签中包含的每个项目都有一个ST0类，因此可以将中风和填充CSS属性分配给它们：>

如果您尝试更改这些值，则地图将立即更改：>

现在，我们可以使用该代码使用Inline SVG构建HTML文件，如下所示（为方便起见，缩短了代码）：>

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Map Sample<span><span></span>></span>
</span>    <span><span><span><style> type<span >="text/css"</style></span> media<span>="all"</span>></span><span>
</span></span><span><span>        <span><span>.map svg</span> {
</span></span></span><span><span>            <span>height: auto;
</span></span></span><span><span>            <span>width: 350px;
</span></span></span><span><span>        <span>}
</span></span></span><span><span>        <span><span>.map g</span> {
</span></span></span><span><span>            <span>fill: #ccc;
</span></span></span><span><span>            <span>stroke: #333;
</span></span></span><span><span>            <span>stroke-width: 1;
</span></span></span><span><span>        <span>}
</span></span></span><span><span>    </span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><div> class<span>="map"</span>>
        <span><span><span><svg> version<span>="1.1"</span> id<span>="Livello_1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span> <span>xmlns:xlink</span><span>="https://www.w3.org/1999/xlink"</span> x<span>="0px"</span> y<span>="0px"</span> viewBox<span>="0 -21.6 761 919"</span> <span>style<span>="<span>enable-background:new 0 -21.6 761 919;</span>"</span></span> <span>xml:space</span><span>="preserve"</span>></svg></span>
</span>            <span><span><span><g> id<span>="sar"</span>></g></span>
</span>                <span><span><span><polygon> class<span>="st0"</span> points<span>="193,463 ...    "</span>/></polygon></span>
</span>            <span><span><span></span>></span>
</span>
            <span><!-- etc ... -->
</span>
        <span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span>

>您可以看到SVG标签内部的样式属性已被删除，并用位于文档头部内部的新样式替换。所有G元素最初都充满了浅灰色。

>不再使用ST0类（您可以从SVG代码中删除它），并且已被.map G Selector替换。无论如何，这不是强制性的，您可以使用您喜欢的CSS选择器。

第二步包括将我们的地图与从数据库中检索的一些数据结合。在此示例中，我们的目标是根据每个地区的人口绘制地图。

添加JSON数据和JavaScript

>数据以JSON格式检索，并直接粘贴在我们的HTML文件中（当然，在现实世界中，将使用AJAX或类似的数据检索数据）。

>

现在，我们的页面将在我们的JavaScript文件中包含JSON，该文件看起来像这样（再次，缩写）： 在那之后，选择了一种颜色（在这种情况下为＃0b68AA），然后将其分配给人口最高价值的区域。其他区域将以主要颜色的色调与人口百分比成比例。 接下来，我们可以添加一些JavaScript。

首先，我们必须确定最大种群价值的区域。这可以使用几行代码来完成。

>

<span>var regions=[
</span>    <span>{
</span>        <span>"region_name": "Lombardia",
</span>        <span>"region_code": "lom",
</span>        <span>"population": 9794525
</span>    <span>},
</span>    <span>{
</span>        <span>"region_name": "Campania",
</span>        <span>"region_code": "cam",
</span>        <span>"population": 5769750
</span>    <span>},
</span>
    <span>// etc ...
</span>
<span>];</span>

>一旦构建了包含总体值的临时数组，我们就可以使用Math.max方法：>

然后，我们可以根据计算

>人口 /最大值

（在jQuery的一点帮助下），将透明度的百分比应用于它们：>

这是结果：

<span>var temp_array= regions.map( function( item ) {
</span>    <span>return item.population;
</span><span>});
</span>
<span>var highest_value = Math.max.apply( Math, temp_array );</span>

添加与CSS和JQuery 的交互性 可以通过一些交互性来改进地图。我们希望它在鼠标位于区域上放置时显示人口价值。

>

<span>$(function() {
</span>  <span>for(i=0; i     <span>$('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,' 
</span>     <span>+ regions[i].population/highest_value 
</span>     <span>+ ')'});
</span>    <span>}
</span><span>});</span></span>

首先，我们为G：Hover和一个新的Info_panel类添加了CSS规则，以设计我们的信息框：

上的信息

>最后，我们可以通过添加一些鼠标效果来完成脚本：

>

它的工作原理：

• 首先，使用鼠标，我们构建了一个DIV，其中包含要显示的信息（区域名称和人口）。每当鼠标悬停在G元素上并将其附加到文档主体时，DIV是构建的； 当光标在盘旋区域外时， mouseleave删除了div；
最后的方法，莫斯莫夫，检索鼠标坐标并将其分配给生成的divs。
这是codepen的最终结果：
请参阅codepen上的sitepoint（@sitepoint）的笔kdhfh。

在带有SVG和jQuery

的动态地理地图上的常见问题（常见问题解答）

>如何使我的SVG映射响应？

使您的SVG映射响应能力涉及将SVG的宽度和高度设置为100％，并确保正确设置了ViewBox属性。 ViewBox属性允许您指定地图的某个区域可见，并且在缩放或向下扩展时将保留纵横比。您还可以使用媒体查询根据屏幕大小来调整地图的大小和位置。

我可以与其他JavaScript库一起使用SVG地图，除了jQuery？

​​

是的，SVG地图可以与其他JavaScript库一起使用，例如D3.JS，Raphael和Snap.svg。这些库为创建和操纵SVG图形提供了其他功能。但是，实现可能与jQuery不同，因此您需要参考各自的库的文档。

>

>如何将交互性添加到我的svg地图？

>您可以将交互性添加到您的使用JavaScript或jQuery的SVG地图。这可以包括工具提示，缩放，平移和可点击区域之类的功能。例如，您可以使用'MouseOver'和'MeorsOut'事件显示工具提示，以及“单击”事件以使区域可单击。

>

>如何使用SVG映射进行数据可视化？ 🎜> SVG地图可用于通过基于数据值的着色区域来可视化数据，这是一种称为Choropleth映射的技术。您可以使用JavaScript将数据绑定到您的SVG元素并应用颜色尺度。诸如d3.js之类的库提供了用于创建唱片映射的内置功能。>

>如何创建自定义SVG映射？

>创建自定义SVG地图涉及使用诸如vector图形软件绘制映射Adobe Illustrator或Inkscape，然后将其导出为SVG文件。然后，您可以使用JavaScript或jQuery来操纵SVG元素并添加交互性。请记住，创建自定义地图需要很好地了解SVG和地理数据。

>为什么我的SVG地图区域无法正确显示？

如果您的SVG地图区域未正确显示，则可能是由于几个原因。 SVG文件可能无法正确格式化，或者在JavaScript代码中可能会出现错误。检查控制台中是否有任何错误消息，并确保您的SVG文件有效。

我可以在所有浏览器中使用SVG地图吗？

野生动物园和边缘。但是，旧版本的Internet Explorer（IE8及以下）不支持SVG。如果您需要支持这些浏览器，则可以使用诸如Raphaël之类的多填充或将SVG转换为其他格式。性能地图可能涉及几种技术。其中包括最大程度地减少SVG文件的大小，使用CSS进行样式而不是内联属性以及有效地使用JavaScript。您还可以使用SVGO之类的工具来优化SVG文件。

如何使我的SVG映射动画？

>您可以使用CSS动画或JavaScript对SVG映射进行动画动画。这可以包括对SVG元素的颜色，形状和位置进行动画动画。请记住，复杂的动画会影响性能，因此很少使用。 SVG在Android和iOS Web视图中都得到了支持，并且可以使用Cordova或React Native等框架中使用。但是，请记住，在旧设备或复杂地图上性能可能是一个问题。

>

以上是与SVG和JQuery的动态地理地图的详细内容。更多信息请关注PHP中文网其他相关文章！