@ragnaroks @runze #105 我用单个 canvas ，一个 800*600 的图片，分割成左右两个 宽度 400*600 的图片，10 毫秒重绘一次，会闪屏。如果上双缓冲 canvas 又无法实现截图残缺的效果。请教如何写这个效果？

@runze #70 感谢回复，我主要是不理解您说的 “ 每帧图片遮罩盖住一部分，截图得到的就是不完整的 ”。 用 canvas 怎么实现的呢？

@runze #30 没明白这个实现逻辑，请教补充说明一下关键点？

我 2017 左右做编辑器的时候见过一个 Cloudcraft.co 的网站，和你的需求好像挺相似。

注册了账号，准备用一下试试看。个人觉得当前的定价策略可能还要再慎重的考虑一下。

检查一下 MIME 配置。

IINA 用了一段时间，主要是那个播放控制条在画面区域遮挡的太难受，换成 movist pro 舒服多了。

@liuguangxuan 可以看看国外的 航空协会或者交通部门的数据报告，里面应该有不同维度的分析案例。
书籍没有推荐的，网站可以推荐几个供你参考：
1 、https://doc.arcgis.com/en/arcgis-storymaps/gallery/
2 、https://www.flightradar24.com/blog/
3 、https://www.uber.com/nl/en/community/supporting-cities/data/
4 、https://mapoftheweek.blogspot.com/search/label/traffic
5 、https://blog.mapbox.com/data-visualization/home
6 、https://cnr.ncsu.edu/geospatial/

@liuguangxuan

1 、这种情况我暂时没想什么好的解决方法。

2 、自带的不行，自己写一个 函数 （存储过程）吧。

https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm
Java 版：
https://github.com/locationtech/jts/blob/444903159c8eab21b5ee33e05297c64e17022e9b/modules/core/src/main/java/org/locationtech/jts/simplify/DouglasPeuckerSimplifier.java
JS 版：
https://github.com/Turfjs/turf/blob/84110709afda447a686ccdf55724af6ca755c1f8/packages/turf-simplify/lib/simplify.js

3 、建议你看一下官方文档，本质上是一种 graph 数据结构，常用于路径分析。

---------

我觉得讨论的解决方法趋向复杂化了，感觉你的业务场景应该是比较简单的 GPS 轨迹回放。

ST_MakeLine 生成线，然后 ST_Simplify 抽稀的方法性能可能是瓶颈。

从入库阶段做好数据预处理是否是较好的解决方法呢？例如点数据入库之前，预先根据容差值，标记一个关键点数据出来（把抽稀的过程提前做了）。

我好久没做一线的 GIS 开发了，回答的内容仅供你参考。

@liuguangxuan #30 这种情况解决方法挺多的，默认就是查线对象，拿到点的 XY 之后去点集合表中去查询对应的数据就可以，空间索引是生效的。如果速度不理想，你可以把生成线的那些点的 FID ，使用集合存到线对象的字段中（按照顺序），查询线的时候从这个集合里面取出来 FID ，然后去点集合表中去查。
此外我以前常用的方式是把空间数据（只存放涉及地理查询分析的数据）与业务数据分离，通过 ID 进行一对一的关联。例如你把轨迹点的表，拆成两个表，空间表中的每条记录都有一个与之相关的业务数据记录 ID 。业务表中的每条记录也有一个空间记录的 FID 。或者建立一个中间表，里面可以建立业务数据记录与多个空间数据表的关联性，也就是一条业务记录可以关联多个空间几何要素表。在甚者你可以考虑增加冗余来换取速度，直接在线集合表中扔个 JSON 。
再复杂的话，也可以用拓扑结构来存对应关系。上述的这些方法都要根据实际业务需求来进行设计开发，集合数据使用场景频次，针对性的优化。

我吐了，就这样吧。。。

我去，这格式稀烂啊....

可以用 Markdown 是吧。。

```
(function() {
'use strict';
const answersContainer=document.querySelector("#QuestionAnswers-answers .AnswersNavWrapper");
const callback = (mutationList, observer) => {
mutationList.forEach((mutation) => {
switch(mutation.type) {
case 'childList':
answersContainer.querySelectorAll(".List-item .RichText-MCNLinkCardContainer").forEach(card=>{
if(card?.offsetParent && card.offsetParent.hidden!=true){
card.offsetParent.hidden=true;
}
});
break;
}
});
};
const observer = new MutationObserver(callback);
observer.observe(answersContainer, { childList: true,subtree: true});
})();

```

随手写了一个油猴脚本，简单测试一下还可以。给你提供一个思路，你根据需求自己调整一下吧。

// @match https://www.zhihu.com/question/*

(function() {
'use strict';
const answersContainer=document.querySelector("#QuestionAnswers-answers .AnswersNavWrapper");
const callback = (mutationList, observer) => {
mutationList.forEach((mutation) => {
switch(mutation.type) {
case 'childList':
answersContainer.querySelectorAll(".List-item .RichText-MCNLinkCardContainer").forEach(card=>{
if(card?.offsetParent && card.offsetParent.hidden!=true){
card.offsetParent.hidden=true;
}
});
break;
}
});
};
const observer = new MutationObserver(callback);
observer.observe(answersContainer, { childList: true,subtree: true});
})();

你应该跟老板说：“ 别人家都卖 7 块钱，你家真便宜，不会有问题吧？” ，
认真端详一番，然后再撂一句：“ 先逛逛，完事儿过来买几个 ”。

@reallittoma #21 可以说说您的使用体验吗？想了解一下此技术的实际应用体验。