使用函数更改在打开图层中可见的图标颜色

Question

我尝试完成我将能够更改标记图标的颜色以在地图中可见。它们在地图上以不同的颜色出现。这些颜色对应于 json cat_id键。

1: "http://dev.openlayers.org/img/marker.png",
2: "http://dev.openlayers.org/img/marker-blue.png",
3: "http://dev.openlayers.org/img/marker-gold.png",
4: "http://dev.openlayers.org/img/marker-green.png",

地图中的每个标记图标都从脚本标记中数据 ID 中的 json 对象获取其位置、颜色和其他有价值的数据。我没有将这项工作的关闭部分与开放层库的接近部分编码。我写了脚本总数的以下部分：

var json = document.getElementById('data').innerHTML;
json = JSON.parse(json); // converts text into JSON
// search criteria (could be changed)
var $search_postal = "8912JB";
var $search_number = "10";
var $change_cat = 1;
function changeColor() {
for (var key in json) {
if (json.hasOwnProperty(key)) {
if (json[key].postal == $search_postal) {
if (json[key].number == $search_number) {
alert("Gonna change cat_id " + json[key].cat_id + " of the number search string " + $search_number + " of the postal search string " + $search_postal + " to cat_id " + $change_cat);
json[key].cat_id = "1";
alert('Changed!');
const posts = json; // the constant that is used to display the icons
var myJSON = json;
document.getElementById('demo').innerHTML = JSON.stringify(myJSON, undefined, 2); // changes of the json data to see on screen
}
}
}
}
}
const posts = json; //the constant that is used to display the icons
var myJSON = JSON.stringify(json);
document.getElementById('demo').innerHTML = myJSON;

此脚本将更改给定搜索输入的cat_id。在示例中，它搜索编号为 1 的邮政 8912JB。一旦它循环找到它的位置，它将cat_id值 3 更改为 1。换句话说，json 数据已更改。由于它存储在常量帖子中，因此我用更改的数据替换了这个缺点。我的问题是我无法使用更改的新 json 数据刷新地图中的标记图标(邮政 1JB 编号 10 的 cat_id：10(。这与对开放层和Javascript的了解较少有关。我已经为此苦苦挣扎了 2 周。谁能帮我完成这个任务？如果它从颜色改变是唯一需要的东西。我只需要对变量 $search_postal、$search_number 和 $change_cat 进行更改。

这是调试的页面：https://jsfiddle.net/j4z1vpht/4/

感谢您的任何帮助，

网 格

Answer 1

您需要将新类别更新为地图功能，如下所示：

const updateFeatureCategory = (featureId, categoryId) => {
const feature = marker_layer.getSource().getFeatureById(featureId);
const post = feature.get("post");
const updatedPost = {
...post,
cat_id: categoryId
}
feature.set("post", updatedPost);
}

function changeColor() {
...
json[key].cat_id = "1";
updateFeatureCategory(key, "1");
...
}

这是一个工作小提琴：https://jsfiddle.net/wsm2h3qz/1/