diff --git a/src/router/index.js b/src/router/index.js index 686cf93f..51d5f076 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -224,7 +224,11 @@ router.beforeEach((to, from, next) => { // }); window.SITE_CONFIG["menuShujuList"] = [ { - icon: "icon-setting", + url: "/visual/plugin/power/organization", + name: "组织架构", + id: "5feawfwaefwa577", + }, + { id: "22213213", name: "基础信息", // url: "visual/basicinfo/basicInfoMain", @@ -259,11 +263,6 @@ router.beforeEach((to, from, next) => { name: "社区党建", // url: "visual/basicinfo/basicInfoMain", children: [ - { - url: "/visual/plugin/power/organization", - name: "组织架构", - id: "5feawfwaefwa577", - }, { url: "/visual/communityParty/party", name: "党员信息统计", diff --git a/src/views/modules/visual/plugin/power/components/geojson.js b/src/views/modules/visual/plugin/power/components/geojson.js deleted file mode 100644 index 8386f087..00000000 --- a/src/views/modules/visual/plugin/power/components/geojson.js +++ /dev/null @@ -1,69 +0,0 @@ -export function getPolygonGeoJSON () { - return { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'Polygon', - coordinates: [ - [ - [120.34641692835909, 36.089631138388036], - [120.3610683961656, 36.07743361100231], - [120.41981862563858, 36.094178143435734], - [120.40240403504704, 36.11798699226542], - [120.34534806364974, 36.11752870787426], - [120.34191095693906, 36.117070430475906], - [120.34641692835909, 36.089631138388036] - ] - ] - } - } - ] - } -} -export function getGridGeoJSON () { - return { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - name: '第一网格', - index: 0 - }, - geometry: { - type: 'Polygon', - coordinates: [ - [ - [120.36042111463216, 36.123630243850776], - [120.37646657270601, 36.11574122696447], - [120.36427923644065, 36.105102846593255], - [120.34074589793231, 36.10363201293648], - [120.36042111463216, 36.123630243850776] - ] - ] - } - }, - { - type: 'Feature', - properties: { - name: '第二网格', - index: 1 - }, - geometry: { - type: 'Polygon', - coordinates: [ - [ - [120.35623852355958, 36.0892643916626], - [120.37271801574708, 36.0903801906128], - [120.36894146545411, 36.08102464556885], - [120.35795513732911, 36.07767724871827], - [120.35623852355958, 36.0892643916626] - ] - ] - } - } - ] - } -} \ No newline at end of file diff --git a/src/views/modules/visual/plugin/power/components/house-dialog.vue b/src/views/modules/visual/plugin/power/components/house-dialog.vue new file mode 100644 index 00000000..c95bea2a --- /dev/null +++ b/src/views/modules/visual/plugin/power/components/house-dialog.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/views/modules/visual/plugin/power/components/info-dialog.vue b/src/views/modules/visual/plugin/power/components/info-dialog.vue index 95bd7250..eff5c941 100644 --- a/src/views/modules/visual/plugin/power/components/info-dialog.vue +++ b/src/views/modules/visual/plugin/power/components/info-dialog.vue @@ -14,7 +14,7 @@
类别:{{infoDetail.categoryName}}
-
简介:{{infoDetail.introduction}}
+
简介:{{infoDetail.interoduction}}
diff --git a/src/views/modules/visual/plugin/power/components/screen-org-map.vue b/src/views/modules/visual/plugin/power/components/screen-org-map.vue index 69cbf71b..731729f5 100644 --- a/src/views/modules/visual/plugin/power/components/screen-org-map.vue +++ b/src/views/modules/visual/plugin/power/components/screen-org-map.vue @@ -23,15 +23,12 @@ import { createStringXY } from 'ol/coordinate' import { defaults as defaultControls } from 'ol/control' import { mapGetters } from "vuex" import { Loading } from 'element-ui' -import { getPolygonGeoJSON, getGridGeoJSON } from './geojson.js' let map let mapView let gaodeMapLayer // 背景地图图层 -let gridLayer // 网格组织图层 -let gridSource // 网格组织多边形 -let pointsLayer // 打点图层 -let pointsSource // 打点 +let markerSource +let markerLayer const iconArray = [ 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png', @@ -43,68 +40,38 @@ const textColorArray = [ 'rgba(0, 146, 238, 0.75)', 'rgba(238, 151, 0, 0.8)' ] -const polygonColorArray = [ - 'rgba(210, 2, 2, 0.24)', - 'rgba(43, 231, 253, 0.25)', - 'rgba(183, 185, 0, 0.16)' -] var createTextStyle = function (feature) { return new Text({ textAlign: undefined, font: "18px Arial", - //fontFamily: "Courier New, monospace", - // fontWeight: "bold", - text: feature.values_.name, + text: feature.values_.properties.name, backgroundFill: new Fill({ - // color: 'rgba(0, 146, 238, 0.75)' - color: textColorArray[feature.values_.index] + color: textColorArray[0] }), padding: [4, 10, 4, 10], - //text: "变电站名称", fill: new Fill({ color: "#ffffff" }), - // stroke: new Stroke({ color: "#ffffff", width: 3 }), offsetY: -30, offsetX: -50, overflow: true, }) } -var polygonStyleFunction = (function () { - return function (feature) { - return new Style({ - fill: new Fill({ - // color: [255, 255, 255, 0.3] - color: polygonColorArray[feature.values_.index] - }), - stroke: new Stroke({ - color: polygonColorArray[feature.values_.index], - width: 3 - }), - text: createTextStyle(feature) - }) - } -})() export default { name: "screen-org-map", - components: { - }, data() { return { centerPoint: [120.38945519, 36.0722275], // 中心点位置 - zoom: 12, // 缩放范围:区14 + zoom: 15, // 缩放范围:区14 minZoom: 1, // 最小缩放 } }, mounted() { this.initMap() - this.addAreaLayer() - this.addGridLayer() }, methods: { initMap () { gaodeMapLayer = new TileLayer({ title: "地图", source: new XYZ({ - //指定url瓦片 url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', wrapX: true // x方向平铺,也可以选择false }), @@ -112,142 +79,77 @@ export default { }) mapView = new View({ - //中心点坐标 center: this.centerPoint, - // projection: 'EPSG:3857', projection: 'EPSG:4326', zoom: this.zoom, minZoom: this.minZoom }) - - //初始化map和地图底图 - //创建地图容器 map = new Map({ layers: [gaodeMapLayer], - //加载瓦片图层数据 view: mapView, target: 'map' - //目标加载到map中 }) map.on('singleclick', function (e) { // console.log(e.coordinate) // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); }) - - //去除双击放大效果 - const dblClickInteraction = map - .getInteractions() - .getArray() - .find(interaction => { - return interaction instanceof DoubleClickZoom - }) - map.removeInteraction(dblClickInteraction) }, - // 绘制区域 - addAreaLayer () { - let feature = new GeoJSON().readFeatures(getPolygonGeoJSON()) - gridSource = new VectorSource({ - features: feature + addMarker (list, icon=iconArray[0], scale=1) { + markerSource = new VectorSource({ + // features: new GeoJSON().readFeatures(geojsonObject) }) - // gridSource.clear() // 清空网格标注 - // let features = new GeoJSON().readFeatures(getPolygonGeoJSON()) - // gridSource.addFeatures(features) - gridLayer = new VectorLayer({ - source: gridSource, - style: new Style({ - stroke: new Stroke({ - color: 'blue', - width: 2 - }), - // fill: new Fill({ - // color: 'rgba(255, 255, 0, 0.4)' - // }) - }), + markerLayer = new VectorLayer({ + source: markerSource, zIndex: 50 }) - map.addLayer(gridLayer) - }, - // 绘制网格区域 - addGridLayer () { - let feature = new GeoJSON().readFeatures(getGridGeoJSON()) - pointsSource = new VectorSource({ - features: feature - }) - pointsLayer = new VectorLayer({ - source: pointsSource, - style: polygonStyleFunction, - zIndex: 70 + let features = [] + list.forEach((item, index) => { + const point = [parseFloat(item.longitude), parseFloat(item.latitude)] + let marker = new Feature({ + geometry: new Point(point), + properties: { + ...item + } + }) + let iconStyle = new Style({ + image: new Icon({ + scale: scale, + src: icon + }) + }) + marker.setStyle(iconStyle) + features.push(marker) }) - - //选中多边形后的样式 var overlayStyle = (function () { return function (feature) { var styles = {} - styles['Polygon'] = [ - new Style({ - stroke: new Stroke({ - color: '#ec9000', - width: 2 - }) - }), + styles['Point'] = [ new Style({ - fill: new Fill({ - color: 'rgba(0, 0, 255, 0.1)' + image: new Icon({ + scale: scale, + src: iconArray[0] // feature.values_.properties.index }) }), new Style({ text: createTextStyle(feature) }) ] - styles['MultiPolygon'] = styles['Polygon'] return styles[feature.getGeometry().getType()] } })() - let select = new Select({ style: overlayStyle }) - this.addGridMarker(feature) - map.addLayer(pointsLayer) map.addInteraction(select) select.on('select', e => { if (e.selected.length > 0) { - console.log(e.selected[0].values_.name) + console.log('------', e.selected[0].values_.properties.id) } }) + markerSource.addFeatures(features) + map.addLayer(markerLayer) }, - // 打点 - addGridMarker (feature) { - let iconFeatures = [] - feature.forEach((oneIcon, index) => { - var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]) //获取一个坐标数组的边界,格式为[minx,miny,maxx,maxy] - // var center = getCenter(extent) //获取边界区域的中心位置 - // 添加标注 - let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2 - let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2 - // 地图icon样式 - let pointIcon = new Feature({ - geometry: new Point([x, y]), - properties: { - type: "icon", - name: oneIcon.values_.name - } - }) - let iconStyle = new Style({ - image: new Icon({ - // anchor: [0.5, 0.5], - // imgSize: [32, 32], - scale: 0.5, - src: iconArray[index] - }) - }) - - pointIcon.setStyle(iconStyle) - iconFeatures.push(pointIcon) - }) - pointsSource.addFeatures(iconFeatures) - } }, } diff --git a/src/views/modules/visual/plugin/power/components/screen-org-tree.vue b/src/views/modules/visual/plugin/power/components/screen-org-tree.vue index 2ac6f1df..aee878e2 100644 --- a/src/views/modules/visual/plugin/power/components/screen-org-tree.vue +++ b/src/views/modules/visual/plugin/power/components/screen-org-tree.vue @@ -1,5 +1,13 @@