Plot SharePoint 列出 Leaflet 上的数据 Z46F3EA056CAA3126B91F3F70BEEA06

Question

我有一个 SharePoint 列表，其中的位置列包含用逗号分隔的纬度和经度。 我正在尝试将 plot 这些点放在嵌入 Web 部件的 leaflet map 上，但没有成功。 我有我的 map 设置和渲染。 我可以插入我自己的 plot 点； 但是，我无法弄清楚如何将列表数据放入我的 leaflet map html 进行绘图。 我已阅读有关使用 REST 调用或检索信息并转换为 GeoJSON 但失败的信息。 我正在考虑让工作流在创建项目时生成 csv 文件以便使用，但宁愿直接将其从 SharePoint 列表中拉出。

我尝试将其合并到 leaflet html 中。

        function plotMap(){
$.ajax({ 
    url: "SITEURL/_api/Web/Lists/GetByTitle('Open Permits')/items", 
    type: "GET",
    headers: {"accept": "application/json;odata=verbose"},
    success: function(data){
        $.each(data.d.results, function(index, item){  
                  var mapMarker = "{icon:"some image url.replace";
                  var latlng = item. Location.split(",");
                  L.marker([latlng[0],latlng[1]],mapMarker).addTo(map).bindPopup(item.Equipment);
        });
    },
    error: function(error){
        alert(JSON.stringify(error));
    }
});
}

我猜一，我不知道我应该把它放在 map 文件的什么地方，二如果它是获取列表数据的正确方法。

Answer 1

您可以尝试先检索列表项，然后运行 function 到 plot 您的积分。

var items = [];

function getSP() {   
    var scriptBase = siteUrl + "/_layouts/15/";
    $.getScript(scriptBase + "MicrosoftAjax.js").then(function (data) {
        return $.getScript(scriptBase + "SP.Runtime.js");
    }).then(function (data) {
        return $.getScript(scriptBase + "SP.js");
    }).then(function (data) {
        retrieveListItems()
      });
}

function retrieveListItems() {
    var clientContext = new SP.ClientContext(siteUrl);
    console.log(clientContext)
    var oList = clientContext.get_web().get_lists().getByTitle('Open Permits');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><FieldRef Name=\'ID\'/>' +
        '<Value Type=\'Number\'>1</Value></Query></View>');
    this.collListItem = oList.getItems(camlQuery);    
    clientContext.load(collListItem);    
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function valueOrNone(oListItem, value) {
    try {
        finalValue = oListItem.get_item(value).get_lookupValue();
    } catch (err) {
        finalValue = '';
    }
    return finalValue;
}

function onQuerySucceeded(sender, args) {    
    var listItemEnumerator = collListItem.getEnumerator();
      
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();    
        var item = {};
        item['ID'] = oListItem.get_id();
        item['Equipment'] = valueOrNone(oListItem, 'Equipment');
        item['Location'] = valueOrNone(oListItem, 'Location');
        items.push(item)
    }
    
    console.log(items)
    plotMap()
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function plotMap() {      
 items.forEach(x => {
  var mapMarker = "{icon:"some image url.replace";
  var latlng = x.Location.split(","); 
  L.marker([latlng[0],latlng[1]],mapMarker).addTo(map).bindPopup(x.Equipment);
  });
}