diff --git a/src/data/mapConfig.js b/src/data/mapConfig.js new file mode 100644 index 0000000..4cd6603 --- /dev/null +++ b/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' + } +}; diff --git a/src/utils/gis.js b/src/utils/gis.js index 91c35e5..59169cd 100644 --- a/src/utils/gis.js +++ b/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; diff --git a/src/views/capital/icon/yellow.png b/src/views/capital/icon/yellow.png new file mode 100644 index 0000000..f5f29b0 Binary files /dev/null and b/src/views/capital/icon/yellow.png differ diff --git a/src/views/capital/index.html b/src/views/capital/index.html index ff31c22..6d41470 100644 --- a/src/views/capital/index.html +++ b/src/views/capital/index.html @@ -1,4 +1,5 @@ -
+
+
diff --git a/src/views/capital/index.js b/src/views/capital/index.js index 2f99022..bb999c1 100644 --- a/src/views/capital/index.js +++ b/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的地址 diff --git a/src/views/capital/index.scss b/src/views/capital/index.scss index e69de29..11352e6 100644 --- a/src/views/capital/index.scss +++ b/src/views/capital/index.scss @@ -0,0 +1,8 @@ +.map { + border: 1px solid red; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} \ No newline at end of file