地图优化

src/views/homesteadSurvey/list.vue

@@ -12,19 +12,21 @@
           <p style="color:#fff">{{item.deptName}}</p>
         </template>
       </van-nav-bar>
-      <div style="display:flex;width:90%;margin:0 auto;">
-        <div :class="{activeBtn : activeBtn==1,disactiveBtn :activeBtn!=1 }" @click="activeBtn=1"><van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn1'+(activeBtn!=1?'1':'')+'.png')" />
-          入户核查
-        </div>
-        <div :class="{activeBtn : activeBtn==2,disactiveBtn :activeBtn!=2 }" @click="activeBtn=2,getNh()"><van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn2'+(activeBtn!=2?'2':'')+'.png')" />
-          农户信息
-        </div>
-        <div :class="{activeBtn : activeBtn==3,disactiveBtn :activeBtn!=3 }" @click="activeBtn=3,getSyqr()"> <van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn3'+(activeBtn!=3?'3':'')+'.png')" />
-          所有权人
-        </div>
-        <div :class="{activeBtn : activeBtn==4,disactiveBtn :activeBtn!=4 }"  @click="activeBtn=4,mapShow()">
-          <van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn4'+(activeBtn!=4?'4':'')+'.png')" />
-          切换地图
+      <div style="display:flex;width:94%;margin:0 auto;justify-content:space-between;padding: 10px 0">
+        <div style="display:flex;width:90%;margin:0 auto;">
+          <div :class="{activeBtn : activeBtn==1,disactiveBtn :activeBtn!=1 }" @click="activeBtn=1"><van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn1'+(activeBtn!=1?'1':'')+'.png')" />
+            入户核查
+          </div>
+          <div :class="{activeBtn : activeBtn==2,disactiveBtn :activeBtn!=2 }" @click="activeBtn=2,getNh()"><van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn2'+(activeBtn!=2?'2':'')+'.png')" />
+            农户信息
+          </div>
+          <div :class="{activeBtn : activeBtn==3,disactiveBtn :activeBtn!=3 }" @click="activeBtn=3,getSyqr()"> <van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn3'+(activeBtn!=3?'3':'')+'.png')" />
+            所有权人
+          </div>
+          <div :class="{activeBtn : activeBtn==4,disactiveBtn :activeBtn!=4 }"  @click="activeBtn=4,mapShow()">
+            <van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn4'+(activeBtn!=4?'4':'')+'.png')" />
+            切换地图
+          </div>
         </div>
       </div>
     </div>
@@ -367,18 +369,34 @@
       </van-form>
     </div>
     <div v-if="activeBtn==4">
-        <div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
+      <div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
       <!--图层-->
       <div class="rightZoom_wrap">
+        <img src="../../assets/images/housesteadSurvey/tool1.png">
         <div class="amplification" @click="selectionPushMap">图层</div>
       </div>
       <!--放大缩小-->
       <div class="mapZoom_wrap">
-        <div class="qtMap" @click="">全图</div>
-        <div class="clMap" @click="">测量</div>
-        <div class="hcMap" @click="">核查</div>
-        <div class="htMap" @click="" id="htMapAll">绘图</div>
-        <div class="dwMap" @click="" id="dwMapAll">定位</div>
+        <div class="qtMap" @click="">
+          <img src="../../assets/images/housesteadSurvey/tool2.png">
+          <p>全图</p>
+        </div>
+        <div class="clMap" @click="" id="area">
+          <img src="../../assets/images/housesteadSurvey/tool3.png">
+          <p>测量</p>
+        </div>
+        <div class="hcMap" @click="zjdHc">
+          <img src="../../assets/images/housesteadSurvey/tool4.png">
+          <p>核查</p>
+        </div>
+        <div class="htMap" @click="" id="htMapAll">
+          <img src="../../assets/images/housesteadSurvey/tool5.png">
+          <p>绘图</p>
+        </div>
+        <div class="dwMap" @click="" id="dwMapAll">
+          <img src="../../assets/images/housesteadSurvey/tool6.png">
+          <p>定位</p>
+        </div>
       </div>
 
       <!--列表拉取详情-->
