添加地图比例尺,重写分页分页实体上图

src/views/remote/MapView.vue

@@ -28,7 +28,7 @@
           <span class="label"> {{ item.name }} </span>
         </div>
       </div>
-      <div class="ImageList ">
+      <div class="ImageList">
         <div
           :class="['item', item.imgName]"
           @click="shpBaseMap('mapCon2', item.index)"
@@ -70,6 +70,7 @@ import ImageStatic from "ol/source/ImageStatic";
 import Draw from "ol/interaction/Draw";
 import GeoJSON from "ol/format/GeoJSON";
 import { WMTS } from "ol/source";
+import { defaults as defaultControls, ScaleLine } from "ol/control";
 export default {
   props: {
     maptype: {
@@ -112,7 +113,6 @@ export default {
     shpBaseMap(container, base) {
       // this.changeBaseLayers("mapDiv", 2);
       this.changeBaseLayers(container, base);
-      console.log(1111);
     },
     createMap() {
       var view = new View({
@@ -166,7 +166,11 @@ export default {
       //     // attributions: ["ArcGIS", new Date().getFullYear()],
       //   }),
       // });
-
+      //实例化比例尺控件（ScaleLine）
+      var scaleLineControl = new ScaleLine({
+        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
+        units: "metric",
+      });
       var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
       // 矢量底图
       this.vecLayer = new Tile({
@@ -240,6 +244,10 @@ export default {
         // layers: [this.imgLayer,this.imgCiaLayer,],
         //地图视图设置
         view, //同一个view
+        controls: defaultControls({
+          //地图中默认控件
+          attribution: false, //地图数据源信息控件是否可收缩,默认为true
+        }).extend([scaleLineControl]), //加载鼠标位置控件
       });
       this.maps[target] = map;
       window.map = this.maps;

src/views/remote/farmland/index.vue

@@ -17,11 +17,12 @@
       <div class="jctbCon">
         <div class="tbTitle">
           <span>监测图斑{{ newObj.name }}</span>
-          
+
           <el-input
             placeholder="请输入监测编号查询"
             prefix-icon="el-icon-search"
             v-model="queryParams.jcbh"
+            @change="getList()"
           >
           </el-input>
           <el-button @click="handleDownload">下载</el-button>
@@ -145,7 +146,6 @@ export default {
     };
   },
   mounted() {
-    console.log(this.$route.query);
     // 绑定事件，编写回调函数
     this.$nextTick(() => {
       getPcsj(this.$route.query.id).then((response) => {
@@ -216,10 +216,6 @@ export default {
           }),
           style: function (feature) {
             return new Style({
-              // fill: new Fill({
-              //   //矢量图层填充颜色，以及透明度
-              //   color: "#f006",
-              // }),
               stroke: new Stroke({
                 //边界样式
                 color: "rgba(255, 0, 0, 1)",
@@ -238,6 +234,41 @@ export default {
         window.map["mapCon2"].addLayer(this.itemObj);
       }
     },
+    addGeoJson2(name) {
+      window.map[name].removeLayer(this.vectorLayer[name]);
+      this.tableData.forEach((titem, i) => {
+        if (titem.geom && titem.geom != "") {
+          if (typeof titem.geom === "string") {
+            // let geom = transform(this.tableData[i].geom);
+            let geom = this.tableData[i].geom;
+            titem.geom = parse(geom);
+          }
+          let features = new GeoJSON().readFeatures(titem.geom);
+
+          this.vectorLayer[name] = new VectorLayer({
+            source: new VectorSource({
+              features: features,
+            }),
+            style: function (feature) {
+              return new Style({
+                stroke: new Stroke({
+                  //边界样式
+                  color: "#1f1cd3",
+                  width: 2,
+                }),
+              });
+            },
+            zIndex: 9999,
+          });
+          window.map[name].addLayer(this.vectorLayer[name]);
+        }
+      });
+      let fullExtent = this.vectorLayer[name].getSource().getExtent();
+      window.map[name].getView().fit(fullExtent, {
+        duration: 3, //动画的持续时间,
+        callback: null,
+      });
+    },
 
     addGeoJson(name) {
       this.tableData.forEach((titem, i) => {