mapboxgl根据GeoJSON点线面创建及定位操作
mapboxgl的开发很方便，图层创建、图层的要素更新、图层要素点击、要素信息框、定位到要素、地图鼠标样式等操作很多，总结了一些代码，共享给大家。
关键是：map.addSource、 map.addLayer、设置layer的paint、mapboxgl.Popup、map.fitBounds、map.flyTo、map.getCanvas().style.cursor、 map.getSource('geodataPolygon').setData
先创建一个mapboxgl的地图吧，代码如下：
var map, graphicLayer;
map = new mapboxgl.Map({
container: 'map',
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["https:///mt0.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}", "https:///mt1.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}", "https:///mt2.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}", "https:///mt3.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"],
"tileSize": 256,
},
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [104.064013, 30.54742],
zoom: 12.64
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
mapboxgl根据多类型的GeoJSON数据(含Point Polygon LineString)创建
//多类型的数据含Point Polygon LineString
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "天府三街"
},
"geometry": {
"type": "Point",
"coordinates": [104.06303023033792, 30.54675753000589]
}
},
{
"type": "Feature",
"properties": {
"name": "天府五街"
},
"geometry": {
"type": "Point",
"coordinates": [104.06056505865428, 30.537889923501893]
}
}
,
{
"type": "Feature",
"properties": {
"name": "银泰城"
},
"geometry": {
"coordinates": [[[104.05734538204854, 30.542126961366336], [104.05733923297134, 30.540628203046936], [104.06044451507631, 30.540659979072146], [104.06041991880102, 30.542142849135033], [104.05734538204854, 30.542126961366336]]],
"type": "Polygon"
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"properties": { "name": "天府大道" },
"coordinates": [
[104.06913702979529, 30.546739585129146],
[104.06907454389955, 30.54592791405807],
[104.06912588372228, 30.544417223111353],
[104.06914299695103, 30.542508560460377]
]
}
}
]
};
//多种类型的数据一起初始化
function initGeometryMutil() {
map.addSource('geodata', { type: 'geojson', data: geojson });
map.addLayer({
"id": "polygonlayer",
"type": "fill",
"source": "geodata",
"paint": {
"fill-color": "red",
"fill-opacity": 0.4
},
"filter": ["==", "$type", "Polygon"]
});
map.addLayer({
'id': 'pointlayer',
'type': 'circle',
'source': "geodata",
"filter": ["==", "$type", "Point"],
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
"circle-color": "#B42222"
}
});
map.addLayer({
'id': 'linelayer',
'type': 'line',
'source': "geodata",
"filter": ["==", "$type", "LineString"],
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#BF93E4",
"line-width": 5
}
});
}单独的点、线、面类型GeoJSON创建
var geojsonPoints = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "天府三街"
},
"geometry": {
"type": "Point",
"coordinates": [104.06303023033792, 30.54675753000589]
}
},
{
"type": "Feature",
"properties": {
"name": "天府五街"
},
"geometry": {
"type": "Point",
"coordinates": [104.06056505865428, 30.537889923501893]
}
}
]
};
var geojsonPolygon = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id":1,
"name": "银泰城"
},
"geometry": {
"coordinates": [[[104.05734538204854, 30.542126961366336], [104.05733923297134, 30.540628203046936], [104.06044451507631, 30.540659979072146], [104.06041991880102, 30.542142849135033], [104.05734538204854, 30.542126961366336]]],
"type": "Polygon"
}
}
]
};
var geojsonLine = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": 1,
"name": "天府大道"
},
"geometry": {
"type": "LineString",
"coordinates": [
[104.06913702979529, 30.546739585129146],
[104.06907454389955, 30.54592791405807],
[104.06912588372228, 30.544417223111353],
[104.06914299695103, 30.542508560460377]
]
}
}
]
};
//仅初始化点类型
function initPoints()
{
map.addSource('geodataPoint', { type: 'geojson', data: geojsonPoints });
map.addLayer({
'id': 'pointlayer',
'type': 'circle',
'source': "geodataPoint",
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
//'circle-radius':13,
"circle-color": "#B42222"
}
});
}
//仅初始化线类型
function initLines() {
map.addSource('geodataLine', { type: 'geojson', data: geojsonLine });
map.addLayer({
'id': 'linelayer',
'type': 'line',
'source': "geodataLine",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#BF93E4",
"line-width": 5
}
});
}
//仅初始化面类型
function initPolygon()
{
map.addSource('geodataPolygon', { type: 'geojson', data: geojsonPolygon });
map.addLayer({
"id": "polygonlayer",
"type": "fill",
"source": "geodataPolygon",
"paint": {
"fill-color": "red",
"fill-opacity": 0.4
}
});
}
点击线、面图层，显示信息框
// 点击 面 图层的符号，显示信息
map.on('click', 'polygonlayer', function (e) {
//map.flyTo({ center: e.features[0].geometry.coordinates });
//var boundingBox = getPolygonBoundingBox(e.features[0]);
//map.fitBounds(boundingBox, { padding: 200 });
var coordinates = e.lngLat;
var description = e.features[0].properties.id + "
" + e.features[0].properties.name;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}//防止数据越界
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
//点击 线 图层的符号，显示信息
map.on('click', 'linelayer', function (e) {
var coordinates = e.lngLat;
var description = e.features[0].properties.id + "
" + e.features[0].properties.name;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}//防止数据越界
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
定位到点、线、面
//定位到某一个面
document.getElementById("btnZoom2FirstPolygon").onclick = function () {
if (geojsonPolygon.features.length == 0) {
alert("已经没有多边形面Feature了，至少有一条才能定位");
return;
};
var boundingBox = getPolygonBoundingBox(geojsonPolygon.features[0]);
map.fitBounds(boundingBox, { padding: 200 });
};
//定位到某一条线
document.getElementById("btnZoom2FirstLine").onclick = function () {
if (geojsonLine.features.length == 0) {
alert("已经没有线Feature了，至少有一条才能定位");
return;
};
// Geographic coordinates of the LineString
var coordinates = geojsonLine.features[0].geometry.coordinates;
// Pass the first coordinates in the LineString to `lngLatBounds` &
// wrap each coordinate pair in `extend` to include them in the bounds
// result. A variation of this technique could be applied to zooming
// to the bounds of multiple Points or Polygon geomteries - it just
// requires wrapping all the coordinates with the extend method.
var bounds = coordinates.reduce(function (bounds, coord) {
return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, {
padding: 20
});
};
//定位到某一个点
document.getElementById("btnZoom2FirstPoint").onclick = function () {
if (geojsonPoints.features.length == 0) {
alert("已经没有线Feature了，至少有一点才能定位");
return;
};
// Geographic coordinates of the LineString
var coordinates = geojsonPoints.features[0].geometry.coordinates;
var xy = new mapboxgl.LngLat(coordinates[0], coordinates[1]);
map.flyTo({center:xy, zoom:16});
};
function getPolygonBoundingBox(feature) {
// bounds [xMin, yMin][xMax, yMax]
var bounds = [[], []];
var polygon;
var latitude;
var longitude;
for (var i = 0; i < feature.geometry.coordinates.length; i++) {
if (feature.geometry.coordinates.length === 1) {
// Polygon coordinates[0][nodes]
polygon = feature.geometry.coordinates[0];
} else {
// Polygon coordinates[poly][0][nodes]
polygon = feature.geometry.coordinates[i][0];
}
for (var j = 0; j < polygon.length; j++) {
longitude = polygon[j][0];
latitude = polygon[j][1];
bounds[0][0] = bounds[0][0] < longitude ? bounds[0][0] : longitude;
bounds[1][0] = bounds[1][0] > longitude ? bounds[1][0] : longitude;
bounds[0][1] = bounds[0][1] < latitude ? bounds[0][1] : latitude;
bounds[1][1] = bounds[1][1] > latitude ? bounds[1][1] : latitude;
}
}
return bounds;
}设置mapboxgl图层鼠标的样式
// Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
map.on('mouseenter', 'polygonlayer', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'polygonlayer', function () {
map.getCanvas().style.cursor = '';
});通过操作mapboxgl中GeoJSON的数据，更新Source来实现图层数据的新增、修改、删除
document.getElementById("btnAddData").onclick = function () {
geojsonPolygon.features.push(
{
"type": "Feature",
"properties": {
"id":2,
"name": "香年广场"
},
"geometry": {
"coordinates": [[[104.06580881154582, 30.545463011873835], [104.06579777330768, 30.54478171727888], [104.06711500077967, 30.544753197865305], [104.06711132135428, 30.54549153107891], [104.06580881154582, 30.545463011873835]]],
"type": "Polygon"
}
}
);
map.getSource('geodataPolygon').setData(
geojsonPolygon
);
};
document.getElementById("btnGetDataAndUpdate").onclick = function () {
for(var i=0; i