@@ -388,20 +406,42 @@
             <div class="more_icon" @click="homesteadListShrink"></div>
             <div class="name">筛选列表</div>
           </div>
-          <div class="noInfo_data">
-            <div class="checkbox">
-              <!-- 全选与不全选模块 -->
-              <div class="thead-checkbox" @click="checkClick">
-                <input type="checkbox" class="checkall">全选
-              </div>
-              <!-- 小复选框选 -->
-              <div class="item-list-checkbox">
-                <div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>
-                <div class="item-checkbox"  @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>
-                <div class="item-checkbox"  @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>
-              </div>
-            </div>
+
+          <div style="padding: 10px 15px;">
+            <van-checkbox name="all" shape="square">全选</van-checkbox>
+            <div style="height: 15px;"></div>
+            <van-checkbox-group v-model="checked">
+              <van-checkbox name="a" shape="square" style="margin-bottom: 5px;">
+                <template #default>
+                  附属设施<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
+                </template>
+              </van-checkbox>
+              <van-checkbox name="b" shape="square" style="margin-bottom: 5px;">
+                <template #default>
+                  自<i style="margin-right: 0.5em;"></i>然<i style="margin-right: 0.5em;"></i>幢<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
+                </template>
+              </van-checkbox>
+              <van-checkbox name="b" shape="square" style="margin-bottom: 5px;">
+                <template #default>
+                  宅<i style="margin-right: 0.5em;"></i>基<i style="margin-right: 0.5em;"></i>地<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
+                </template>
+              </van-checkbox>
+            </van-checkbox-group>
           </div>
+          <!--          <div class="noInfo_data">-->
+          <!--            <div class="checkbox">-->
+          <!--              &lt;!&ndash; 全选与不全选模块 &ndash;&gt;-->
+          <!--              <div class="thead-checkbox" @click="checkClick">-->
+          <!--                <input type="checkbox" class="checkall">全选-->
+          <!--              </div>-->
+          <!--              &lt;!&ndash; 小复选框选 &ndash;&gt;-->
+          <!--              <div class="item-list-checkbox">-->
+          <!--                <div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>-->
+          <!--                <div class="item-checkbox"  @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>-->
+          <!--                <div class="item-checkbox"  @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>-->
+          <!--              </div>-->
+          <!--            </div>-->
+          <!--          </div>-->
         </div>
       </div>
       <!--      &lt;!&ndash;列表 定位&ndash;&gt;-->
@@ -415,53 +455,6 @@
       <!--        </div>-->
       <!--      </div>-->
       <van-overlay :show="selectionIconShow" @click="homesteadListShrink" />
-      <!--图层-->
-      <div class="rightZoom_wrap">
-        <div class="amplification" @click="selectionPushMap">图层</div>
-      </div>
-      <!--放大缩小-->
-      <div class="mapZoom_wrap">
-        <div class="qtMap" @click="">全图</div>
-        <div class="clMap" @click="">测量</div>
-        <div class="hcMap" @click="">核查</div>
-        <div class="htMap" @click="" id="htMapAll">绘图</div>
-        <div class="dwMap" @click="" id="dwMapAll">定位</div>
-      </div>
-
-      <!--列表拉取详情-->
-      <div class="homesteadList_wrap" v-show="homesteadListStatus">
-        <div class="main_m">
-          <div class="title_m">
-            <div class="more_icon" @click="homesteadListShrink"></div>
-            <div class="name">筛选列表</div>
-          </div>
-          <div class="noInfo_data">
-            <div class="checkbox">
-              <!-- 全选与不全选模块 -->
-              <div class="thead-checkbox" @click="checkClick">
-                <input type="checkbox" class="checkall">全选
-              </div>
-              <!-- 小复选框选 -->
-              <div class="item-list-checkbox">
-                <div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>
-                <div class="item-checkbox"  @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>
-                <div class="item-checkbox"  @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-<!--      &lt;!&ndash;列表 定位&ndash;&gt;-->
-<!--      <div class="rightIcon_wrap">-->
-<!--        &lt;!&ndash; <div class="positioning_wrap">-->
-<!--          <div class="icon"></div>-->
-<!--        </div> &ndash;&gt;-->
-<!--        <div class="selectionIcon_wrap" @click="selectionPush">-->
-<!--          <div class="icon"></div>-->
-<!--          <div class="text">列表</div>-->
-<!--        </div>-->
-<!--      </div>-->
-      <van-overlay :show="selectionIconShow" @click="homesteadListShrink" />
     </div>
     <van-popup v-model="shownh" style="height:100%;width:100%;">
       <div class="bannerBg">
