百度地图BMapGL加载geojson实现覆盖物,给出可用样例代码和相关geojson
时间: 2024-01-24 08:18:56 浏览: 267
以下是一个简单的示例代码,用于加载 geojson 文件并将其显示在 BMapGL 上:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BMapGL加载geojson实现覆盖物</title>
<style type="text/css">
#map{
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
<script src="https://api.map.baidu.com/library/GeoJSON/1.2/src/GeoJSON.min.js"></script>
<script>
// 创建地图实例
var map = new BMapGL.Map("map");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
// 加载 geojson 文件
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "百度大厦",
"type": "building"
},
"geometry": {
"type": "Point",
"coordinates": [116.307852, 40.056958]
}
},
{
"type": "Feature",
"properties": {
"name": "天安门",
"type": "landmark"
},
"geometry": {
"type": "Point",
"coordinates": [116.397477, 39.908692]
}
}
]
};
// 将 geojson 数据转换为 BMapGL 覆盖物
var geojsonLayer = new BMapGL.GeoJSON(geojson, {
style: function(feature) {
return {
fillColor: feature.properties.type === 'building' ? 'red' : 'blue',
strokeColor: 'black',
strokeWeight: 1,
fillOpacity: 0.5
}
}
});
// 将 BMapGL 覆盖物添加到地图中
map.addOverlay(geojsonLayer);
</script>
</body>
</html>
```
以上代码将加载一个包含两个点的 geojson 文件,并使用不同的颜色和样式来显示它们。你可以将这个示例代码复制到本地文件中,并在浏览器中打开它以查看效果。
以下是示例 geojson 数据:
```json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "百度大厦",
"type": "building"
},
"geometry": {
"type": "Point",
"coordinates": [116.307852, 40.056958]
}
},
{
"type": "Feature",
"properties": {
"name": "天安门",
"type": "landmark"
},
"geometry": {
"type": "Point",
"coordinates": [116.397477, 39.908692]
}
}
]
}
```
以上数据包含两个点,分别代表百度大厦和天安门。你可以将这个数据保存为一个 `.json` 文件,并在示例代码中加载它。
阅读全文