| | |
| | | </template> |
| | | |
| | | <script> |
| | | import ImageWMS from "ol/source/ImageWMS"; |
| | | import Map from "ol/Map"; |
| | | import XYZ from "ol/source/XYZ"; |
| | | import View from "ol/View"; |
| | | import Image from "ol/layer/Image"; |
| | | import TileLayer from "ol/layer/Tile"; |
| | | import { transform } from "ol/proj"; |
| | | import ImageWMS from 'ol/source/ImageWMS'; |
| | | import Map from 'ol/Map'; |
| | | import XYZ from 'ol/source/XYZ'; |
| | | import View from 'ol/View'; |
| | | import Image from 'ol/layer/Image'; |
| | | import TileLayer from 'ol/layer/Tile'; |
| | | import { transform } from 'ol/proj'; |
| | | // import { Image as ImageLayer, Tile as TileLayer } from "ol/layer" |
| | | import echart11 from "./echart11.vue"; |
| | | import echart12 from "./echart12.vue"; |
| | | import echart13 from "./echart13.vue"; |
| | | import echart14 from "./echart14.vue"; |
| | | import echart15 from "./echart15.vue"; |
| | | import echart16 from "./echart16.vue"; |
| | | import echart21 from "./echart21.vue"; |
| | | import echart22 from "./echart22.vue"; |
| | | import echart23 from "./echart23.vue"; |
| | | import echart24 from "./echart24.vue"; |
| | | import echart25 from "./echart25.vue"; |
| | | import echart26 from "./echart26.vue"; |
| | | import echart31 from "./echart31.vue"; |
| | | import echart32 from "./echart32.vue"; |
| | | import echart33 from "./echart33.vue"; |
| | | import echart34 from "./echart34.vue"; |
| | | import echart35 from "./echart35.vue"; |
| | | import echart36 from "./echart36.vue"; |
| | | import echart41 from "./echart41.vue"; |
| | | import echart42 from "./echart42.vue"; |
| | | import echart43 from "./echart43.vue"; |
| | | import echart44 from "./echart44.vue"; |
| | | import echart45 from "./echart45.vue"; |
| | | import echart46 from "./echart46.vue"; |
| | | import echart11 from './echart11.vue'; |
| | | import echart12 from './echart12.vue'; |
| | | import echart13 from './echart13.vue'; |
| | | import echart14 from './echart14.vue'; |
| | | import echart15 from './echart15.vue'; |
| | | import echart16 from './echart16.vue'; |
| | | import echart21 from './echart21.vue'; |
| | | import echart22 from './echart22.vue'; |
| | | import echart23 from './echart23.vue'; |
| | | import echart24 from './echart24.vue'; |
| | | import echart25 from './echart25.vue'; |
| | | import echart26 from './echart26.vue'; |
| | | import echart31 from './echart31.vue'; |
| | | import echart32 from './echart32.vue'; |
| | | import echart33 from './echart33.vue'; |
| | | import echart34 from './echart34.vue'; |
| | | import echart35 from './echart35.vue'; |
| | | import echart36 from './echart36.vue'; |
| | | import echart41 from './echart41.vue'; |
| | | import echart42 from './echart42.vue'; |
| | | import echart43 from './echart43.vue'; |
| | | import echart44 from './echart44.vue'; |
| | | import echart45 from './echart45.vue'; |
| | | import echart46 from './echart46.vue'; |
| | | export default { |
| | | name: "webmap", |
| | | props: ["typeIndex"], |
| | | name: 'webmap', |
| | | props: ['typeIndex'], |
| | | components: { |
| | | echart11, |
| | | echart12, |
| | |
| | | isActive: true, |
| | | isMenuLayer: false, |
| | | title: [ |
| | | "管道基础数据专题图", |
| | | "用户使用情况专题图", |
| | | "项目基本情况专题图", |
| | | "项目进度管理专题图", |
| | | "全球项目分布专题图", |
| | | "全国管网分布专题图", |
| | | "全国项目足迹专题图", |
| | | '管道基础数据专题图', |
| | | '用户使用情况专题图', |
| | | '项目基本情况专题图', |
| | | '项目进度管理专题图', |
| | | '全球项目分布专题图', |
| | | '全国管网分布专题图', |
| | | '全国项目足迹专题图', |
| | | ], |
| | | }; |
| | | }, |
| | |
| | | } |
| | | }, |
| | | close() { |
| | | this.$emit("close", false); |
| | | this.$emit('close', false); |
| | | }, |
| | | changeFlag(res) { |
| | | this.layerFlag = res; |
| | |
| | | initMap() { |
| | | this.vectorLayer = new TileLayer({ |
| | | source: new XYZ({ |
| | | url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", |
| | | url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', |
| | | }), |
| | | }); |
| | | this.imageLayer = new TileLayer({ |
| | | source: new XYZ({ |
| | | url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}", |
| | | url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}', |
| | | }), |
| | | }); |
| | | this.map = new Map({ |
| | | target: "map", |
| | | target: 'map', |
| | | layers: [this.imageLayer, this.vectorLayer], |
| | | view: new View({ |
| | | center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"), |
| | | center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'), |
| | | zoom: 4, |
| | | projection: "EPSG:3857", |
| | | projection: 'EPSG:3857', |
| | | }), |
| | | }); |
| | | if (this.wmsLayer == null) { |
| | |
| | | } |
| | | var value; |
| | | if (res == 3 || res == 4 || res == 7) { |
| | | value = "xmzj"; |
| | | value = 'xmzj'; |
| | | } else if (res == 1 || res == 2 || res == 6) { |
| | | value = "lfgd"; |
| | | value = 'lfgd'; |
| | | } else if (res == 5) { |
| | | value = "qqxm"; |
| | | value = 'qqxm'; |
| | | } |
| | | this.wmsLayer = new Image({ |
| | | source: new ImageWMS({ |
| | | ratio: 1, |
| | | url: "http://192.168.20.39:9055/gisserver/wmsserver/" + value, |
| | | crossOrigin: "anonymous", |
| | | url: gisServerUrl + '/wmsserver/' + value, |
| | | crossOrigin: 'anonymous', |
| | | //serverType: 'geoserver', |
| | | params: { |
| | | VERSION: "1.3.0", |
| | | FORMAT: "image/png", |
| | | LAYERS: "", |
| | | srs: "EPSG:900913", |
| | | VERSION: '1.3.0', |
| | | FORMAT: 'image/png', |
| | | LAYERS: '', |
| | | srs: 'EPSG:900913', |
| | | tiled: true, |
| | | styles: "", |
| | | styles: '', |
| | | }, |
| | | }), |
| | | }); |
| | |
| | | box-shadow: 3px 3px 6px #666; |
| | | border: 1px solid rgba(204, 204, 204, 0.76); |
| | | border-radius: 5px; |
| | | cursor: pointer; |
| | | cursor: pointer; |
| | | } |
| | | .center1 { |
| | | right: 1%; |
| | |
| | | .active { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url("../assets/img/Layer/imgLayer2.png") no-repeat center; |
| | | background: url('../assets/img/Layer/imgLayer2.png') no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | |
| | | .menuLayer { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url("../assets/img/Layer/imgLayer1.png") no-repeat center; |
| | | background: url('../assets/img/Layer/imgLayer1.png') no-repeat center; |
| | | position: absolute; |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |