2

我正在构建共享边界的几个县的地图。每个县都是它自己的封闭路径，因此相邻县的边界相互重叠。

我想给每个县一个虚线。但是，在应用时，相交的边界看起来很难看，因为每个县的虚线边界重叠，从而产生不均匀的虚线外观。

我的用户将通过将鼠标悬停在县边界内的区域上来选择县，因此（我相信）有必要为每个县创建一个封闭的路径。

解决方案？

4

3 回答 3

0

如果将 a<pattern>用于笔划，则可以基于整体坐标系定义图案，而不是基于任何一种形状的尺寸。因此，不同形状的图案将完美排列。

缺点是图案不会与线条的方向对齐：无论线条是垂直、水平还是弯曲，图案都将保持不变。就好像你有一张你的图形大小的图案壁纸，并沿着你的形状轮廓剪下一条。因此，诀窍是找出一个看起来不错的模式，无论线如何穿过它。

见例子： http: //fiddle.jshell.net/LYue4/2/

基本外观是使用重叠 dash-array 属性的结果。将鼠标悬停在图像上，它将切换到棋盘图案；如果您在图像上按住鼠标，它将切换到对角线图案。

两者看起来都不错，但不是很好，具体取决于路径线的角度。您必须在地图上对其进行测试，看看它是否有所改进。

模式代码：

<defs>
    <pattern id="checkerboard" patternUnits="userSpaceOnUse" width="2" height="2">
        <rect width="1" height="1"/>
        <rect width="1" height="1" x="1" y="1"/>
    </pattern>
    <pattern id="diagonals" patternUnits="userSpaceOnUse" width="2" height="2">
        <line x1="-1" y1="0" x2="2" y2="3" />
        <line x1="0" y1="-1" x2="3" y2="2" />
    </pattern>
</defs>

CSS：

svg path{
    fill:lightblue;
    stroke: black;
    stroke-dasharray: 2 2;
}
svg:hover path{ 
    stroke: url(#checkerboard);
    stroke-dasharray: none;
}
svg:active path{ 
    stroke: url(#diagonals);
    stroke-dasharray: none;
}
pattern line {
    stroke-width:0.8;
    stroke:black;
}

您当然可以随意调整图案拼贴的大小和对角线的粗细，但我发现线条必须比图案拼贴长才能使它们平滑重叠。

于 2014-02-26T20:42:55.580 回答
0

我最终以不同于任何建议的方式解决了这个问题。我在这里发布了另一个更具体的问题。（见我的回答）

完成我在另一个问题中概述的步骤后，我将 shapefile 转换回 geojson 并将其加载到我的地图中。我没有删除包含整个多边形的geojson，只是关闭了该图层上的边框样式。然后我将相同的图层样式应用到溶解的 geojson，这次是虚线。

结果的图像在这里。

于 2014-04-11T19:53:54.727 回答
0

是的，封闭的路径是必需的。但是，虚线笔划总是不均匀的，因为虚线数组与路径长度有关，路径长度对于每条路径都是不同的。对于每条路径，最好放弃笔画或使其保持相同的宽度，不使用破折号。我用来显示鼠标悬停的策略是降低鼠标悬停时的不透明度，然后在鼠标悬停时将其返回到 1.00。

于 2014-02-26T18:24:26.317 回答