百度地图 geojson GeometryCollection

数据来源:geojson.io
在mapvgl加载层的时候,遇上了一个区域是分离状态的,导出后的类型值type=GeometryCollection,而这个百度地图是不支持的,需要将类型赋值为type=MultiPolygon,在geometry下创建属性赋值为数组类型,即geometry.coordinates=[],将geometry.geometries下面的coordinates遍历push到这个空数组geometry下面。

            if(geometry.type=="GeometryCollection"){
                feature.geometry.coordinates=[];
                feature.geometry.type="MultiPolygon";

                for(var indx in geometry.geometries){
                    feature.geometry.coordinates.push(geometry.geometries[indx].coordinates);
                }
            }

单区域结构:
在这里插入图片描述
多区域结构:
在这里插入图片描述
处理后结构:
在这里插入图片描述

百度地图支持 GeoJSON 数据格式。你可以通过以下步骤在百度地图中展示 GeoJSON 数据: 1. 将 GeoJSON 数据保存为一个 JSON 文件,例如 "data.json"。 2. 在 HTML 页面中引入百度地图的 JavaScript API: ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图AK"></script> ``` 将 "你的百度地图AK" 替换为你自己的百度地图 API Key。 3. 创建一个包含地图的 div 元素: ```html <div id="map"></div> ``` 4. 在 JavaScript 中使用百度地图 API 创建地图实例: ```javascript var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点和缩放级别 ``` 5. 加载 GeoJSON 数据并添加到地图上: ```javascript map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放 var url = "data.json"; // GeoJSON 数据文件的 URL $.getJSON(url, function(data) { // 使用 jQuery 的 getJSON 方法异步加载数据 var geojson = new BMapGeoJSON(data); // 创建 GeoJSON 对象 map.addOverlay(geojson); // 添加 GeoJSON 对象到地图上 }); ``` 上面的代码使用了 jQuery 的 getJSON 方法异步加载 GeoJSON 数据,并创建了一个 BMapGeoJSON 对象,然后将其添加到地图上。 6. 样式设置:你可以通过 BMapGeoJSON 对象的 setStyle 方法设置样式,例如设置线的颜色和宽度: ```javascript geojson.setStyle({ strokeColor: "blue", // 线颜色 strokeWeight: 5 // 线宽度 }); ``` 更多样式设置请参考百度地图 JavaScript API 文档。 以上就是在百度地图中展示 GeoJSON 数据的基本步骤,希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艳阳高照中最亮的星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值