leaflet 繪製 點 線 面 圓 橢圓 線緩衝區
阿新 • • 發佈:2020-08-01
leaflet有個繪圖外掛Leaflet.draw,但是我不想要它的控制元件,只想用它的繪製功能,控制元件我自己提供,當時不知道如何使用,就自己寫了個繪製點線面圓和橢圓的工具,程式碼如下:
/// <reference path="define.js" /> /// <reference path="icon.js" /> /// <reference path="map.js" /> /// <reference path="../dist/l.ellipse.js" /> /// <reference path="../dist/turf.js" /> /// <reference path="../libs/layer/layer.js" />View Code/** * 繪圖 */ var drawUtil = (function () { //圖層 var _drawLayer; //繪圖型別 1:多邊形 2:畫線 3:畫矩形 4:畫橢圓 5選擇位置 6畫圓 var _drawType; //是否允許mousemove事件 var _allowMouseMove = true; //多邊形點集合 var _polygonPointArr = []; //多邊形 var _polygon; //線的點集合 var _polylinePointArr = [];//線 var _polyline; //線克隆 var _polylineClone; //防止繪圖結束線被清空不能繪製線緩衝區 //畫矩形時mousedown點選的那個點 var _rectangleInitPoint; //矩形點集合 var _rectanglePointArr = []; //矩形 var _rectangle; //畫橢圓時mousedown點選的那個點 var _ellipseInitPoint; //橢圓點集合 var _ellipsePointArr = []; //橢圓var _ellipse; //畫圓時mousedown點選的那個點 var _circleInitPoint; //圓點集合 var _circlePointArr = []; //圓 var _circle; //線緩衝區點集合 var _polylineBufferPointArr = []; //緩衝區 var _polylineBuffer; //位置marker var _locationMarker; //地圖層級改變 var _mapZoomChanged = false; //是否移動了地圖 var _isMapMoved = false; //是否按下滑鼠 var _isMouseDown = false; //結束繪圖回撥 var _endDrawCallback; //地圖中心 var _mapCenter; //線條顏色 var _strokeColr = "#f84400"; //填充顏色 var _fillColor = "#f84400"; //用於繪圖的div層 var _drawPane; //用於繪圖的div層 var _drawPaneBelow; /** * 開始繪圖 * @param [int] type 繪圖型別 1:多邊形 2:畫線 3:畫矩形 4:畫橢圓 5選擇位置 6畫圓 */ var _startDraw = function (type) { _stopDraw(); _drawType = type; _mapCenter = map.getCenter(); map.addEventListener("mousedown", _mousedown); map.addEventListener("mousemove", _mousemove); map.addEventListener("mouseup", _mouseup); map.addEventListener("dblclick", _dblclick); map.addEventListener("zoom", _zoom); map.addEventListener("movestart", _movestart); map.addEventListener("moveend", _moveend); map.addEventListener("move", _move); }; //結束繪圖 var _endDraw = function (e) { if (_drawType == 3 || _drawType == 4 || _drawType == 6) { //結束畫矩形、橢圓 map.dragging.enable(); } if (_drawType == 2) { //畫線 if (jsObjExists()) jsObj.DrawEnd(_drawType); } _polylineClone = _polyline; if (_drawType == 1 && _endDrawCallback) _endDrawCallback(_polygon); if (_drawType == 2 && _endDrawCallback) _endDrawCallback(_polyline); if (_drawType == 3 && _endDrawCallback) _endDrawCallback(_rectangle); if (_drawType == 4 && _endDrawCallback) _endDrawCallback(_ellipsePointArr); if (_drawType == 6 && _endDrawCallback) _endDrawCallback(_circlePointArr); _polygonPointArr = []; _polygon = undefined; _polylinePointArr = []; _polyline = undefined; _rectanglePointArr = []; _rectangleInitPoint = undefined; _rectangle = undefined; _ellipsePointArr = []; _ellipseInitPoint = undefined; _ellipse = undefined; _circlePointArr = []; _circleInitPoint = undefined; _circle = undefined; _polylineBufferPointArr = []; _polylineBuffer = undefined; } //結束繪圖回撥 var _registerEndDrawCallback = function (fun) { _endDrawCallback = fun; } //map mousedown var _mousedown = function (e) { if (!_drawType) return; _allowMouseMove = false; _isMouseDown = true; _mapCenter = map.getCenter(); if (_drawType == 3 || _drawType == 4 || _drawType == 6) { //畫矩形和橢圓時不能移動地圖 map.dragging.disable(); _allowMouseMove = true; if (e.originalEvent.button == 0) { //左鍵 if (_drawType == 3 || _drawType == 4 || _drawType == 6) { _mousedownDraw(e); } } } } //map mousemove var _mousemove = function (e) { if (!_drawType) return; if (_allowMouseMove) { setTimeout(function () { _realTimeDraw(e); //實時繪圖 }, 1); } } //map mouseup var _mouseup = function (e) { if (!_drawType) return; _isMouseDown = false; if (e.originalEvent.button == 2) { //右鍵 _endDraw(e); //結束繪圖 } if (e.originalEvent.button == 0) { //左鍵 _mapZoomChanged = false; var center = map.getCenter(); if (_drawType == 1 || _drawType == 2) { if (_mapCenter.lng == center.lng && _mapCenter.lat == center.lat) { _mouseupDraw(e); } } if (_drawType == 3 || _drawType == 4 || _drawType == 6) { _endDraw(e); //結束繪圖 } if (_drawType == 5) { if (_mapCenter.lng == center.lng && _mapCenter.lat == center.lat) { _mouseupDraw(e); if (_endDrawCallback) _endDrawCallback(e.latlng.lat, e.latlng.lng); } } } setTimeout(function () { _allowMouseMove = true; }, 100); } //map dblclick var _dblclick = function (e) { if (!_drawType) return; setTimeout(function () { _endDraw(undefined); }, 1); } //map zoom var _zoom = function (e) { if (!_drawType) return; _mapZoomChanged = true; } //map movestart var _movestart = function (e) { if (!_drawType) return; _isMapMoved = true; } //map moveend var _moveend = function (e) { if (!_drawType) return; _isMapMoved = false; } //map move var _move = function (e) { if (!_drawType) return; } //實時繪圖 var _realTimeDraw = function (e) { //實時畫多邊形 if (_drawType == 1 && _polygonPointArr.length > 0) { if (_polygon != null) { _drawLayer.removeLayer(_polygon); } if (_polygonPointArr.length > 1) _polygonPointArr.pop(); var point = [e.latlng.lat, e.latlng.lng]; _polygonPointArr.push(point); _polygon = L.polygon(_polygonPointArr, { stroke: true, color: _strokeColr, weight: 2, fill: true, fillColor: _fillColor, fillOpacity: 0.5, pane: _drawPaneBelow }); _drawLayer.addLayer(_polygon); } //實時畫線 if (_drawType == 2 && _polylinePointArr.length > 0) { if (_polyline != null) { _drawLayer.removeLayer(_polyline); } if (_polylinePointArr.length > 1) _polylinePointArr.pop(); var point = [e.latlng.lat, e.latlng.lng]; _polylinePointArr.push(point); _polyline = L.polyline(_polylinePointArr, { stroke: true, color: _strokeColr, weight: 2, pane: _drawPane }); _drawLayer.addLayer(_polyline); } //實時畫矩形 if (_drawType == 3 && _rectangleInitPoint) { if (_rectangle != null) { _drawLayer.removeLayer(_rectangle); } if (_rectanglePointArr.length > 1) _rectanglePointArr.pop(); var point = [e.latlng.lat, e.latlng.lng]; _rectanglePointArr.push(point); _rectangle = L.rectangle(_rectanglePointArr, { stroke: true, color: _strokeColr, weight: 2, fill: true, fillColor: _fillColor, pane: _drawPaneBelow }); _drawLayer.addLayer(_rectangle); } //實時畫橢圓 if (_drawType == 4 && _ellipseInitPoint) { if (_ellipse != null) { _drawLayer.removeLayer(_ellipse); } var point = [e.latlng.lat, e.latlng.lng]; if (_ellipsePointArr.length > 1) _ellipsePointArr.pop(); _ellipsePointArr[0][0] = _ellipseInitPoint[0] + (point[0] - _ellipseInitPoint[0]) / 2.0; _ellipsePointArr[0][1] = _ellipseInitPoint[1] + (point[1] - _ellipseInitPoint[1]) / 2.0; var from = turf.point([_ellipsePointArr[0][1], _ellipsePointArr[0][0]]); var to1 = turf.point([point[1], _ellipsePointArr[0][0]]); var to2 = turf.point([_ellipsePointArr[0][1], point[0]]); var options = { units: 'meters' }; var distance1 = turf.distance(from, to1, options); var distance2 = turf.distance(from, to2, options); var radius = [distance2, distance1]; _ellipsePointArr.push(point); _ellipse = L.ellipse(_ellipsePointArr[0], radius, 90, { stroke: true, weight: 2, color: _strokeColr, fill: true, fillColor: _fillColor, pane: _drawPaneBelow }); _drawLayer.addLayer(_ellipse); } //實時畫圓 if (_drawType == 6 && _circleInitPoint) { if (_circle != null) { _drawLayer.removeLayer(_circle); } var point = [e.latlng.lat, e.latlng.lng]; if (_circlePointArr.length > 1) _circlePointArr.pop(); var d = Math.pow(Math.pow(point[0] - _circleInitPoint[0], 2) + Math.pow(point[1] - _circleInitPoint[1], 2), 0.5); point[0] = _circleInitPoint[0] - d; point[1] = _circleInitPoint[1] + d; var from = turf.point([_circlePointArr[0][1], _circlePointArr[0][0]]); var to1 = turf.point([point[1], _circlePointArr[0][0]]); var to2 = turf.point([_circlePointArr[0][1], point[0]]); var options = { units: 'meters' }; var distance1 = turf.distance(from, to1, options); var distance2 = turf.distance(from, to2, options); var radius = [distance2, distance1]; _circlePointArr.push(point); _circle = L.ellipse(_circlePointArr[0], radius, 90, { stroke: true, weight: 2, color: _strokeColr, fill: true, fillColor: _fillColor, pane: _drawPaneBelow }); _drawLayer.addLayer(_circle); } } //停止繪圖 var _stopDraw = function () { map.removeEventListener("mousedown", _mousedown); map.removeEventListener("mousemove", _mousemove); map.removeEventListener("mouseup", _mouseup); map.removeEventListener("dblclick", _dblclick); map.removeEventListener("zoom", _zoom); map.removeEventListener("movestart", _movestart); map.removeEventListener("moveend", _moveend); map.removeEventListener("move", _move); _polygonPointArr = []; _polygon = undefined; _polylinePointArr = []; _polyline = undefined; _rectanglePointArr = []; _rectangleInitPoint = undefined; _rectangle = undefined; _ellipsePointArr = []; _ellipseInitPoint = undefined; _ellipse = undefined; _circlePointArr = []; _circleInitPoint = undefined; _circle = undefined; _polylineBufferPointArr = []; _polylineBuffer = undefined; map.dragging.enable(); isPointSelect = false; //清除點選 _drawType = undefined; //清除繪圖 }; //清空繪圖 var _clearDraw = function () { _drawLayer.clearLayers(); _locationMarker = null; }; //點選繪圖 var _mousedownDraw = function (e) { setTimeout(function () { //使用setTimeout map的dblclick才會觸發 //畫矩形 if (_drawType == 3) { if (_rectangle != null) { _drawLayer.removeLayer(_rectangle); } _rectangleInitPoint = [e.latlng.lat, e.latlng.lng]; _rectanglePointArr.push([e.latlng.lat, e.latlng.lng]); } //畫橢圓 if (_drawType == 4) { if (_ellipse != null) { _drawLayer.removeLayer(_ellipse); } _ellipseInitPoint = [e.latlng.lat, e.latlng.lng]; _ellipsePointArr.push([e.latlng.lat, e.latlng.lng]); } //畫圓 if (_drawType == 6) { if (_circle != null) { _drawLayer.removeLayer(_circle); } _circleInitPoint = [e.latlng.lat, e.latlng.lng]; _circlePointArr.push([e.latlng.lat, e.latlng.lng]); } }, 1); } //點選繪圖 var _mouseupDraw = function (e) { setTimeout(function () { //使用setTimeout map的dblclick才會觸發 //畫多邊形 if (_drawType == 1) { if (_polygon != null) { _drawLayer.removeLayer(_polygon); } var point = [e.latlng.lat, e.latlng.lng]; _polygonPointArr.push(point); _polygon = L.polygon(_polygonPointArr, { stroke: true, color: _strokeColr, weight: 2, fill: true, fillColor: _fillColor, fillOpacity: 0.5, pane: _drawPaneBelow }); _drawLayer.addLayer(_polygon); } //畫線 if (_drawType == 2) { if (_polyline != null) { _drawLayer.removeLayer(_polyline); } var point = [e.latlng.lat, e.latlng.lng]; _polylinePointArr.push(point); _polyline = L.polyline(_polylinePointArr, { stroke: true, color: _strokeColr, weight: 2, pane: _drawPane }); _drawLayer.addLayer(_polyline); } //選擇位置 if (_drawType == 5) { if (_locationMarker != null) { _drawLayer.removeLayer(_locationMarker); } var latlng = new L.LatLng(rectifyLat(e.latlng.lat), rectifyLng(e.latlng.lng)); _locationMarker = new L.Marker(latlng, {}); _locationMarker.setIcon(iconPrision); _drawLayer.addLayer(_locationMarker); } }, 1); } //map的moveend事件中繪圖 var _moveendDraw = function (e) { if (!_drawType) return; } //顯示緩衝區 var _showBuffer = function showBuffer(polyline, bufferValue) { var pointArr = []; var latlngs = polyline.getLatLngs(); for (var i = 0; i < latlngs.length; i++) { pointArr.push([latlngs[i].lng, latlngs[i].lat]); } var line = turf.lineString(pointArr); var buffered = turf.buffer(line, 0.001 * bufferValue, { units: 'kilometers', steps: 64 }); //線左右兩邊各50米緩衝區,緩衝區寬共100米 _polylineBufferPointArr = processCoord(buffered.geometry.coordinates); _polylineBuffer = L.polygon(_polylineBufferPointArr, { stroke: true, color: _strokeColr, weight: 2, fill: true, fillColor: _fillColor, fillOpacity: 0.5, pane: _drawPaneBelow }); drawLayer.addLayer(_polylineBuffer); }; return { //配置 config: function (drawLayer, drawPane, drawPaneBelow) { _drawLayer = drawLayer; _drawPane = drawPane; _drawPaneBelow = drawPaneBelow; }, //開始繪圖 startDraw: _startDraw, //停止繪圖 stopDraw: _stopDraw, //清空繪圖 clearDraw: _clearDraw, //顯示線緩衝區 showBuffer: _showBuffer, //線 getPolyline: function () { return _polylineClone; }, //線緩衝區 getPolylineBuffer: function () { return _polylineBuffer; }, //註冊繪圖結束回撥 registerEndDrawCallback: _registerEndDrawCallback, //繪製的線的點集合 getPolylinePointArr: function () { return _polylinePointArr; }, //繪製的多邊形點集合 getPolygonPointArr: function () { return _polygonPointArr; }, //繪製的矩形點集合 getRectanglePointArr: function () { return _rectanglePointArr; }, //設定已選擇的位置座標 setSelectedLocation: function (lng, lat) { if (_locationMarker != null) { _drawLayer.removeLayer(_locationMarker); } var latlng = new L.LatLng(rectifyLat(lat), rectifyLng(lng)); _locationMarker = new L.Marker(latlng, {}); _locationMarker.setIcon(iconPrision); _drawLayer.addLayer(_locationMarker); } }; })(); drawUtil.config(drawLayer, drawPane, drawPaneBelow);
使用該工具的程式碼:
裝置點位選擇:
/// <reference path="define.js" /> /// <reference path="icon.js" /> /// <reference path="map.js" /> /// <reference path="draw.js" /> /// <reference path="marker.js" /> /// <reference path="../dist/l.ellipse.js" /> /// <reference path="../dist/turf.js" /> /** * 選擇marker drawType 1:多邊形 2:畫線 3:畫矩形 4:畫橢圓 */ //選擇完成回撥 var selectComplateCallback = null; var selectLocationComplateCallback = null; //選擇 function selectMarkers(dataIds) { var dataIdArr = dataIds.split(','); for (var i = 0; i < dataIdArr.length; i++) { var dataId = dataIdArr[i]; selectMarker(dataId); } if (dataIdArr.length > 0) { zoomToBounds(selectedMarkerArr); } } //選擇 function selectMarker(dataId) { for (var i = 0; i < markerArr.length; i++) { var marker = markerArr[i]; if (marker.options.id == dataId) { if (!markerExists(selectedMarkerArr, marker)) { setMarkerIcon(marker, true); selectedMarkerArr.push(marker); } } } } //marker在集合中是否存在 function markerExists(arr, marker) { var exists = false; for (var m = 0; m < arr.length; m++) { if (arr[m].options.id == marker.options.id) { exists = true; } } return exists; } //清空相機選擇 function clearSelect() { for (var i = 0; i < selectedMarkerArr.length; i++) { setMarkerIcon(selectedMarkerArr[i], false); selectedMarkerArr[i].setZIndexOffset(0); } selectedMarkerArr = []; sectorLayer.clearLayers(); map.closePopup(); } //Marker去重 function removeRepeatMarkers() { for (var i = 0; i < selectedMarkerArr.length - 1; i++) { for (j = selectedMarkerArr.length - 1; j > i; j--) { if (selectedMarkerArr[i].options.id == selectedMarkerArr[j].options.id) { selectedMarkerArr.splice(j, 1); } } } } //線緩衝區選擇 function polylineBufferSelect(bufferValue) { drawUtil.showBuffer(drawUtil.getPolyline(), bufferValue); selectedMarkerArr = selectedMarkerArr.concat(selectByPolygon(markerArr, drawUtil.getPolylineBuffer())); removeRepeatMarkers();//去重 var idArr = []; for (var i = 0; i < selectedMarkerArr.length; i++) { var marker = selectedMarkerArr[i]; idArr.push(marker.options.id); } drawUtil.stopDraw(); if (selectComplateCallback) selectComplateCallback(idArr); if (jsObjExists()) jsObj.AddSelectedByDraw(idArr.join(",")); } //多邊形選擇 function polygonSelect() { drawUtil.startDraw(1); drawUtil.registerEndDrawCallback(function (d) { drawUtil.stopDraw(); if (!d) return; if (d.getLatLngs()[0].length > 2) { selectedMarkerArr = selectedMarkerArr.concat(selectByPolygon(markerArr, d)); removeRepeatMarkers();//像機去重 var idArr = []; for (var i = 0; i < selectedMarkerArr.length; i++) { var marker = selectedMarkerArr[i]; idArr.push(marker.options.id); } if (selectComplateCallback) selectComplateCallback(idArr); if (jsObjExists()) jsObj.AddSelectedByDraw(idArr.join(",")); } }); } //框選 function boxSelect() { drawUtil.startDraw(3); drawUtil.registerEndDrawCallback(function (d) { drawUtil.stopDraw(); if (!d) return; if (d.getLatLngs()[0].length > 3) { selectedMarkerArr = selectedMarkerArr.concat(selectByPolygon(markerArr, d)); removeRepeatMarkers();//像機去重 var idArr = []; for (var i = 0; i < selectedMarkerArr.length; i++) { var marker = selectedMarkerArr[i]; idArr.push(marker.options.id); } if (selectComplateCallback) selectComplateCallback(idArr); if (jsObjExists()) jsObj.AddSelectedByDraw(idArr.join(",")); } }); } //橢圓選擇 function ellipseSelect() { drawUtil.startDraw(4); drawUtil.registerEndDrawCallback(function (d) { drawUtil.stopDraw(); if (!d) return; if (d.length > 1) { selectedMarkerArr = selectedMarkerArr.concat(selectByEllipse(markerArr, d)); removeRepeatMarkers();//像機去重 var idArr = []; for (var i = 0; i < selectedMarkerArr.length; i++) { var marker = selectedMarkerArr[i]; idArr.push(marker.options.id); } if (selectComplateCallback) selectComplateCallback(idArr); if (jsObjExists()) jsObj.AddSelectedByDraw(idArr.join(",")); } }); } //圓選 function circleSelect() { drawUtil.startDraw(6); drawUtil.registerEndDrawCallback(function (d) { drawUtil.stopDraw(); if (!d) return; if (d.length > 1) { selectedMarkerArr = selectedMarkerArr.concat(selectByEllipse(markerArr, d)); removeRepeatMarkers();//像機去重 var idArr = []; for (var i = 0; i < selectedMarkerArr.length; i++) { var marker = selectedMarkerArr[i]; idArr.push(marker.options.id); } if (selectComplateCallback) selectComplateCallback(idArr); if (jsObjExists()) jsObj.AddSelectedByDraw(idArr.join(",")); } }); } //線選 function lineSelect() { drawUtil.startDraw(2); drawUtil.registerEndDrawCallback(function (line) { if (line) { var popup = layer.open({ type: 0, btn: ['確定', '取消'], title: '請輸入緩衝區半徑', content: '<div style="margin:0 auto; width:120px;"><input id="radius" type="text" value="2" style="padding:5px; width:120px; font-size:16px;" onkeyup="this.value=this.value.replace(/[^0-9]/g,\'\')" /></div>', yes: function (index, layero) { var val = $(layero).find("#radius").val(); var reg = /^[1-9][0-9]{0,2}$/; if (!reg.test(val)) { alert("請輸入3位以內的整數"); return; } polylineBufferSelect(val); layer.close(popup); }, btn2: function () { drawUtil.stopDraw(); }, cancel: function () { drawUtil.stopDraw(); } }); } }); } //點選 function pointSelect() { isPointSelect = true; } //選擇位置 function selectLocation() { drawUtil.startDraw(5); drawUtil.registerEndDrawCallback(function (lat, lng) { if (selectLocationComplateCallback) selectLocationComplateCallback(lat, lng); }); } //多邊形選擇 function selectByPolygon(markerArr, polygon) { drawType = null; var selectedMarkerArr = []; var poly = turf.polygon(polygon.toGeoJSON(8).geometry.coordinates); for (var i = 0; i < markerArr.length; i++) { var marker = markerArr[i]; var point = turf.point(marker.toGeoJSON(8).geometry.coordinates); if (turf.booleanPointInPolygon(point, poly)) { setMarkerIcon(marker, true); selectedMarkerArr.push(marker); } } return selectedMarkerArr; } //矩形選擇 function selectByRectangle(markerArr, rectangle) { drawType = null; var selectedMarkerArr = []; var poly = turf.polygon(rectangle.toGeoJSON(8).geometry.coordinates); for (var i = 0; i < markerArr.length; i++) { var marker = markerArr[i]; var point = turf.point(marker.toGeoJSON(8).geometry.coordinates); if (turf.booleanPointInPolygon(point, poly)) { if (layerIndex == 0) { setCameraMarkerIcon(marker, true); } else { setMarkerIcon(marker, true); } selectedMarkerArr.push(marker); } } return selectedMarkerArr; } //橢圓選擇 function selectByEllipse(markerArr, ellipsePointArr) { drawType = null; var selectedMarkerArr = []; for (var i = 0; i < markerArr.length; i++) { var marker = markerArr[i]; var point = { x: marker.getLatLng().lng, y: marker.getLatLng().lat }; if (isPointInEllipse(point, ellipsePointArr)) { setMarkerIcon(marker, true); selectedMarkerArr.push(marker); } } return selectedMarkerArr; }View Code
距離面積測量:
/// <reference path="define.js" /> /// <reference path="icon.js" /> /// <reference path="map.js" /> /// <reference path="draw.js" /> /// <reference path="../libs/layer/layer.js" /> /** * 量算 */ //距離量算 function measureDistance() { drawUtil.startDraw(2); drawUtil.registerEndDrawCallback(function (d) { drawUtil.stopDraw(); if (!d) return; var pointArr = []; d.getLatLngs().map(item=> { pointArr.push([item.lng, item.lat]); }); if (pointArr.length > 1) { var line = turf.lineString(pointArr); var length = turf.length(line, { units: 'kilometers' }); if (length < 1) { layer.alert((length * 1000).toFixed(2) + "米", { title: "長度" }); } else { layer.alert(length.toFixed(5) + "公里", { title: "長度" }); } } }); } //面積量算 function measureArea() { drawUtil.startDraw(1); drawUtil.registerEndDrawCallback(function (d) { drawUtil.stopDraw(); if (!d) return; var pointArr = []; d.getLatLngs()[0].map(item=> { pointArr.push([item.lng, item.lat]); }); if (pointArr.length > 0) { pointArr.push(pointArr[0]); } if (pointArr.length > 3) { var line = turf.lineString(pointArr); var polygon = turf.lineToPolygon(line); var unkinkPolygon = turf.unkinkPolygon(polygon); var area = turf.area(unkinkPolygon); if (area < 1000000) { layer.alert(area.toFixed(4) + "平方米", { title: "面積" }); } else { layer.alert((area / 1000000.0).toFixed(6) + "平方公里", { title: "面積" }); } } }); }View Code