Javascript 如何从localstorage在bingmaps中添加多边形

我正在使用react使用bingmap api，我的计划是创建一个应用程序，用户将在localstorage中存储多边形，当用户访问该应用程序时，应通过从localstorge获取多边形详细信息在地图中渲染多边形，但我无法从localstorge渲染多边形。我收到一个奇怪的错误

本地存储

const lands = localStorage.getItem("lands")
const parsed = JSON.parse(lands)
//localStorage
parsed.forEach(function(e){
   var p = new self.Microsoft.Maps.Polygon(e["polygon"],{
    fillColor: "rgba(51,0,255,0.2)",
    strokeColor: "#3300FF",
    strokeThickness: 4
   });
   console.log(p)
   self.map.entities.push(p);
})

componentDidMount = () => {
    var self = this;
    this.loadBingApi("API_KEY").then(_ => {
        self.map = new this.Microsoft.Maps.Map(document.getElementById("map"));
        self.map.setView({
            mapTypeId: self.Microsoft.Maps.MapTypeId.aerial,
            center: self.map.getCenter(),
            zoom: 15
        });
        this.Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            var tools = new self.Microsoft.Maps.DrawingTools(self.map);
            var da = self.Microsoft.Maps.DrawingTools.DrawingBarAction;
            const fill = ["rgba(51,0,255,0.2)", "rgba(255,0,0,0.2)", "rgba(255,255,0,0.2)", "rgba(0,204,0,0.2)"]
            const stroke = ["#3300FF", "#FF0000", "#FFFF00", "#00CC00"]
            const lands = localStorage.getItem("lands")
            const parsed = JSON.parse(lands)
            //localStorage
            parsed.forEach(function(e){
               var p = new self.Microsoft.Maps.Polygon(e["polygon"],{
                fillColor: "rgba(51,0,255,0.2)",
                strokeColor: "#3300FF",
                strokeThickness: 4
               });
               console.log(p)
               self.map.entities.push(p);
            })
            tools.showDrawingManager(function (manager) {
                manager.setOptions({
                    drawingBarActions: da.polygon | da.erase,
                    fillColor: "rgba(255,255,255,0)",
                    strokeColor: "#FFF"
                });

                self.Microsoft.Maps.Events.addHandler(manager, 'drawingStarted', function () { console.log('Drawing started.'); });
                self.Microsoft.Maps.Events.addHandler(manager, 'drawingEnded', function (e) {
                    const index = Math.round(Math.random() * 3)
                    console.log(e.geometry)
                    self.setState({
                        polygon: e.geometry,
                        color: stroke[index],
                        fillColor: fill[index],
                        showModal: true
                    })


                });
                self.Microsoft.Maps.Events.addHandler(manager, 'drawingErased', function () { console.log('Drawing erased.'); });
            })
        })

    })
}

代码

const lands = localStorage.getItem("lands")
const parsed = JSON.parse(lands)
//localStorage
parsed.forEach(function(e){
   var p = new self.Microsoft.Maps.Polygon(e["polygon"],{
    fillColor: "rgba(51,0,255,0.2)",
    strokeColor: "#3300FF",
    strokeThickness: 4
   });
   console.log(p)
   self.map.entities.push(p);
})

