7

我已经按照 AmCharts 上的教程创建了自定义地图，但使用了我们之前系统中的 SVG（英国的系统就是一个例子，但我有大约 2000 个自定义 SVG 的定义区域/领土/地区集合）。

虽然地图显示没有问题，但它显示的是颠倒的。

有人可以帮助在不需要重新创建所有 SVG 的情况下将它们翻转回来吗？

你可以在这里看到这个问题http://jsfiddle.net/aZt8N/830/

AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/3/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.balloon.color = "#000000";

    var dataProvider = {
        mapVar: AmCharts.maps.UK,
        getAreasFromMap: true
    };

    map.dataProvider = dataProvider;
    map.write("mapdiv");
});

SVG 示例（JSON 格式）：

{
    "id": "19",
    "title": "Isle of Man",
    "d": "M-294128.0419983654 6005604.579318236 L-297849.15 6002052.63 L-302960.48 6004919.03 L-307536.97 6003878.02 L-308772.14 6004362.52 L-305875.18 6009275.65 L-304770.50193180586 6012664.048443736 L-302096.82 6020865.08 L-298362.66970319534 6023706.069639378 L-296413.32 6025189.16 L-291628.35136520385 6032625.148624786 L-288841.99 6036955.24 L-283264.74 6040009.53 L-281429.49 6039424.07 L-280324.93 6038202.8 L-280267.3142244041 6037728.901568649 L-278638.37 6024330.59 L-281236.71112765424 6021135.176051484 L-282416.08 6019684.8 L-283956.92 6015313.33 L-287114.60612506856 6012299.189836851 L-288129.6779798481 6011330.2623612285 Z"
                        }
4

1 回答 1

2

我在这里实现了这个问题的解决方案：

http://jsfiddle.net/Fresh/rzL509qr/

结果是：

在此处输入图像描述

我将首先注意到它不是最优雅的解决方案，因为它涉及在AmCharts 呈现它的输出之后使用 SVG 矩阵转换。我还在应用程序中引入了 jQuery 以应用代码来执行转换（您可以在以后将其更改为 javascript，为了方便起见，我只是使用了 jQuery）。

该解决方案涉及转换包含地图的组（即“g”元素），即

<g transform="matrix(1 0 0 -1 0 370)">

这个变换矩阵反映了通过图像中心的水平线的一切。“370”是 SVG 的高度（370 像素）。

我使用以下方法应用了这个矩阵变换：

$('svg g:nth-child(8)').attr('transform','matrix(1 0 0 -1 0 370)');

更新

虽然此解决方案正确地反转了坐标，但向上/向下拖动功能已被破坏（doh！）。我不会删除这个答案，因为它可能会有所帮助，希望有人对如何在这种情况下反转鼠标 y 轴有一个聪明的想法！

您可以尝试应用此转换，反转左右箭头，但禁用拖动工具。这应该允许用户在地图上直观地导航，尽管不方便使用鼠标。

于 2014-08-22T23:05:39.837 回答