@@ -825,6 +818,8 @@
},
mapTownList: null,
mapVillageList: null,
+ coordinate:"",
+ checked:[],
//地图使用 --end
};
},
@@ -1326,19 +1321,19 @@
style: styleYqr
});
map.addLayer(hc_land);
- var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
- var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
- var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
- var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
- //定位查询位置
- var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
- map.getView().animate({
- // 只设置需要的属性即可
- center: center, // 中心点
- zoom: 15.8, // 缩放级别
- rotation: undefined, // 缩放完成view视图旋转弧度
- duration: 1000, // 缩放持续时间，默认不需要设置
- });
+ // var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
+ // var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
+ // var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
+ // var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
+ // //定位查询位置
+ // var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
+ // map.getView().animate({
+ // // 只设置需要的属性即可
+ // center: center, // 中心点
+ // zoom: 15.8, // 缩放级别
+ // rotation: undefined, // 缩放完成view视图旋转弧度
+ // duration: 1000, // 缩放持续时间，默认不需要设置
+ // });
//自然幢定位开始 ---------start
getZrzZjdDmList(this.mapTheGeomZjdId[i].zjddm).then((response) => {
if (response.code == 200) {
@@ -1447,12 +1442,51 @@
}
//宅基地定位结束 ---------end
+
+ //地图操作定义------------start
+ //定位定义------------start
+ var Zb;
+ var latitude;
+ var longitude;
+ var vector_drawing;
+ //定位定义------------end
+
+ //绘图定义---------------start
+ var drawing;
+ var draw_map;
+ //绘图定义---------------end
+
+ //测面绘图定义------------start
+ var draw_cm;
+ //定义矢量图层
+ var vector;
+ //创建一个帮助提示信息对象
+ var helpTooltip;
+ //创建一个测量提示信息对象
+ var measureTooltip;
+ //创建一个帮助提示框对象
+ var helpTooltipElement;
+ //测出距离
+ var measureTooltipElement;
+ //测面绘图定义-----------end
+
+ //地图操作定义------------end
//定位当前位置 ------start
$("#dwMapAll").on("click", function () {
- var Zb;
- var latitude;
- var longitude;
- var vector_drawing;
+ console.log("进入定位图层")
+ //删除测量记录操作--------start
+ //将矢量图层从图中删除
+ //map.removeLayer(helpTooltip);
+ map.removeLayer(vector);
+ map.removeInteraction(draw_cm);
+ //map.removeOverlay(helpTooltipElement);
+ //map.removeLayer(measureTooltip);
+ //删除测量记录操作--------end
+ //删除绘制图层画图操作-------start
+ map.removeInteraction(draw_map);
+ map.removeLayer(drawing);
+ //删除绘制图层画图操作-------end
+
//开始定位当前位置
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;// 获取纬度
@@ -1515,12 +1549,21 @@
});
});
//定位当前位置 ------end
- var drawing;
- var draw;
+
//开始绘制图层- -----start
$("#htMapAll").on("click", function () {
- //that.closeMoule = null;
- map.removeInteraction(draw);
+ console.log("进入绘制图层")
+ //删除之前 测距操作添加map中的绘图 --------start
+ //map.removeLayer(helpTooltip);
+ map.removeLayer(vector);
+ map.removeInteraction(draw_cm);
+ //map.removeOverlay(helpTooltipElement);
+ map.removeLayer(measureTooltipElement);
+ //删除之前 测距操作添加map中的绘图 --------end
+
+ //删除之前画图图层,重新绘制图层
+ map.removeInteraction(draw_map);
+ map.removeLayer(drawing);
//var source = new ol.source.Vector({wrapX: false});
drawing = new ol.layer.Vector({
source: new ol.source.Vector(),
@@ -1528,22 +1571,318 @@
map.addLayer(drawing);
function addInteraction() {
- draw = new ol.interaction.Draw({
+ draw_map = new ol.interaction.Draw({
source: drawing.getSource(),
- type: "Polygon"
+ type: "Polygon",
});
- draw.on('drawend', function (evt) {
+ draw_map.on("drawend", function (evt) {
var feature = evt.feature;
var geometry = feature.getGeometry();
- var coordinate = geometry.getCoordinates();
- that.closeMoule = coordinate;
+ that.coordinate = geometry.getCoordinates();
+ //_this.coordinateList = coordinate.toString();
+ //提示当前坐标是否绘制完成
+ if(that.coordinate != "" && that.coordinate !=null) {
+ htMapAllFu();
+ }else {
+ console.log("6");
+ $("#htMapAll").trigger("click");
+ }
});
- map.addInteraction(draw);
+ map.addInteraction(draw_map);
}
+
+ function htMapAllFu() {
+ //that.drawMapPolygonFun();
+ //绘制多边形地图
+ that.$dialog
+ .confirm({
+ title: "提示",
+ message: "是否重新绘制画图",
+ })
+ .then(() => {
+ //$("#drawRemove").trigger("click");
+ map.removeLayer(drawing);
+ that.coordinate = "";
+ })
+ .catch(() => {
+ //删除画图点
+ map.removeInteraction(draw_map);
+ });
+ }
+
addInteraction();
});
//开始绘制图层- -----end
+ //清除画图鼠标点击事件
+ // $("#drawRemove").click(function () {
+ // map.removeLayer(drawing);
+ // });
+ //
+
+ //获取类型开始 侧面-----------------------------------------------------------------start
+ $("#area").click(function () {
+ console.log("进入测面")
+ //删除绘制图层画图操作-------start
+ map.removeInteraction(draw_map);
+ map.removeLayer(drawing);
+ //删除绘制图层画图操作-------end
+ //开始绘制 测面--------------------------------------------------------------start
+ //定义矢量数据源
+ var source = new ol.source.Vector();
+
+ vector = new ol.layer.Vector({
+ source: source,
+ style: new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: "rgba(255,255,255,0.2)",
+ }),
+ stroke: new ol.style.Stroke({
+ color: "#e21e0a",
+ width: 2,
+ }),
+ //image: new ol.style.Circle({
+ // radius: 7,
+ // fill: new ol.style.Fill({
+ // color:'#ffcc33'
+ // })
+ //})
+ }),
+ });
+
+ //将矢量图层添加到地图中 线的颜色加入map中
+ map.addLayer(vector);
+
+ var sketch;
+
+ var continuePolygonMsg = "单击以继续绘制多边形";
+
+ /**
+ * Message to show when the user is drawing a line.
+ * @type {string}
+ */
+ //var continueLineMsg = '单击继续绘制直线';
+
+ //鼠标移动触发的函数
+ var pointerMoveHandler = function (evt) {
+ //Indicates if the map is currently being dragged.
+ //Only set for POINTERDRAG and POINTERMOVE events. Default is false.
+ //如果是平移地图则直接结束
+ if (evt.dragging) {
+ return;
+ }
+ //帮助提示信息
+ var helpMsg = "单击开始绘图";
+
+ if (sketch) {
+ //Get the feature's default geometry.
+ //A feature may have any number of named geometries.
+ //获取绘图对象的几何要素
+ var geom = sketch.getGeometry();
+ //如果当前绘制的几何要素是多边形，则将绘制提示信息设置为多边形绘制提示信息
+ //如果当前绘制的几何要素是多线段，则将绘制提示信息设置为多线段绘制提示信息
+ helpMsg = continuePolygonMsg;
+ }
+ //设置帮助提示要素的内标签为帮助提示信息
+ helpTooltipElement.innerHTML = helpMsg;
+ //设置帮助提示信息的位置
+ //The coordinate in view projection corresponding to the original browser event.
+ helpTooltip.setPosition(evt.coordinate);
+ //移除帮助提示要素的隐藏样式
+ $(helpTooltipElement).removeClass("hidden");
+ };
+
+ map.on("pointermove", pointerMoveHandler);
+
+ map.getViewport().addEventListener("mouseout", function () {
+ helpTooltipElement.classList.add("hidden");
+ });
+
+ //添加交互式绘图对象的函数
+ function addInteraction() {
+ // 获取当前选择的绘制类型
+ //var type = typeSelect.value == 'length' ? 'Polygon' : 'LineString';
+ //创建一个交互式绘图对象
+ var type = "Polygon";
+ draw_cm = new ol.interaction.Draw({
+ //绘制的数据源
+ source: source,
+ //绘制类型
+ type: type,
+ //样式
+ style: new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: "rgba(255,255,255,0.2)",
+ }),
+ stroke: new ol.style.Stroke({
+ color: "rgba(0,0,0,0.5)",
+ lineDash: [10, 10],
+ width: 2,
+ }),
+ // image: new ol.style.Circle({
+ // radius: 5,
+ // stroke: new ol.style.Stroke({
+ // color:'rgba(0,0,0,0.7)'
+ // }),
+ // fill: new ol.style.Fill({
+ //color: 'rgba(255,255,255,0.2)'
+ // })
+ //})
+ }),
+ });
+ //将交互绘图对象添加到地图中
+ map.addInteraction(draw_cm);
+
+ //创建测量提示框
+ createMeasureTooltip();
+ //创建帮助提示框
+ createHelpTooltip();
+
+ //定义一个事件监听
+ var listener;
+ //定义一个控制鼠标点击次数的变量
+ var count = 0;
+ //绘制开始事件
+ draw_cm.on(
+ "drawstart",
+ function (evt) {
+ //The feature being drawn.
+ sketch = evt.feature;
+ //提示框的坐标
+ var tooltipCoord = evt.coordinate;
+ //监听几何要素的change事件
+ //Increases the revision counter and dispatches a 'change' event.
+
+ listener = sketch.getGeometry().on("change", function (evt) {
+ //The event target.
+ //获取绘制的几何对象
+ var geom = evt.target;
+ //定义一个输出对象，用于记录面积和长度
+ var output;
+ map.removeEventListener("singleclick");
+ map.removeEventListener("dblclick");
+ //输出多边形的面积
+ output = formatArea(geom);
+ //Return an interior point of the polygon.
+ //获取多变形内部点的坐标
+ tooltipCoord = geom.getInteriorPoint().getCoordinates();
+
+ //设置测量提示框的内标签为最终输出结果
+ measureTooltipElement.innerHTML = output;
+ //设置测量提示信息的位置坐标
+ measureTooltip.setPosition(tooltipCoord);
+ });
+
+ //地图单击事件
+ map.on("singleclick", function (evt) {
+ //设置测量提示信息的位置坐标，用来确定鼠标点击后测量提示框的位置
+ measureTooltip.setPosition(evt.coordinate);
+ //如果是第一次点击，则设置测量提示框的文本内容为起点
+ if (count == 0) {
+ measureTooltipElement.innerHTML = "起点";
+ }
+ //根据鼠标点击位置生成一个点
+ var point = new ol.geom.Point(evt.coordinate);
+ //将该点要素添加到矢量数据源中
+ source.addFeature(new ol.Feature(point));
+ //更改测量提示框的样式，使测量提示框可见
+ measureTooltipElement.className = "tooltip tooltip-static";
+ //创建测量提示框
+ createMeasureTooltip();
+ //点击次数增加
+ count++;
+ });
+
+ //地图双击事件
+ map.on("dblclick", function (evt) {
+ //根据
+ var point = new ol.geom.Point(evt.coordinate);
+ source.addFeature(new ol.Feature(point));
+ });
+ },
+ this
+ );
+ //绘制结束事件
+ draw_cm.on(
+ "drawend",
+ function (evt) {
+ count = 0;
+ //设置测量提示框的样式
+ measureTooltipElement.className = "tooltip tooltip-static";
+ //Set the offset for this overlay.
+ //设置偏移量
+ measureTooltip.setOffset([0, -7]);
+ //清空绘制要素
+ sketch = null;
+ //清空测量提示要素
+ measureTooltipElement = null;
+ //创建测量提示框
+ createMeasureTooltip();
+ //Removes an event listener using the key returned by on() or once().
+ //移除事件监听
+ ol.Observable.unByKey(listener);
+ //移除地图单击事件
+ map.removeEventListener("singleclick");
+ },
+ this
+ );
+ }
+ /**
+ * Creates a new help tooltip
+ */
+ function createHelpTooltip() {
+ if (helpTooltipElement) {
+ helpTooltipElement.parentNode.removeChild(helpTooltipElement);
+ }
+ helpTooltipElement = document.createElement("div");
+ helpTooltipElement.className = "ol-tooltip hidden";
+ helpTooltip = new ol.Overlay({
+ element: helpTooltipElement,
+ offset: [15, 0],
+ positioning: "center-left",
+ });
+ map.addOverlay(helpTooltip);
+ }
+
+ /**
+ * Creates a new measure tooltip
+ */
+ function createMeasureTooltip() {
+ if (measureTooltipElement) {
+ measureTooltipElement.parentNode.removeChild(measureTooltipElement);
+ }
+ measureTooltipElement = document.createElement("div");
+ measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
+ measureTooltip = new ol.Overlay({
+ element: measureTooltipElement,
+ offset: [0, -15],
+ positioning: "bottom-center",
+ });
+ map.addOverlay(measureTooltip);
+ }
+
+ //格式化测量面积
+ var formatArea = function (polygon) {
+ //定义面积变量
+ var area;
+ //获取平面面积
+ area = polygon.getArea();
+ //定义输出变量
+ var output;
+ //当面积大于10000时，转换为平方千米，否则为平方米
+ if (area > 10000) {
+ output =
+ Math.round((area / 1000000) * 100) / 100 + " " + "km2";
+ } else {
+ output = Math.round(area * 100) / 100 + " " + "m2";
+ }
+ return output;
+ };
+
+ addInteraction();
+ });
+ //侧面结束-----------------------------------------------------------------end
+
//点击查询详细信息
map.on("singleclick", function (evt) {
let feature = map.forEachFeatureAtPixel(
@@ -1551,7 +1890,7 @@
(feature) => feature
);
if(feature) {
- document.getElementById("info").innerHTML = "";
+ //document.getElementById("info").innerHTML = "";
that.mapHaDataValue = true;
var ifConsole = feature.values_.createBy;
if (ifConsole =="mapTheGeomFsssId") {
@@ -1879,6 +2218,7 @@
}
});
that.mapZjdData = obj;
+ that.zjdHcDy = obj.zjddm;
} else {
that.mapHaDataValue = false;
}
@@ -1959,31 +2299,7 @@
},
//绘制多边形地图
drawMapPolygonFun() {
- let drawMapPolygon = this.draw.drawMapPolygon;
- if (drawMapPolygon == false) {
- if (this.coordinateList == "") {
- this.$set(this.draw, "drawMapPolygon", true);
- $("#drawPolygon").trigger("click");
- } else {
- this.$dialog
- .confirm({
- title: "提示",
- message: "是否重新绘制画图",
- })
- .then(() => {
- // on confirm
- this.coordinateList = "";
- this.$set(this.draw, "drawMapPolygon", true);
- $("#drawPolygon").trigger("click");
- })
- .catch(() => {
- // on cancel
- });
- }
- } else {
- $("#drawRemove").trigger("click");
- this.$set(this.draw, "drawMapPolygon", false);
- }
+
},
guidProduct(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -1992,27 +2308,57 @@
return v.toString(16);
});
},
+ //宅基地点击地图核查
+ zjdHc(){
+ //console.log(this.zjdHcDy);
+ if(this.zjdHcDy != ""){
+ this.$router.push('/homesteadSurvey/add');
+ } else {
+ this.$dialog.alert({
+ title: '宅基地核查',
+ message: "请从地图选择宅基地并点击核查",
+ theme: 'round-button',
+ }).then(() => {
+ // on close
+ });
+ }
+ },
}
}
-
+ 
+ 
+ 
+ 
+