缩放后多多边形错误连结

mapbox-developer-group / Mapbox-Tech-Q-A

在提问之前请自行查看文档哦，养成好习惯：https://docs.mapbox.com/

32 stars 1 forks source link

缩放后多多边形错误连结 #41

Open timeroute opened 4 years ago

timeroute commented 4 years ago

我通过d3.contour 库生成了一个都是 MultiPolygon 的 Geojson 文件。通过 mapboxgl 渲染在缩放的情况下会产生不同区域多边形连结的错误情况。

mapbox-gl-js 版本: 1.6.0

浏览器: chrome

例子代码

dazhi1011 commented 4 years ago

@chinesejar 试了下，换了几个旧版本也是这样，官方还给贴了个bug，可能是geojson-vt的问题，有兴趣可以深入debug一下。目前的建议是重新组织你的geojson，用多Polygon代替MultiPolygon，然后再重新添加下看看效果

timeroute commented 4 years ago

多polygon代替multipolygon的方法我已经试过了，还是一样的效果，看来只能是geojson-vt的问题了，能帮忙反馈给开发人员吗？希望能及时处理一下这个问题，官方那个issue也是我提的，半个多月了

canglaoshidaidui commented 4 years ago

@chinesejar 你好，可以发一份你有问题的数据给我么？邮箱983038217@qq.com

timeroute commented 4 years ago

@canglaoshidaidui 例子里不是有吗？看例子了吗？

canglaoshidaidui commented 4 years ago

624U}UJ5~I5BF_0Z1 RB%6O 我检查了您的数据，发现他们有拓扑错误。而且您的数据精度给的太高了，小数据后给到了14位，mapbox fro java的sdk默认给到小数点后7位。由于切片时候可能会对小数点后位数进行取舍，精度越高，取舍后越容易出现拓扑问题！我这边检查数据时候如果精度给到7位，那么就有三条数据通不过拓扑检查了！建议对数据进行抽稀，然后降低数据后小数点的位数。

timeroute commented 4 years ago

@canglaoshidaidui 谢谢，针对你说的情况我再优化一下数据，看看结果先

timeroute commented 4 years ago

@canglaoshidaidui mapboxgl js库自带了抽稀选项，tolerance详情，但是效果不好，抽稀的有点厉害了。

this.map.addLayer({
    id: "test",
    type: "fill",
    source: {
      type: "geojson",
      data,
      tolerance: 2.3
    },
    layout: {
      "fill-sort-key": ["get", "value"]
    },
    paint: {
      "fill-antialias": false,
      "fill-color": fillColor
    }
});

效果：

canglaoshidaidui commented 4 years ago

感觉不抽稀数据应该也行，但是数据里的拓扑错误要解决掉，这样的话应该就不会出现之前的问题了

timeroute commented 4 years ago

@canglaoshidaidui 谢谢，我尝试使用 mapshaper 来解决拓扑错误的情况，确实解决了大部分的错误，但是仍然有一些小小的错误，现在我可以确定你说的拓扑错误的情况。请问有没有合适的工具能完全修复这种错误？如果自己实现的话无从下手。