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

问题描述

我正在使用带有反应的 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,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,"rgba(255,"rgba(0,204,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,strokeThickness: 4
               });
               console.log(p)
               self.map.entities.push(p);
            })
            tools.showDrawingManager(function (manager) {
                manager.setoptions({
                    drawingBaractions: da.polygon | da.erase,fillColor: "rgba(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 Maps 中的形状是具有许多功能的类，并且不设计为作为 JSON 对象进行序列化/反序列化。反序列化时，将不存在任何功能，并且您会遇到上面报告的问题。一个简单的解决方案是将多边形实例转换为可序列化的 JSON 或字符串对象，例如 GeoJSON 或众所周知的文本。

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

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,255,0.2)",strokeColor: "#3300FF",strokeThickness: 4
   }});
   console.log(p)
   self.map.entities.push(p);
})

以下是一些现场示例：

https://www.bing.com/api/maps/sdk/mapcontrol/isdk/geojsonwritetogeojson

https://www.bing.com/api/maps/sdk/mapcontrol/isdk/geojsonreadobject

bing-maps javascript reactjs reactjs reactjs reactjs