带有自定义地图的AmCharts - AmMap倒挂显示
带有自定义地图的AmCharts - AmMap倒挂显示
提问于 2014-08-14 07:27:54
我遵循关于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"
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-22 23:05:39
我在这里实施了一个解决这一问题的办法：
http://jsfiddle.net/Fresh/rzL509qr/
结果是：
我将首先注意到，它不是最优雅的解决方案，因为它涉及在AmCharts呈现输出后使用SVG矩阵转换。我还在应用程序中引入了jQuery，以应用代码来执行转换(您可以稍后将其更改为javascript，我只是为了方便起见使用了jQuery )。
解决方案包括转换包含映射的组(即'g‘元素)。
<g transform="matrix(1 0 0 -1 0 370)">这个变换矩阵反映了关于通过图像中心的水平线的一切。"370“是你的SVG (370 of )的高度。
我使用以下方法应用了这个矩阵转换：
$('svg g:nth-child(8)').attr('transform','matrix(1 0 0 -1 0 370)');更新
虽然此解决方案正确地逆转了协调，但拖放/向下的功能已经中断(doh!)。我不会删除这个答案，因为它可能会有帮助，并希望有人会有一个聪明的想法，如何倒置鼠标y轴在这个场景！
您可以尝试的是应用此转换，反转左右箭头，但禁用拖动工具。这应该允许用户在地图周围进行直观的导航，但不需要使用鼠标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25302351
复制相关文章
相似问题
腾讯云开发者
