1、绘制圆
// 绘制圆 drawCircle() { let that=this this.clearLayerAndSource(); //清除绘制 globalMap.getCanvas().style.cursor = "crosshair"; var isDrawing = true; globalMap.doubleClickZoom.disable(); var jsonCircle = { type: "FeatureCollection", features: [], }; var source = globalMap.getSource("circle"); if (!source) { globalMap.addSource("circle", { type: "geojson", data: jsonCircle, }); globalMap.addLayer({ id: "circle", type: "fill", source: "circle", layout: {}, paint: { "fill-color": "#28a7dd", "fill-opacity": 0.4, } }); globalMap.addLayer({ id: "line-circle", type: "line", source: "circle", "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "#188bff", "line-width": 6, "line-dasharray": [1, 2] } }); } var points = []; var isFirst = true; var firstCoords = []; globalMap.on("click", function (e) { if (isDrawing) { var coords = [e.lngLat.lng, e.lngLat.lat]; if (isFirst) { firstCoords = coords; isFirst = false; } points.push(coords); globalMap.getSource("circle").setData( createGeoJSONCircle(firstCoords, coords) ); } }); globalMap.on("mousemove", function (e) { if (isDrawing) { var moveCoords = [e.lngLat.lng, e.lngLat.lat]; if (firstCoords.length !== 0) { var centerCoords = [ (parseFloat(firstCoords[0]) + parseFloat(moveCoords[0])) / 2, (parseFloat(firstCoords[1]) + parseFloat(moveCoords[1])) / 2, ]; var lineCoords = [moveCoords]; lineCoords.unshift(firstCoords); var line = turf.lineString(lineCoords); var len = turf.length(line).toFixed(2); globalMap.getSource("circle").setData( createGeoJSONCircle(firstCoords, moveCoords, len) ); } } }); globalMap.on("dblclick", function () { if (isDrawing) { isDrawing = false; globalMap.getCanvas().style.cursor = ""; if (firstCoords.length !== 0) { var lineCoords = [points[points.length - 1]]; lineCoords.unshift(firstCoords); var line = turf.lineString(lineCoords); var len = turf.length(line).toFixed(2); globalMap.getSource("circle").setData( createGeoJSONCircle(firstCoords, points[points.length - 1], len) ); let pointArr = createGeoJSONCircle(firstCoords, points[points.length - 1], len) let geojson = { "type":"MultiPolygon", "coordinates":[pointArr.geometry.coordinates] } that.getQueryList(geojson,true) } } }); var createGeoJSONCircle = function (center, end, radius) { var circlePoints = 64; var ret = []; var coords = { latitude: center[1], longitude: center[0], }; var distanceX = radius / (111.32 * Math.cos((coords.latitude * Math.PI) / 180)); var distanceY = radius / 110.574; var theta, x, y; for (var i = 0; i < circlePoints; i++) { theta = (i / circlePoints) * (2 * Math.PI); x = distanceX * Math.cos(theta); y = distanceY * Math.sin(theta); ret.push([coords.longitude + x, coords.latitude + y]); } ret.push(ret[0]); return { type: "Feature", geometry: { type: "Polygon", coordinates: [ret], }, }; }; },
2、绘制面(多边形)
// 多边形 drawPolygon() { let that = this; this.clearLayerAndSource(); globalMap.getCanvas().style.cursor = "crosshair"; globalMap.doubleClickZoom.disable(); var isMeasure = true; var jsonPoint = { type: "FeatureCollection", features: [], }; var jsonLine = { type: "FeatureCollection", features: [], }; var points = []; var source = globalMap.getSource("points-area"); if (source) { globalMap.getSource("points-area").setData(jsonPoint); globalMap.getSource("line-area").setData(jsonLine); } else { globalMap.addSource("points-area", { type: "geojson", data: jsonPoint, }); globalMap.addSource("line-area", { type: "geojson", data: jsonLine, }); globalMap.addLayer({ id: "line-area", type: "fill", source: "line-area", paint: { "fill-color": "#28a7dd", "fill-opacity": 0.7, } }); globalMap.addLayer({ id: "line-area-stroke", type: "line", source: "line-area", // paint: { // "line-color": "#106eda", // "line-width": 2, // "line-opacity": 0.65, // }, "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "#188bff", "line-width": 6, "line-dasharray": [1, 2] } }); globalMap.addLayer({ id: "points-area", type: "circle", source: "points-area", paint: { "circle-color": "#188bff", "circle-radius": 2, "circle-stroke-width": 1, "circle-stroke-color": "#188bff", }, }); } function addPoint(coords) { jsonPoint.features.push({ type: "Feature", geometry: { type: "Point", coordinates: coords, }, }); globalMap.getSource("points-area").setData(jsonPoint); } globalMap.on("click", function(_e) { if (isMeasure) { var coords = [_e.lngLat.lng, _e.lngLat.lat]; points.push(coords); addPoint(coords); } }); globalMap.on("dblclick", function(_e) { if (isMeasure) { var coords = [_e.lngLat.lng, _e.lngLat.lat]; points.push(coords); points.pop(); points.pop(); isMeasure = false; globalMap.getCanvas().style.cursor = "grab"; let geojson = { "type":"MultiPolygon", "coordinates":[[points]] } that.getQueryList(geojson,true) } }); globalMap.on("mousemove", function(_e) { if (isMeasure) { var coords = [_e.lngLat.lng, _e.lngLat.lat]; var len = jsonPoint.features.length; if (len != 0 && len != 1) { var pts = points.concat([coords]); pts = pts.concat([points[0]]); var json = { type: "Feature", geometry: { type: "Polygon", coordinates: [pts], }, }; globalMap.getSource("line-area").setData(json); } } }); },
3、框选
// 框选 Rectangle() { let that = this; this.clearLayerAndSource(); globalMap.getCanvas().style.cursor = "crosshair"; globalMap.doubleClickZoom.disable(); var jsonPoint = { type: "FeatureCollection", features: [], }; let isDraw = true; var source = globalMap.getSource("rectangle"); if (source) { globalMap.getSource("rectangle").setData(jsonPoint); } else { globalMap.addSource("rectangle", { type: "geojson", data: jsonPoint, }); globalMap.addLayer({ id: "rectangle", type: "fill", source: "rectangle", paint: { "fill-color": "#28a7dd", "fill-opacity": 0.6, } }); globalMap.addLayer({ id: "line-rectangle", type: "line", source: "rectangle", "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "#188bff", "line-width": 6, "line-dasharray": [1, 2] } }); } let starCoords = []; let isMousemove = false; globalMap.on("click", function (_e) { if (isDraw) { starCoords = [_e.lngLat.lng, _e.lngLat.lat]; isMousemove = true; } }); let moveCoords = []; globalMap.on("mousemove", function (_e) { if (isDraw && isMousemove) { moveCoords = [_e.lngLat.lng, _e.lngLat.lat]; const rightTopCoords = [moveCoords[0], starCoords[1]]; const buttomLeftCoords = [starCoords[0], moveCoords[1]]; const coords = [starCoords, rightTopCoords, moveCoords, buttomLeftCoords]; jsonPoint.features = [{ type: "Feature", geometry: { type: "Polygon", coordinates: [coords], }, }]; globalMap.getSource("rectangle").setData(jsonPoint); } }); globalMap.on("dblclick", function (_e) { if (isDraw) { isMousemove = false; isDraw = false; globalMap.getCanvas().style.cursor = "grab"; const endCoords = [_e.lngLat.lng, _e.lngLat.lat]; const rightTopCoords = [endCoords[0], starCoords[1]]; const buttomLeftCoords = [starCoords[0], endCoords[1]]; const coords = [starCoords, rightTopCoords, endCoords, buttomLeftCoords]; jsonPoint.features.push({ type: "Feature", geometry: { type: "Polygon", coordinates: [coords], }, }); globalMap.getSource("rectangle").setData(jsonPoint); let geojson = { "type":"MultiPolygon", "coordinates":[jsonPoint.features[0].geometry.coordinates] } that.getQueryList(geojson,true) } }); },
效果图