地图渲染

src/data/mapConfig.js

@@ -0,0 +1,81 @@
+export default {
+  // 全国图层
+  china: {
+    extent: [73.446960449666, 5.000859278833502, 135.08270263661848, 53.55792617765189],
+    center: [11610512.95505, 3757698.6283],
+    chinaLayer: 'daping:china-province',
+    owsUrl: '/geoserver/daping/ows',
+    wmsUrl: '/geoserver/daping/wms'
+  },
+  // 洮北区
+  taoBei: {
+    extent: [13627351.035499997, 5676163.947099999, 13720947.290499996, 5750933.648900002],
+    layer: 'insure:taobei',
+    dkKey: 'DKBM',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 帮扶村
+  bangFuCun: {
+    extent: [13628031.40103715, 5685826.0930099115, 13711464.357543252, 5756042.221053436],
+    layer: 'insure:taobei_bangfucun',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 土地托管
+  tuDiTuoGuan: {
+    extent: [13629963.844899997, 5692229.631300002, 13710367.254700001, 5743577.974200004],
+    layer: 'insure:zhaobei_tudituoguan',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 金融
+  jinRong: {
+    extent: [13636390.6003, 5676224.538699999, 13718188.136700002, 5745958.782800003],
+    layer: 'insure:zhaobei_jinrong',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 投保地块
+  touBaoDiKuai: {
+    extent: [13677950.270999998, 5729110.567000002, 13683404.956099996, 5732920.926799999],
+    layer: 'insure:yongshengcun_toubaodikuai',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 作物分布
+  zuoWuFenBu: {
+    extent: [13677477.028300002, 5728997.501000002, 13685086.327899998, 5733606.293399999],
+    layer: 'insure:yongshengcun_zuowufenbu',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 玉米长势
+  yuMiZhangShi: {
+    extent: [13677469.3815, 5729084.4776, 13683876.4346, 5733618.5767],
+    layer: 'insure:YMZS3857',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 水稻长势
+  shuiDaoZhangShi: {
+    extent: [13679435.2114, 5729185.7968, 13685095.2366, 5732582.71],
+    layer: 'insure:SDZS3857',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 受灾情况
+  shouZaiQingKuang: {
+    extent: [13677477.011100002, 5729120.854099996, 13683877.916900001, 5733606.541699996],
+    layer: 'insure:yongsheng_shouzaiqingkuang',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  },
+  // 农机轨迹
+  nongJiGuiJi: {
+    extent: [13680214.11150057, 5730490.893397581, 13681036.724032091, 5731328.1572273625],
+    layer: 'insure:njgj3857',
+    owsUrl: '/geoserver/insure/ows',
+    wmsUrl: '/geoserver/insure/wms'
+  }
+};

src/utils/gis.js

@@ -23,6 +23,8 @@ import {
 } from 'ol/style';
 import { extend, createEmpty } from 'ol/extent';
 import VectorLayer from 'ol/layer/Vector';
+import Image from 'ol/layer/Image';
+import ImageWMS from 'ol/source/ImageWMS.js';
 import VectorSource from 'ol/source/Vector';
 import TileWMS from 'ol/source/TileWMS';
 import GeoJSON from 'ol/format/GeoJSON';
@@ -48,6 +50,7 @@ class GisUtils {
 
   constructor(domId) {
     this.getMap(domId)
+    this.initView()
     return this
   }
   /**
@@ -56,7 +59,7 @@ class GisUtils {
  */
   getMap (domId) {
     let view = new View({
-      projection: 'EPSG:4326'
+      projection: 'EPSG:3857'
     });
     PluggableMap.prototype.getEventPixel = function (event) {
       // eslint-disable-next-line no-underscore-dangle
@@ -129,6 +132,20 @@ class GisUtils {
     return layer;
   }
 
+  getVectorLayerByFs (features, zIndex = 1012) {
+    const vectorSource = new VectorSource({
+      features: features,
+    });
+    // 创建矢量图层
+    let layer = new VectorLayer({
+      zIndex,
+      source: vectorSource,
+      name: 'deptLayer'
+    });
+    this.map.addLayer(layer)
+    return layer
+  }
+
   addLayer (layer) {
     this.map.addLayer(layer);
   }
@@ -138,8 +155,54 @@ class GisUtils {
     return polygon;
   }
 
-  getFeature (polygon) {
-    return new Feature(polygon);
+  getFeature (info, icon) {
+    let feature = new Feature({
+      geometry: new Point(
+        fromLonLat([info.lng, info.lat])
+      ),
+      deptId: info.id,
+      deptName: info.label,
+      orgCode: info.orgCode,
+      lat: info.lat,
+      lng: info.lng,
+      deptLevel: info.deptLevel,
+      level: 'deptPoint',
+    })
+    feature.setStyle(this.createFeatureStyle(feature, icon));
+    return feature;
+  }
+
+  // 设置坐标点的样式
+  createFeatureStyle (feature, locationIcon) {
+    return new Style({
+      image: new Icon({
+        //设置图标偏移
+        anchor: [0.5, 1],
+        //标注样式的起点位置
+        anchorOrigin: "top-right",
+        //X方向单位：分数
+        anchorXUnits: "fraction",
+        //Y方向单位：像素
+        anchorYUnits: "pixels",
+        //偏移起点位置的方向
+        offsetOrigin: "top-right",
+        //透明度
+        opacity: 0.9,
+        // rotation: (Math.PI / 180) * 20,
+        //图片路径
+        src: locationIcon,
+      }),
+      text: new Text({
+        textAlign: "center", //位置
+        textBaseline: "bottom", //基准线
+        font: "normal 14px 微软雅黑", //文字样式
+        text: feature.get("deptName"), //文本内容
+        fill: new Fill({
+          //文本填充样式（即文字颜色)
+          color: "#ffff00",
+        }),
+      })
+    });
   }
 
   writeFeature (fs) {
@@ -242,18 +305,22 @@ class GisUtils {
    * @param {int} minZoom 最小缩放级别
    * @param {int} maxZoom 最大缩放级别
    */
-  getView (extent = [100, 100, 100, 100], zoom = 4, minZoom = 3, maxZoom = 18.4) {
+  initView (extent = [100, 100, 100, 100], zoom = 4, minZoom = 3, maxZoom = 18.4) {
     let view = new View({
       center: getCenterByExtent(extent),
       zoom,
       minZoom,
       maxZoom,
-      projection: 'EPSG:4326'
+      projection: 'EPSG:3857'
     });
     this.map.setView(view);
     return view;
   }
 
+  getView () {
+    return this.map.getView()
+  }
+
   /**
    * 获取WMS图层
    * @param {*} wmsurl wms路径
@@ -278,17 +345,48 @@ class GisUtils {
    * 获取天地图图层
    * @param {string} url 最小缩放级别
    */
-  tianDiTuLayer (url, visible = true) {
+  addTianDiTuLayer (visible = true) {
     let tianDitTu = new TileLayer({
       visible,
       source: new XYZ({
-        url
+        url: 'http://t{0-7}.tianditu.com/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067'
       })
     });
     this.map.addLayer(tianDitTu);
     return tianDitTu;
   }
 
+  /**
+   * 获取天地图图层
+   * @param {string} url 最小缩放级别
+   */
+  addAnnotationLayer (visible = true) {
+    let tianDitTu = new TileLayer({
+      visible,
+      source: new XYZ({
+        url: 'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067'
+      })
+    });
+    this.map.addLayer(tianDitTu);
+    return tianDitTu;
+  }
+
+  addImageLayer (mapGeoServerUrl, layerName, deptIds) {
+    let layer = new Image({
+      source: new ImageWMS({
+        url: mapGeoServerUrl + '/wms',
+        params: {
+          LAYERS: layerName,
+          cql_filter: "dept_id in (" + deptIds + ")",
+          SRID: 3857,
+        }
+      }),
+      name: 'countyBorderLayer'
+    });
+    this.map.addLayer(layer)
+    return layer
+  }
+
   /**
    * 获取wfs服务请求参数
    * @param {string} typename 请求的图层名
@@ -415,51 +513,6 @@ class GisUtils {
     return style;
   }
 
-  /**
-   *根据要素集合获得矢量图层
-   * @param {array} fs 要素集合
-   */
-  getVectorLayerByFs (fs, zIndex = 200, opacity = 1, strokeColor = [0, 180, 241, 1], fillColor = [0, 180, 241, 0.1]) {
-    let style = this.getStyle(strokeColor, fillColor);
-    let textName = ['mj', 'uuid'];
-    const source = new VectorSource({
-    });
-    if (fs.length) {
-      source.addFeatures(fs);
-    }
-    const layer = new VectorLayer({
-      renderMode: 'webgl',
-      style: style,
-      opacity,
-      style: (feature) => {
-        let arr = '';
-        textName.forEach(item => {
-          arr += feature.getProperties()[item] + '\n';
-        });
-        return new Style({
-          fill: new Fill({
-            color: fillColor
-          }),
-          text: new Text({
-            overflow: true,
-            text: arr,
-            font: 'bold 12px serif',
-            fill: new Fill({
-              color: '#ffffff'
-            })
-          }),
-          stroke: new Stroke({
-            color: strokeColor,
-            width: 1
-          })
-        });
-      },
-      source: source,
-      zIndex: zIndex
-    });
-    this.map.addLayer(layer);
-    return layer;
-  }
 
   changeTextName (arr, layerName) {
     this.textName[layerName] = arr;

src/views/capital/index.html

@@ -1,4 +1,5 @@
-<div class="page" id="map">
+<div class="page">
+  <div class="map" id="map"></div>
   <Header>
     <div slot="left">
       <Tabs @change="tabChange" :data="tabData"></Tabs>

src/views/capital/index.js

@@ -20,9 +20,14 @@ import { getConfigKey } from "@/api/system/config";
 import { getInfo } from "@/api/login";
 import { treeselect, treeselectByDeptId } from "@/api/system/dept";
 
-import GisUnitls from '@/utils/gis.js';
+import GisUtils from '@/utils/gis.js';
 
 import { comps } from './data.js'
+import {
+  fromLonLat
+} from 'ol/proj'
+
+let gis = null;
 export default {
   components: {
     Header,
@@ -53,6 +58,7 @@ export default {
           name: '预警分析'
         }
       ],
+      yellowIcon: require('./icon/yellow.png'),
       tab: '1',
       comps,
       map: "",                        // 地图
@@ -98,10 +104,63 @@ export default {
       } else {
         mapCenterLocation = [116.391461, 39.902359];
       }
+      gis = new GisUtils('map')
+      gis.addTianDiTuLayer()
+      gis.addAnnotationLayer()
+      if (dept.deptLevel === '5') {
+        // 登录身份为市级领导
+        this.userRole = 'cityLeader';
+        this.cityId = dept.id;
+        this.currentDeptLevel = '5';
+        // 添加区县边界
+        this.addCountyBorder(dept.children.map(item => item.id));
+      } else if (dept.deptLevel === '4') {
+        // 登录身份为县级领导
+        this.userRole = 'countyLeader';
+        this.countyId = dept.id;
+        this.currentDeptLevel = '4';
+        // 添加乡镇边界
+        this.addTownBorder(dept.children.map(item => item.id));
+        gis.getView().setZoom(11);
+        // this.villageIds = this.findLeafNodeIds(dept);
+      } else if (dept.deptLevel === '3') {
+        // 登录身份为镇级领导
+        this.userRole = 'townLeader';
+        this.townId = dept.id;
+        this.currentDeptLevel = '3';
+        // 添加村边界
+        this.addVillageBorder(dept.children.map(item => item.id));
+        this.map.getView().setZoom(13);
+        // this.villageIds = this.findLeafNodeIds(dept);
+      }
+      // 添加坐标点图层
+      if (dept.children) {
+        this.addDeptLayer(dept.children, 'yellow.png');
+      }
+
+      gis.getView().setCenter(fromLonLat(mapCenterLocation))
 
-      let gis = new GisUnitls('map')
+    },
+    // 添加坐标点图层
+    addDeptLayer (nextDeptSet) {
+      let features = [];
+      nextDeptSet.forEach(item => {
+        let fs = gis.getFeature(item, this.yellowIcon)
+        features.push(fs);
+      });
+      console.log(features, 88);
+      gis.getVectorLayerByFs(features)
+      gis.mapSetFit(features)
 
     },
+    // 添加区县边界
+    addCountyBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
+    },
+    // 添加乡镇边界
+    addTownBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
+    },
     // 获取geoserver的地址
     getGeoServerUrl () {
       // 获取geoserver的地址

src/views/capital/index.scss

@@ -0,0 +1,8 @@
+.map {
+  border: 1px solid red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}