3d 地图 svg 可交互_带有SVG和JavaScript的交互式地理地图

3d 地图 svg 可交互

In previous articles I’ve demonstrated how SVG can be used to create responsive, scalable imagemaps, but have left the interactive part - aside from simple hover effects - largely unexplored, with a few exceptions. That changes with this article and the one following, which explore how to create a full, in-depth interface using SVG and JavaScript: in this case, a geographical map.

在先前的文章中，我演示了如何使用SVG来创建可响应的，可伸缩的图像贴图 ，但是除了简单的悬停效果之外， 互动部分没有得到充分利用， 除了少数例外 。 这随着本文和后面的内容而改变，本文探讨了如何使用SVG和JavaScript创建完整而深入的界面：在本例中为地理地图。

采购地图 (Sourcing The Map)

One of the pleasures of using SVG today is the fact that a decade of relative obscurity has provided the opportunity for a long period of quiet professional content development, much of it free and/or open source. For example, every country is available as an SVG drawing, together with most geographical regions. I’ll use Wikipedia’s SVG map of Canada as a source for this interactive.

今天使用SVG的乐趣之一是，十年的相对模糊性为长期安静的专业内容开发提供了机会，其中大部分内容是免费和/或开源的。 例如，每个国家和大多数地理区域都可以作为SVG图形使用。 我将使用Wikipedia的SVG加拿大地图作为此交互的来源。

清理源 (Cleaning up the source)

This is not to say that every SVG drawing is exactly how you need it; many are over-coded, and most need to be cleaned up to some degree. In the case of Wikipedia’s map, I did the following:

这并不是说每一个SVG图都是您真正需要的。 许多都被过度编码，并且大多数都需要进行某种程度的清理。 对于Wikipedia的地图，我做了以下工作：

1. Used Adobe Illustrator to straighten the map and eliminate territory in the northernmost provinces (sorry, Nunavut!) in order to save space.

   使用Adobe Illustrator拉直地图并消除最北部省份(对不起，努纳武特！)中的领土，以节省空间。

2. I also used Illustrator’s Simply tool to reduce the number of points in the SVG, minimizing file size and clutter. Using