jvectormap:在标记之间画线?

问题描述 投票:7回答:4

我正在尝试验证是否可以使用jvectormap在地图上的标记之间绘制线条。

以下是我想要实现的目标:http://i.imgur.com/p1Zypv3.gif

如果这是可行的,有人可以给我一个提示,如果可以的话怎么办?

感谢任何输入。

jvectormap
4个回答
3
投票

这可以通过Jvectormap,Jvectormaps坐标转换器方法latLngToPoint()和Jvectormap顶部的SVG层的组合来完成。实际上,利用SVG.js作为Jvectormap顶部的图层,您可以使用经度 - 纬度坐标替换点,从而可以对SVG执行任何操作。

您需要在页眉中加载Jvectormap,Jvectormap映射文件,svg.js和svg.path.js插件(请参阅https://svgdotjs.github.io)。您还需要在一个可以与CSS绝对设置重叠的div中创建两个div。

<div id="mapContainer" style="position:relative">
    <div id="map" style="position:absolute;top:0px;left:0px"></div>
    <div id="svgMapOverlay" style="position:absolute;top:0px;left:0px"></div>
</div>

创建一个具有纬度和经度的标记数组,用于在地图上绘制线条和从中绘制线条:

var markerArray = [
    {name:'Houston', latLng:[29.761993,-95.369568]},
    {name:'New York', latLng:[40.710833,-74.002533]},
    {name:'Kansas City', latLng:[39.115145,-94.633484]}
];

然后使用上面的标记设置Jvectormap:

var map = $('#map').vectorMap({
    map: 'us_aea_en',
    zoomMin: 1,
    zoomMax: 1,
    markers: markerArray
});

最后,将地图调用为对象,创建SVG图层,将lat-long坐标转换为div内的点:

var map = $('#map').vectorMap('get', 'mapObject');
var draw = SVG('svgMapOverlay').size(660, 400);
var coords1 = map.latLngToPoint(markerArray[0].latLng[0],markerArray[0].latLng[1]);
var coords2 = map.latLngToPoint(markerArray[1].latLng[0],markerArray[1].latLng[1]);
draw.path().attr({ fill: 'none',stroke: '#c00', 'stroke-width': 2 }).M(coords1.x, coords1.y).L(coords2.x, coords2.y);

大多数JS应该进入$(function()调用或$(document).ready(function()块启动。

你可以看到这个JSFiddle更多细节:http://jsfiddle.net/ruzel/V8dyd/

免责声明:我不知道缩放会发生什么;它被关闭了这个例子。


2
投票

最后,我尝试实现向JVectorMap添加Lines的功能。使用SVG的解决方案很好,但不适用于Zoom,Move和Panzoom。所以我直接向JVectorMap添加了指定Lines的选项,类似于Regions和markers。您可以查看Pull Request https://github.com/bjornd/jvectormap/pull/431的状态,其中包含所有内容。现在你可以使用绘制线条了

var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];

仍然,拉请求需要包含在新版本的jvectormap中,希望作者能尽快完成:)工作代码在我的个人博客上:https://sevenhillsaway.com/map/


0
投票

所以我一直在尝试@russellmania的答案。它工作,但只有SVG版本,它包含在jsfiddle链接中。如果我用SVG的实际版本尝试相同的代码,它会在SVG上崩溃,说“this.clear(...)。attr”函数没有定义。但是,对我来说,我希望JVector缩放和地图移动功能仍然有效。但是对于地图上的SVG图层,它不起作用。或者说,有两个选项:1)禁用移动和缩放(我不想要这个)2)启用缩放,移动,但随后SWG层不会像JVector一样缩放和移动,因此路径从地图中取消同步:)

我找到了一种使用Markers在JVector中画线的方法。但这不是正确的方法。所以我还在浏览jvectormap文档,如果有什么方法可以直接在jvectormap中绘制一条线。


-1
投票

var markerIndex=1;
var markerCoords=[];
latLng={72,62};
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
© www.soinside.com 2019 - 2024. All rights reserved.