@@ -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 + " " + "km<sup>2</sup>";
+              } else {
+                output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
+              }
+              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
+            });
+          }
+        },
       }
     }
 </script>
 
-<style  scoped lang="scss">
+<style scoped lang="scss">
 
   .bannerBg{
     width: 100%;
     color:#fff;
-    padding:10px;
+    /*padding:10px;*/
     background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
-
   }
   .van-hairline--bottom::after {
     border-bottom-width: 0;
   }
   .activeBtn{
-    flex:1;background:#fff;height:50px;border-radius:25px;margin:10px;color:#7AC943;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
+    background:#fff;
+    height:50px;
+    border-radius:25px;
+    color:#7AC943;
+    line-height:50px;
+    text-align:center;
+    font-size:20px;
+    width: 24%;
+    box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
   }
   .disactiveBtn{
-    flex:1;background:rgba(255,255,255,.4);height:50px;border-radius:25px;margin:10px;color:#fff;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
+    background:rgba(255,255,255,.4);
+    height:50px;
+    border-radius:25px;
+    color:#fff;
+    line-height:50px;
+    text-align:center;
+    font-size:20px;
+    width: 24%;
+    box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
   }
   .van-cell__label{
     color: #969799;
@@ -2034,74 +2380,71 @@
   }
   .rightZoom_wrap {
     position: absolute;
-    right: 16px;
+    right: 3%;
     top: 35%;
-    width: 66px;
     margin-top: -200px;
     background: #fff;
     margin-bottom: 16px;
     border-radius: 10px;
-    height: 60px;
-    .amplification {
-      height: 50px;
-      width: 74px;
+    text-align: center;
+    padding: 15px 20px;
+    img{
+      margin: 0 auto;
     }
     .amplification {
-      background: url("../../assets/images/housesteadSurvey/tool1.png") center center no-repeat;
+      line-height: 1;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      margin-top: 5px;
     }
   }
   .mapZoom_wrap {
     position: absolute;
-    right: 16px;
+    right: 3%;
     top: 50%;
-    width: 66px;
     margin-top: -200px;
     background: #fff;
     margin-bottom: 16px;
     border-radius: 10px;
-    height: 300px;
-
-    .qtMap {
-      height: 50px;
-      width: 74px;
+    padding: 0px 20px;
+    div{
+      padding: 15px 0;
+      border-bottom: 1px solid #C9C9C9;
+      &:last-child{
+        border: none;
+      }
+      p{
+        margin-top: 5px;
+      }
     }
-
     .qtMap {
-      background: url("../../assets/images/housesteadSurvey/tool2.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .clMap {
-      background: url("../../assets/images/housesteadSurvey/tool3.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .hcMap {
-      background: url("../../assets/images/housesteadSurvey/tool4.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .htMap {
-      background: url("../../assets/images/housesteadSurvey/tool5.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .dwMap {
-      background: url("../../assets/images/housesteadSurvey/tool6.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
   }
   .rightIcon_wrap {