From f0efaed32d322f4e389f77169b81992118913656 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期四, 08 四月 2021 09:14:18 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/assets/css/map/map-panel-style.less | 7 + src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue | 14 +- package.json | 2 src/components/BaseNav/PublicBounced/PublicBounced.vue | 2 src/views/Temp.vue | 46 +++++++ src/components/plugin/proj4leaflet.js | 274 +++++++++++++++++++++++++++++++++++++++++++++ src/router/index.js | 8 7 files changed, 338 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index abf1a54..40e1977 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dayjs": "^1.9.6", "echarts": "^4.2.1", "element-ui": "^2.14.1", + "esri-leaflet": "^3.0.1", "fullscreen": "^1.1.1", "jquery": "^3.5.1", "js-cookie": "^2.2.0", @@ -28,6 +29,7 @@ "leaflet.markercluster": "^1.4.1", "lodash": "^4.17.10", "nprogress": "^0.2.0", + "proj4": "^2.7.2", "qs": "^6.10.1", "rbush": "^3.0.1", "screenfull": "^3.3.3", diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 144e283..3545ff7 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -243,13 +243,18 @@ /***************Company 鍥惧眰 鎮诞妗嗘牱寮忋��*********************************/ .company-bindTooltip { - background: none; + background: @background-color-split; border: none; color: red; font-size: 16px; font-weight: 900 !important; text-shadow: 0 0 5px #fff; + //filter:Dropshadow(offx=1,offy=0,color=white) + //Dropshadow(offx=0,offy=1,color=white) + //Dropshadow(offx=0,offy=-1,color=white) + //Dropshadow(offx=-1,offy=0,color=white); box-shadow: none; + -webkit-text-stroke: .5px #fff; } .company-bindTooltip-hover h3 { diff --git a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue index fcca905..4a06df2 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue @@ -21,7 +21,7 @@ </div> </el-dialog> </div> - <div style="width:100%;height:1.2rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main"> + <div style="width:100%;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main"> </div> </div> </div> @@ -219,22 +219,20 @@ this.$nextTick(() => { this.drawChart() const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring)) - console.log(dataWatch) + // console.log(dataWatch) for (var i = 0; i < dataWatch.length; i++) { this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17)) } - console.log(this.dataDate) + // console.log(this.dataDate) }) } } </script> <style scoped lang="less"> -#Tab { - height: 3rem; -} .Infomation { margin-left: 10px; + height: 0.2rem; } .el-tag { @@ -250,7 +248,7 @@ .form-echrts { width: 100%; - height: 100%; + height: 1rem; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; .el-dialog-div { @@ -262,7 +260,7 @@ #echarts { margin: 0; padding: 0; - height: 3rem; + //height: 3rem; //border: 1px solid #396d83; //margin: 10px 10px 10px 10px; } diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index 051b3c4..b8ab6bf 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -107,7 +107,7 @@ this.setWasteWaterdata = dataWater // console.log(data) this.getWasteWaterMonitoring = drawData - console.log(drawData) + // console.log(drawData) this.getWasteWaterMonitoringDetails = dataDetail this.displayContentTitle = dataWater.Name this.flag = true diff --git a/src/components/plugin/proj4leaflet.js b/src/components/plugin/proj4leaflet.js new file mode 100644 index 0000000..c07a40e --- /dev/null +++ b/src/components/plugin/proj4leaflet.js @@ -0,0 +1,274 @@ +/* eslint-disable */ +let L = window.L +(function (factory) { + var L, proj4; + if (typeof define === 'function' && define.amd) { + // AMD + define(['leaflet', 'proj4'], factory); + } else if (typeof module === 'object' && typeof module.exports === "object") { + // Node/CommonJS + L = require('leaflet'); + proj4 = require('proj4'); + module.exports = factory(L, proj4); + } else { + // Browser globals + if (typeof window.L === 'undefined' || typeof window.proj4 === 'undefined') + throw 'Leaflet and proj4 must be loaded first'; + factory(window.L, window.proj4); + } +}(function (L, proj4) { + if (proj4.__esModule && proj4.default) { + // If proj4 was bundled as an ES6 module, unwrap it to get + // to the actual main proj4 object. + // See discussion in https://github.com/kartena/Proj4Leaflet/pull/147 + proj4 = proj4.default; + } + + L.Proj = {}; + + L.Proj._isProj4Obj = function(a) { + return (typeof a.inverse !== 'undefined' && + typeof a.forward !== 'undefined'); + }; + + L.Proj.Projection = L.Class.extend({ + initialize: function(code, def, bounds) { + var isP4 = L.Proj._isProj4Obj(code); + this._proj = isP4 ? code : this._projFromCodeDef(code, def); + this.bounds = isP4 ? def : bounds; + }, + + project: function (latlng) { + var point = this._proj.forward([latlng.lng, latlng.lat]); + return new L.Point(point[0], point[1]); + }, + + unproject: function (point, unbounded) { + var point2 = this._proj.inverse([point.x, point.y]); + return new L.LatLng(point2[1], point2[0], unbounded); + }, + + _projFromCodeDef: function(code, def) { + if (def) { + proj4.defs(code, def); + } else if (proj4.defs[code] === undefined) { + var urn = code.split(':'); + if (urn.length > 3) { + code = urn[urn.length - 3] + ':' + urn[urn.length - 1]; + } + if (proj4.defs[code] === undefined) { + throw 'No projection definition for code ' + code; + } + } + + return proj4(code); + } + }); + + L.Proj.CRS = L.Class.extend({ + includes: L.CRS, + + options: { + transformation: new L.Transformation(1, 0, -1, 0) + }, + + initialize: function(a, b, c) { + var code, + proj, + def, + options; + + if (L.Proj._isProj4Obj(a)) { + proj = a; + code = proj.srsCode; + options = b || {}; + + this.projection = new L.Proj.Projection(proj, options.bounds); + } else { + code = a; + def = b; + options = c || {}; + this.projection = new L.Proj.Projection(code, def, options.bounds); + } + + L.Util.setOptions(this, options); + this.code = code; + this.transformation = this.options.transformation; + + if (this.options.origin) { + this.transformation = + new L.Transformation(1, -this.options.origin[0], + -1, this.options.origin[1]); + } + + if (this.options.scales) { + this._scales = this.options.scales; + } else if (this.options.resolutions) { + this._scales = []; + for (var i = this.options.resolutions.length - 1; i >= 0; i--) { + if (this.options.resolutions[i]) { + this._scales[i] = 1 / this.options.resolutions[i]; + } + } + } + + this.infinite = !this.options.bounds; + + }, + + scale: function(zoom) { + var iZoom = Math.floor(zoom), + baseScale, + nextScale, + scaleDiff, + zDiff; + if (zoom === iZoom) { + return this._scales[zoom]; + } else { + // Non-integer zoom, interpolate + baseScale = this._scales[iZoom]; + nextScale = this._scales[iZoom + 1]; + scaleDiff = nextScale - baseScale; + zDiff = (zoom - iZoom); + return baseScale + scaleDiff * zDiff; + } + }, + + zoom: function(scale) { + // Find closest number in this._scales, down + var downScale = this._closestElement(this._scales, scale), + downZoom = this._scales.indexOf(downScale), + nextScale, + nextZoom, + scaleDiff; + // Check if scale is downScale => return array index + if (scale === downScale) { + return downZoom; + } + if (downScale === undefined) { + return -Infinity; + } + // Interpolate + nextZoom = downZoom + 1; + nextScale = this._scales[nextZoom]; + if (nextScale === undefined) { + return Infinity; + } + scaleDiff = nextScale - downScale; + return (scale - downScale) / scaleDiff + downZoom; + }, + + distance: L.CRS.Earth.distance, + + R: L.CRS.Earth.R, + + /* Get the closest lowest element in an array */ + _closestElement: function(array, element) { + var low; + for (var i = array.length; i--;) { + if (array[i] <= element && (low === undefined || low < array[i])) { + low = array[i]; + } + } + return low; + } + }); + + L.Proj.GeoJSON = L.GeoJSON.extend({ + initialize: function(geojson, options) { + this._callLevel = 0; + L.GeoJSON.prototype.initialize.call(this, geojson, options); + }, + + addData: function(geojson) { + var crs; + + if (geojson) { + if (geojson.crs && geojson.crs.type === 'name') { + crs = new L.Proj.CRS(geojson.crs.properties.name); + } else if (geojson.crs && geojson.crs.type) { + crs = new L.Proj.CRS(geojson.crs.type + ':' + geojson.crs.properties.code); + } + + if (crs !== undefined) { + this.options.coordsToLatLng = function(coords) { + var point = L.point(coords[0], coords[1]); + return crs.projection.unproject(point); + }; + } + } + + // Base class' addData might call us recursively, but + // CRS shouldn't be cleared in that case, since CRS applies + // to the whole GeoJSON, inluding sub-features. + this._callLevel++; + try { + L.GeoJSON.prototype.addData.call(this, geojson); + } finally { + this._callLevel--; + if (this._callLevel === 0) { + delete this.options.coordsToLatLng; + } + } + } + }); + + L.Proj.geoJson = function(geojson, options) { + return new L.Proj.GeoJSON(geojson, options); + }; + + L.Proj.ImageOverlay = L.ImageOverlay.extend({ + initialize: function (url, bounds, options) { + L.ImageOverlay.prototype.initialize.call(this, url, null, options); + this._projectedBounds = bounds; + }, + + // Danger ahead: Overriding internal methods in Leaflet. + // Decided to do this rather than making a copy of L.ImageOverlay + // and doing very tiny modifications to it. + // Future will tell if this was wise or not. + _animateZoom: function (event) { + var scale = this._map.getZoomScale(event.zoom); + var northWest = L.point(this._projectedBounds.min.x, this._projectedBounds.max.y); + var offset = this._projectedToNewLayerPoint(northWest, event.zoom, event.center); + + L.DomUtil.setTransform(this._image, offset, scale); + }, + + _reset: function () { + var zoom = this._map.getZoom(); + var pixelOrigin = this._map.getPixelOrigin(); + var bounds = L.bounds( + this._transform(this._projectedBounds.min, zoom)._subtract(pixelOrigin), + this._transform(this._projectedBounds.max, zoom)._subtract(pixelOrigin) + ); + var size = bounds.getSize(); + + L.DomUtil.setPosition(this._image, bounds.min); + this._image.style.width = size.x + 'px'; + this._image.style.height = size.y + 'px'; + }, + + _projectedToNewLayerPoint: function (point, zoom, center) { + var viewHalf = this._map.getSize()._divideBy(2); + var newTopLeft = this._map.project(center, zoom)._subtract(viewHalf)._round(); + var topLeft = newTopLeft.add(this._map._getMapPanePos()); + + return this._transform(point, zoom)._subtract(topLeft); + }, + + _transform: function (point, zoom) { + var crs = this._map.options.crs; + var transformation = crs.transformation; + var scale = crs.scale(zoom); + + return transformation.transform(point, scale); + } + }); + + L.Proj.imageOverlay = function (url, bounds, options) { + return new L.Proj.ImageOverlay(url, bounds, options); + }; + + return L.Proj; +})); diff --git a/src/router/index.js b/src/router/index.js index ac9cb58..b95bcd3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -35,9 +35,11 @@ console.log(homeRouterName) next() } else if (!token) { - next({ - name: LOGIN_PAGE_ROUTE_NAME // 璺宠浆鍒扮櫥褰曢〉 - }) + // next({ + // name: LOGIN_PAGE_ROUTE_NAME // 璺宠浆鍒扮櫥褰曢〉 + // }) + console.log(LOGIN_PAGE_ROUTE_NAME) + next() } else { next() } diff --git a/src/views/Temp.vue b/src/views/Temp.vue index 4e3accf..130740e 100644 --- a/src/views/Temp.vue +++ b/src/views/Temp.vue @@ -35,7 +35,11 @@ // // 鍏叡灞曠ず鏁版嵁 import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced' import LayerFactory from '@components/LayerController/service/LayerFactory' - +const esri = require('esri-leaflet') +// const proj4 = require('proj4') +const proj4 = require('proj4') +window.proj4 = proj4 +const Proj = require('../components/plugin/proj4leaflet') export default { name: 'Temp', components: { @@ -82,6 +86,35 @@ }, init () { const mapcontainer = this.$refs.rootmap + const CRS_4490 = new Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', { + resolutions: [ + 1.40625, + 0.703125, + 0.3515625, + 0.17578125, + 0.087890625, + 0.0439453125, + 0.02197265625, + 0.010986328125, + 0.0054931640625, + 0.00274658203125, + 0.001373291015625, + 6.866455078125E-4, + 3.4332275390625E-4, + 1.71661376953125E-4, + 8.58306884765625E-5, + 4.291534423828125E-5, + 2.1457672119140625E-5, + 1.0728836059570312E-5, + 5.364418029785156E-6, + 2.682209064925356E-6, + 1.3411045324626732E-6 + ], + origin: [-180, 90] + }) + console.log(mapcontainer) + console.log(CRS_4490) + debugger this.map = Sgis.initMap(mapcontainer) this.$refs.toolBox.map = this.map @@ -94,7 +127,7 @@ window.layerFactory = layerFactory this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜 - this.basemapHelper.initBasemap(this.config, true) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 + this.basemapHelper.initBasemap(this.config, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 // this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵� // this.vectorLayerHelper.initVectorLayers(this.config) @@ -106,6 +139,15 @@ // this.setBasemapHelper(this.basemapHelper) // this.setServiceLayerHelper(this.serviceLayerHelper) // this.setVectorLayerHelper(this.vectorLayerHelper) + this.loadArcgisImg() + }, + loadArcgisImg () { + // const url = 'http://10.246.132.249:8080/OneMapServer/rest/services/base-map-image-enterprise/MapServer/tile/{z}/{y}/{x}' + const url = 'http://10.246.132.249:8080/OneMapServer/rest/services/base-map-image-enterprise/MapServer' + // const arcgisTileLayer = this.L.tileLayer(url, { + const arcgisTileLayer = esri.tiledMapLayer({ url: url }) + // const arcgisTileLayer = esri.dynamicMapLayer({ url: url }) + arcgisTileLayer.addTo(this.map) }, onLayerClick () { this.$refs.popup.setShow() -- Gitblit v1.8.0