componentDidMount = () => {
    var self = this;
    this.loadBingApi("API_KEY").then(_ => {
        self.map = new this.Microsoft.Maps.Map(document.getElementById("map"));
        self.map.setView({
            mapTypeId: self.Microsoft.Maps.MapTypeId.aerial,
            center: self.map.getCenter(),
            zoom: 15
        });
        this.Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            var tools = new self.Microsoft.Maps.DrawingTools(self.map);
            var da = self.Microsoft.Maps.DrawingTools.DrawingBarAction;
            const fill = ["rgba(51,0,255,0.2)", "rgba(255,0,0,0.2)", "rgba(255,255,0,0.2)", "rgba(0,204,0,0.2)"]
            const stroke = ["#3300FF", "#FF0000", "#FFFF00", "#00CC00"]
            const lands = localStorage.getItem("lands")
            const parsed = JSON.parse(lands)
            //localStorage
            parsed.forEach(function(e){
               var p = new self.Microsoft.Maps.Polygon(e["polygon"],{
                fillColor: "rgba(51,0,255,0.2)",
                strokeColor: "#3300FF",
                strokeThickness: 4
               });
               console.log(p)
               self.map.entities.push(p);
            })
            tools.showDrawingManager(function (manager) {
                manager.setOptions({
                    drawingBarActions: da.polygon | da.erase,
                    fillColor: "rgba(255,255,255,0)",
                    strokeColor: "#FFF"
                });

                self.Microsoft.Maps.Events.addHandler(manager, 'drawingStarted', function () { console.log('Drawing started.'); });
                self.Microsoft.Maps.Events.addHandler(manager, 'drawingEnded', function (e) {
                    const index = Math.round(Math.random() * 3)
                    console.log(e.geometry)
                    self.setState({
                        polygon: e.geometry,
                        color: stroke[index],
                        fillColor: fill[index],
                        showModal: true
                    })


                });
                self.Microsoft.Maps.Events.addHandler(manager, 'drawingErased', function () { console.log('Drawing erased.'); });
            })
        })

    })
}

错误

Uncaught (in promise) TypeError: o.crossesInternationalDateLine is not a function
    renderGroup https://www.bing.com/rb/3A/cj,nj/hjlBpG0-VvfbKA8YMoC4uh1cYV8.js?bu=BK8FpwaZBrQF:1
    render https://www.bing.com/rb/3A/cj,nj/hjlBpG0-VvfbKA8YMoC4uh1cYV8.js?bu=BK8FpwaZBrQF:1
    _renderVectorTemplates https://www.bing.com/rb/3A/cj,nj/uTdLXSRz12BwM8hu_cTZFExXTP8.js?bu=BK8F8AX3BbQF:1
    _renderPrimitives https://www.bing.com/rb/3A/cj,nj/uTdLXSRz12BwM8hu_cTZFExXTP8.js?bu=BK8F8AX3BbQF:1
    _renderInternal https://www.bing.com/rb/3A/cj,nj/uTdLXSRz12BwM8hu_cTZFExXTP8.js?bu=BK8F8AX3BbQF:1
    render https://www.bing.com/rb/3A/cj,nj/uTdLXSRz12BwM8hu_cTZFExXTP8.js?bu=BK8F8AX3BbQF:1
    _finishRenderVectorData https://www.bing.com/rb/3A/cj,nj/uTdLXSRz12BwM8hu_cTZFExXTP8.js?bu=BK8F8AX3BbQF:1
    _startRenderVectorData https://www.bing.com/rb/3A/cj,nj/uTdLXSRz12BwM8hu_cTZFExXTP8.js?bu=BK8F8AX3BbQF:1

---

看起来您正在序列化Microsoft.Maps.Polygon实例。Bing映射中的形状是一些类，这些类上有许多函数，它们的设计目的不是作为JSON对象进行序列化/反序列化。反序列化时，所有函数都不存在，您将遇到上面报告的问题。一个简单的解决方案是将多边形实例转换为可序列化的JSON或字符串对象，如GeoJSON或众所周知的文本

要使用GeoJSON执行此操作，请在应用程序启动时加载以下Bing地图模块之一

Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson');

然后，如果要将多边形转换为可序列化对象，请按如下方式“编写”：

self.setState({
    polygon: Microsoft.Maps.GeoJson.write(e),
    color: stroke[index],
    fillColor: fill[index],
    showModal: true
})

然后，当你去反序列化它，读它

const lands = localStorage.getItem("lands")
const parsed = JSON.parse(lands)
//localStorage
parsed.forEach(function(e){
   var p = Microsoft.Maps.GeoJson.read(e["polygon"],{ polygonOptions: {
    fillColor: "rgba(51,0,255,0.2)",
    strokeColor: "#3300FF",
    strokeThickness: 4
   }});
   console.log(p)
   self.map.entities.push(p);
})

以下是一些现场样品：

如果是关于，为什么要在上面加上标签？