diff --git a/package.json b/package.json index 32cfea2..7d0664e 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,8 @@ "js-beautify": "1.13.0", "js-cookie": "3.0.1", "jsencrypt": "3.0.0-rc.1", + "leaflet": "^1.9.4", + "leaflet.markercluster": "^1.5.3", "nprogress": "0.2.0", "quill": "1.3.7", "screenfull": "5.0.2", diff --git a/src/assets/images/address.png b/src/assets/images/address.png new file mode 100644 index 0000000..ddb7a8e Binary files /dev/null and b/src/assets/images/address.png differ diff --git a/src/assets/images/icon-jjsj-1@2x.png b/src/assets/images/icon-jjsj-1@2x.png new file mode 100644 index 0000000..a8df0e4 Binary files /dev/null and b/src/assets/images/icon-jjsj-1@2x.png differ diff --git a/src/assets/images/icon-qtsj-1@2x.png b/src/assets/images/icon-qtsj-1@2x.png new file mode 100644 index 0000000..f9cc52e Binary files /dev/null and b/src/assets/images/icon-qtsj-1@2x.png differ diff --git a/src/assets/images/icon-trts-1@2x.png b/src/assets/images/icon-trts-1@2x.png new file mode 100644 index 0000000..a899cc8 Binary files /dev/null and b/src/assets/images/icon-trts-1@2x.png differ diff --git a/src/assets/images/icon-yrds-1@2x.png b/src/assets/images/icon-yrds-1@2x.png new file mode 100644 index 0000000..e5a52dd Binary files /dev/null and b/src/assets/images/icon-yrds-1@2x.png differ diff --git a/src/assets/images/icon-zdry-1@2x.png b/src/assets/images/icon-zdry-1@2x.png new file mode 100644 index 0000000..626a63f Binary files /dev/null and b/src/assets/images/icon-zdry-1@2x.png differ diff --git a/src/assets/images/time.png b/src/assets/images/time.png new file mode 100644 index 0000000..9f6b206 Binary files /dev/null and b/src/assets/images/time.png differ diff --git a/src/assets/styles/public.scss b/src/assets/styles/public.scss index eda145a..0fd2954 100644 --- a/src/assets/styles/public.scss +++ b/src/assets/styles/public.scss @@ -2,7 +2,7 @@ margin: 20px; background-color: #fff; border-radius: 5px; - height: calc(100vh - 40px); + height: calc(100% - 40px); overflow-y: scroll; padding: 20px 0 45px 0; // 查询重置按钮 @@ -207,8 +207,10 @@ // 预警审核样式 header { padding: 0 20px; + font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; + font-weight: 700; font-size: 18px; - font-weight: bold; + color: #3D3D3D; } .tabs-header { margin-top: 10px; @@ -322,84 +324,134 @@ // 预警呈现样式 .L-app-map-container { - margin: 20px; - background-color: #fff; - border-radius: 5px; - height: calc(100vh - 80px); - width: calc(100% - 40px); + background-color: #ccc; + // height: calc(100vh - 80px); + // width: calc(100% - 40px); + width: 100%; + height: 100%; // overflow-y: scroll; position: relative; + #newmap { + width: 100%; + height: 100%; + } .warning-list { position: absolute; - right: 0; - top: 0; - bottom: 0; + right: 20px; + top: 20px; + bottom: 20px; width: 25%; + z-index: 1000; + background-color: #fff; + border-radius: 10px; .warning-list-title { - line-height: 50px; - text-align: center; - background-color: #e6f7ff; - font-weight: bold; + line-height: 40px; + padding: 0 20px; + background-color: rgba(47,138,229,0.05); + font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; + font-weight: 700; + font-size: 16px; + color: #3D3D3D; } .warning-list-content { - height: calc(100vh - 130px); - overflow-y: scroll; padding: 10px; .warning-list-search { display: flex; align-items: center; .el-button { - margin-left: 5px; - // height: 36px; + background-color:#2F8AE5; + color: #fff; } } .warning-list-list { display: grid; grid-template-columns: 1fr; grid-row-gap: 10px; - padding: 5px; + margin: 5px; + height: calc(100vh - 250px); + overflow-y: scroll; .lists { - border: 1px solid #ccc; border-radius: 10px; - padding: 5px; + padding: 20px 10px; + background-color: #FAFAFA; .hearder { display: flex; .warning-title { flex: 1; } .anniu { - margin-left: 5px; - // display: flex; - // align-items: center; - // justify-content: center; - line-height: 30px; - height: 30px; - padding: 0 10px; + margin-right: 10px; + padding: 3px; border-radius: 5px; - border: 1px solid #d9001b; + width: 3em; + flex-wrap: wrap; } } .content { display: flex; - margin: 10px 0 0 0; - .content-left { - flex: 1; - font-size: 14px; - color: #7f7f7f; + flex-direction: column; + margin: 10px 0; + .content-top,.content-bottom { + font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; + font-weight: 400; + font-size: 12px; + color: #666666; + padding: 0 10px; + display: flex; + align-items: center; + } + .content-top { + img { + width: 11px; + height: 12px; + margin-right: 20px; + } } - .content-right { - margin-left: 5px; - .audit{ - font-size: 14px; - color: #7f7f7f; + .content-bottom { + margin-top: 10px; + img { + width: 12px; + height: 12px; + margin-right: 20px; } - .detailInfo{ - font-size: 14px; - color: #1890ff; + } + } + .foot { + width: 100%; + .el-button { + width: 100%; + } + .eventInfo { + width: 100%; + display: flex; + align-items: center; + background-color: #fff; + border-radius: 5px; + padding: 8px 0; + position: relative; + .audit,.info { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; + font-weight: 400; + font-size: 12px; + cursor: pointer; + } + .audit { + color: #808080; } - .el-button { - height: 90%; - width: 80px; + .info { + color: #2F8AE5; + } + + span { + position: absolute; + left: 50%; + width: 1px; + height: 40%; + background-color: #F2F2F2; } } } @@ -417,18 +469,26 @@ padding: 10px 20px; display: grid; grid-template-columns: 1fr; - grid-row-gap: 5px; + grid-row-gap: 10px; border-radius: 5px; - border: 1px solid #DEE2EE; - box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1); + // border: 1px solid #DEE2EE; + box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); + background: #FFFFFF; + z-index: 1000; .warning-events-event { display: flex; align-items: center; + cursor: pointer; .warning-events-event-img { margin-right: 10px; + width: 20px; + height: 29px; } .warning-events-event-text { - font-size: 12px; + font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; + font-weight: 400; + font-size: 14px; + color: #666666; } } } diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index 511ad2d..f98c8de 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -89,7 +89,6 @@ export default { hasOneShowingChildTwo(item){ if(item.children) { if ((item.children && item.children[0].path == "index" && this.indexCurrent) || (item.children && item.children[0].path == "warningAppear" && this.warningAppearCurrent)) { - console.log("进来了"); return true; } else { return false; @@ -123,7 +122,6 @@ export default { this.indexCurrent = false; this.warningAppearCurrent = false; } - console.log(this.indexCurrent,"indexCurrent"); // console.log(this.warningAppearCurrent,"warningAppearCurrent"); }, immediate:true, diff --git a/src/main.js b/src/main.js index 13c6cf2..778fb97 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,8 @@ import './assets/styles/element-variables.scss' import '@/assets/styles/index.scss' // global css import '@/assets/styles/ruoyi.scss' // ruoyi css +import 'leaflet/dist/leaflet.css' // leaflet样式 + import App from './App' import store from './store' import router from './router' diff --git a/src/utils/lib/heatmap.min.js b/src/utils/lib/heatmap.min.js new file mode 100644 index 0000000..943b7d9 --- /dev/null +++ b/src/utils/lib/heatmap.min.js @@ -0,0 +1,9 @@ +/* + * heatmap.js v2.0.2 | JavaScript Heatmap Library + * + * Copyright 2008-2016 Patrick Wied - All rights reserved. + * Dual licensed under MIT and Beerware license + * + * :: 2016-02-04 21:25 + */ +(function (a, b, c) { if (typeof module !== "undefined" && module.exports) { module.exports = c() } else if (typeof define === "function" && define.amd) { define(c) } else { b[a] = c() } })("h337", this, function () { var a = { defaultRadius: 40, defaultRenderer: "canvas2d", defaultGradient: { .25: "rgb(0,0,255)", .55: "rgb(0,255,0)", .85: "yellow", 1: "rgb(255,0,0)" }, defaultMaxOpacity: 1, defaultMinOpacity: 0, defaultBlur: .85, defaultXField: "x", defaultYField: "y", defaultValueField: "value", plugins: {} }; var b = function h() { var b = function d(a) { this._coordinator = {}; this._data = []; this._radi = []; this._min = 0; this._max = 1; this._xField = a["xField"] || a.defaultXField; this._yField = a["yField"] || a.defaultYField; this._valueField = a["valueField"] || a.defaultValueField; if (a["radius"]) { this._cfgRadius = a["radius"] } }; var c = a.defaultRadius; b.prototype = { _organiseData: function (a, b) { var d = a[this._xField]; var e = a[this._yField]; var f = this._radi; var g = this._data; var h = this._max; var i = this._min; var j = a[this._valueField] || 1; var k = a.radius || this._cfgRadius || c; if (!g[d]) { g[d] = []; f[d] = [] } if (!g[d][e]) { g[d][e] = j; f[d][e] = k } else { g[d][e] += j } if (g[d][e] > h) { if (!b) { this._max = g[d][e] } else { this.setDataMax(g[d][e]) } return false } else { return { x: d, y: e, value: j, radius: k, min: i, max: h } } }, _unOrganizeData: function () { var a = []; var b = this._data; var c = this._radi; for (var d in b) { for (var e in b[d]) { a.push({ x: d, y: e, radius: c[d][e], value: b[d][e] }) } } return { min: this._min, max: this._max, data: a } }, _onExtremaChange: function () { this._coordinator.emit("extremachange", { min: this._min, max: this._max }) }, addData: function () { if (arguments[0].length > 0) { var a = arguments[0]; var b = a.length; while (b--) { this.addData.call(this, a[b]) } } else { var c = this._organiseData(arguments[0], true); if (c) { this._coordinator.emit("renderpartial", { min: this._min, max: this._max, data: [c] }) } } return this }, setData: function (a) { var b = a.data; var c = b.length; this._data = []; this._radi = []; for (var d = 0; d < c; d++) { this._organiseData(b[d], false) } this._max = a.max; this._min = a.min || 0; this._onExtremaChange(); this._coordinator.emit("renderall", this._getInternalData()); return this }, removeData: function () { }, setDataMax: function (a) { this._max = a; this._onExtremaChange(); this._coordinator.emit("renderall", this._getInternalData()); return this }, setDataMin: function (a) { this._min = a; this._onExtremaChange(); this._coordinator.emit("renderall", this._getInternalData()); return this }, setCoordinator: function (a) { this._coordinator = a }, _getInternalData: function () { return { max: this._max, min: this._min, data: this._data, radi: this._radi } }, getData: function () { return this._unOrganizeData() } }; return b }(); var c = function i() { var a = function (a) { var b = a.gradient || a.defaultGradient; var c = document.createElement("canvas"); var d = c.getContext("2d"); c.width = 256; c.height = 1; var e = d.createLinearGradient(0, 0, 256, 1); for (var f in b) { e.addColorStop(f, b[f]) } d.fillStyle = e; d.fillRect(0, 0, 256, 1); return d.getImageData(0, 0, 256, 1).data }; var b = function (a, b) { var c = document.createElement("canvas"); var d = c.getContext("2d"); var e = a; var f = a; c.width = c.height = a * 2; if (b == 1) { d.beginPath(); d.arc(e, f, a, 0, 2 * Math.PI, false); d.fillStyle = "rgba(0,0,0,1)"; d.fill() } else { var g = d.createRadialGradient(e, f, a * b, e, f, a); g.addColorStop(0, "rgba(0,0,0,1)"); g.addColorStop(1, "rgba(0,0,0,0)"); d.fillStyle = g; d.fillRect(0, 0, 2 * a, 2 * a) } return c }; var c = function (a) { var b = []; var c = a.min; var d = a.max; var e = a.radi; var a = a.data; var f = Object.keys(a); var g = f.length; while (g--) { var h = f[g]; var i = Object.keys(a[h]); var j = i.length; while (j--) { var k = i[j]; var l = a[h][k]; var m = e[h][k]; b.push({ x: h, y: k, value: l, radius: m }) } } return { min: c, max: d, data: b } }; function d(b) { var c = b.container; var d = this.shadowCanvas = document.createElement("canvas"); var e = this.canvas = b.canvas || document.createElement("canvas"); var f = this._renderBoundaries = [1e4, 1e4, 0, 0]; var g = getComputedStyle(b.container) || {}; e.className = "heatmap-canvas"; this._width = e.width = d.width = b.width || +g.width.replace(/px/, ""); this._height = e.height = d.height = b.height || +g.height.replace(/px/, ""); this.shadowCtx = d.getContext("2d"); this.ctx = e.getContext("2d"); e.style.cssText = d.style.cssText = "position:absolute;left:0;top:0;"; c.style.position = "relative"; c.appendChild(e); this._palette = a(b); this._templates = {}; this._setStyles(b) } d.prototype = { renderPartial: function (a) { if (a.data.length > 0) { this._drawAlpha(a); this._colorize() } }, renderAll: function (a) { this._clear(); if (a.data.length > 0) { this._drawAlpha(c(a)); this._colorize() } }, _updateGradient: function (b) { this._palette = a(b) }, updateConfig: function (a) { if (a["gradient"]) { this._updateGradient(a) } this._setStyles(a) }, setDimensions: function (a, b) { this._width = a; this._height = b; this.canvas.width = this.shadowCanvas.width = a; this.canvas.height = this.shadowCanvas.height = b }, _clear: function () { this.shadowCtx.clearRect(0, 0, this._width, this._height); this.ctx.clearRect(0, 0, this._width, this._height) }, _setStyles: function (a) { this._blur = a.blur == 0 ? 0 : a.blur || a.defaultBlur; if (a.backgroundColor) { this.canvas.style.backgroundColor = a.backgroundColor } this._width = this.canvas.width = this.shadowCanvas.width = a.width || this._width; this._height = this.canvas.height = this.shadowCanvas.height = a.height || this._height; this._opacity = (a.opacity || 0) * 255; this._maxOpacity = (a.maxOpacity || a.defaultMaxOpacity) * 255; this._minOpacity = (a.minOpacity || a.defaultMinOpacity) * 255; this._useGradientOpacity = !!a.useGradientOpacity }, _drawAlpha: function (a) { var c = this._min = a.min; var d = this._max = a.max; var a = a.data || []; var e = a.length; var f = 1 - this._blur; while (e--) { var g = a[e]; var h = g.x; var i = g.y; var j = g.radius; var k = Math.min(g.value, d); var l = h - j; var m = i - j; var n = this.shadowCtx; var o; if (!this._templates[j]) { this._templates[j] = o = b(j, f) } else { o = this._templates[j] } var p = (k - c) / (d - c); n.globalAlpha = p < .01 ? .01 : p; n.drawImage(o, l, m); if (l < this._renderBoundaries[0]) { this._renderBoundaries[0] = l } if (m < this._renderBoundaries[1]) { this._renderBoundaries[1] = m } if (l + 2 * j > this._renderBoundaries[2]) { this._renderBoundaries[2] = l + 2 * j } if (m + 2 * j > this._renderBoundaries[3]) { this._renderBoundaries[3] = m + 2 * j } } }, _colorize: function () { var a = this._renderBoundaries[0]; var b = this._renderBoundaries[1]; var c = this._renderBoundaries[2] - a; var d = this._renderBoundaries[3] - b; var e = this._width; var f = this._height; var g = this._opacity; var h = this._maxOpacity; var i = this._minOpacity; var j = this._useGradientOpacity; if (a < 0) { a = 0 } if (b < 0) { b = 0 } if (a + c > e) { c = e - a } if (b + d > f) { d = f - b } var k = this.shadowCtx.getImageData(a, b, c, d); var l = k.data; var m = l.length; var n = this._palette; for (var o = 3; o < m; o += 4) { var p = l[o]; var q = p * 4; if (!q) { continue } var r; if (g > 0) { r = g } else { if (p < h) { if (p < i) { r = i } else { r = p } } else { r = h } } l[o - 3] = n[q]; l[o - 2] = n[q + 1]; l[o - 1] = n[q + 2]; l[o] = j ? n[q + 3] : r } k.data = l; this.ctx.putImageData(k, a, b); this._renderBoundaries = [1e3, 1e3, 0, 0] }, getValueAt: function (a) { var b; var c = this.shadowCtx; var d = c.getImageData(a.x, a.y, 1, 1); var e = d.data[3]; var f = this._max; var g = this._min; b = Math.abs(f - g) * (e / 255) >> 0; return b }, getDataURL: function () { return this.canvas.toDataURL() } }; return d }(); var d = function j() { var b = false; if (a["defaultRenderer"] === "canvas2d") { b = c } return b }(); var e = { merge: function () { var a = {}; var b = arguments.length; for (var c = 0; c < b; c++) { var d = arguments[c]; for (var e in d) { a[e] = d[e] } } return a } }; var f = function k() { var c = function h() { function a() { this.cStore = {} } a.prototype = { on: function (a, b, c) { var d = this.cStore; if (!d[a]) { d[a] = [] } d[a].push(function (a) { return b.call(c, a) }) }, emit: function (a, b) { var c = this.cStore; if (c[a]) { var d = c[a].length; for (var e = 0; e < d; e++) { var f = c[a][e]; f(b) } } } }; return a }(); var f = function (a) { var b = a._renderer; var c = a._coordinator; var d = a._store; c.on("renderpartial", b.renderPartial, b); c.on("renderall", b.renderAll, b); c.on("extremachange", function (b) { a._config.onExtremaChange && a._config.onExtremaChange({ min: b.min, max: b.max, gradient: a._config["gradient"] || a._config["defaultGradient"] }) }); d.setCoordinator(c) }; function g() { var g = this._config = e.merge(a, arguments[0] || {}); this._coordinator = new c; if (g["plugin"]) { var h = g["plugin"]; if (!a.plugins[h]) { throw new Error("Plugin '" + h + "' not found. Maybe it was not registered.") } else { var i = a.plugins[h]; this._renderer = new i.renderer(g); this._store = new i.store(g) } } else { this._renderer = new d(g); this._store = new b(g) } f(this) } g.prototype = { addData: function () { this._store.addData.apply(this._store, arguments); return this }, removeData: function () { this._store.removeData && this._store.removeData.apply(this._store, arguments); return this }, setData: function () { this._store.setData.apply(this._store, arguments); return this }, setDataMax: function () { this._store.setDataMax.apply(this._store, arguments); return this }, setDataMin: function () { this._store.setDataMin.apply(this._store, arguments); return this }, configure: function (a) { this._config = e.merge(this._config, a); this._renderer.updateConfig(this._config); this._coordinator.emit("renderall", this._store._getInternalData()); return this }, repaint: function () { this._coordinator.emit("renderall", this._store._getInternalData()); return this }, getData: function () { return this._store.getData() }, getDataURL: function () { return this._renderer.getDataURL() }, getValueAt: function (a) { if (this._store.getValueAt) { return this._store.getValueAt(a) } else if (this._renderer.getValueAt) { return this._renderer.getValueAt(a) } else { return null } } }; return g }(); var g = { create: function (a) { return new f(a) }, register: function (b, c) { a.plugins[b] = c } }; return g }); \ No newline at end of file diff --git a/src/utils/lib/leaflet-heatmap.js b/src/utils/lib/leaflet-heatmap.js new file mode 100644 index 0000000..e3f4881 --- /dev/null +++ b/src/utils/lib/leaflet-heatmap.js @@ -0,0 +1,246 @@ +/* +* Leaflet Heatmap Overlay +* +* Copyright (c) 2008-2016, Patrick Wied (https://www.patrick-wied.at) +* Dual-licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) +* and the Beerware (http://en.wikipedia.org/wiki/Beerware) license. +*/ +; (function (name, context, factory) { + // Supports UMD. AMD, CommonJS/Node.js and browser context + if (typeof module !== "undefined" && module.exports) { + module.exports = factory( + require('./heatmap.min.js'), + require('leaflet') + ); + } else if (typeof define === "function" && define.amd) { + define(['./heatmap.min.js', 'leaflet'], factory); + } else { + // browser globals + if (typeof window.h337 === 'undefined') { + throw new Error('heatmap.js must be loaded before the leaflet heatmap plugin'); + } + if (typeof window.L === 'undefined') { + throw new Error('Leaflet must be loaded before the leaflet heatmap plugin'); + } + context[name] = factory(window.h337, window.L); + } + +})("HeatmapOverlay", this, function (h337, L) { + 'use strict'; + + // Leaflet < 0.8 compatibility + if (typeof L.Layer === 'undefined') { + L.Layer = L.Class; + } + + var HeatmapOverlay = L.Layer.extend({ + + initialize: function (config) { + this.cfg = config; + this._el = L.DomUtil.create('div', 'leaflet-zoom-hide'); + this._data = []; + this._max = 1; + this._min = 0; + this.cfg.container = this._el; + }, + + onAdd: function (map) { + var size = map.getSize(); + + this._map = map; + + this._width = size.x; + this._height = size.y; + + this._el.style.width = size.x + 'px'; + this._el.style.height = size.y + 'px'; + this._el.style.position = 'absolute'; + + this._origin = this._map.layerPointToLatLng(new L.Point(0, 0)); + + map.getPanes().overlayPane.appendChild(this._el); + + if (!this._heatmap) { + this._heatmap = h337.create(this.cfg); + } + + // this resets the origin and redraws whenever + // the zoom changed or the map has been moved + map.on('moveend', this._reset, this); + this._draw(); + }, + + addTo: function (map) { + map.addLayer(this); + return this; + }, + + onRemove: function (map) { + // remove layer's DOM elements and listeners + map.getPanes().overlayPane.removeChild(this._el); + + map.off('moveend', this._reset, this); + }, + _draw: function () { + if (!this._map) { return; } + + var mapPane = this._map.getPanes().mapPane; + var point = mapPane._leaflet_pos; + + // reposition the layer + this._el.style[HeatmapOverlay.CSS_TRANSFORM] = 'translate(' + + -Math.round(point.x) + 'px,' + + -Math.round(point.y) + 'px)'; + + this._update(); + }, + _update: function () { + var bounds, zoom, scale; + var generatedData = { max: this._max, min: this._min, data: [] }; + + bounds = this._map.getBounds(); + zoom = this._map.getZoom(); + scale = Math.pow(2, zoom); + + if (this._data.length == 0) { + if (this._heatmap) { + this._heatmap.setData(generatedData); + } + return; + } + + + var latLngPoints = []; + var radiusMultiplier = this.cfg.scaleRadius ? scale : 1; + var localMax = 0; + var localMin = 0; + var valueField = this.cfg.valueField; + var len = this._data.length; + + while (len--) { + var entry = this._data[len]; + var value = entry[valueField]; + var latlng = entry.latlng; + + + // we don't wanna render points that are not even on the map ;-) + if (!bounds.contains(latlng)) { + continue; + } + // local max is the maximum within current bounds + localMax = Math.max(value, localMax); + localMin = Math.min(value, localMin); + + var point = this._map.latLngToContainerPoint(latlng); + var latlngPoint = { x: Math.round(point.x), y: Math.round(point.y) }; + latlngPoint[valueField] = value; + + var radius; + + if (entry.radius) { + radius = entry.radius * radiusMultiplier; + } else { + radius = (this.cfg.radius || 2) * radiusMultiplier; + } + latlngPoint.radius = radius; + latLngPoints.push(latlngPoint); + } + if (this.cfg.useLocalExtrema) { + generatedData.max = localMax; + generatedData.min = localMin; + } + + generatedData.data = latLngPoints; + + this._heatmap.setData(generatedData); + }, + setData: function (data) { + this._max = data.max || this._max; + this._min = data.min || this._min; + var latField = this.cfg.latField || 'lat'; + var lngField = this.cfg.lngField || 'lng'; + var valueField = this.cfg.valueField || 'value'; + + // transform data to latlngs + var data = data.data; + var len = data.length; + var d = []; + + while (len--) { + var entry = data[len]; + var latlng = new L.LatLng(entry[latField], entry[lngField]); + var dataObj = { latlng: latlng }; + dataObj[valueField] = entry[valueField]; + if (entry.radius) { + dataObj.radius = entry.radius; + } + d.push(dataObj); + } + this._data = d; + + this._draw(); + }, + // experimential... not ready. + addData: function (pointOrArray) { + if (pointOrArray.length > 0) { + var len = pointOrArray.length; + while (len--) { + this.addData(pointOrArray[len]); + } + } else { + var latField = this.cfg.latField || 'lat'; + var lngField = this.cfg.lngField || 'lng'; + var valueField = this.cfg.valueField || 'value'; + var entry = pointOrArray; + var latlng = new L.LatLng(entry[latField], entry[lngField]); + var dataObj = { latlng: latlng }; + + dataObj[valueField] = entry[valueField]; + this._max = Math.max(this._max, dataObj[valueField]); + this._min = Math.min(this._min, dataObj[valueField]); + + if (entry.radius) { + dataObj.radius = entry.radius; + } + this._data.push(dataObj); + this._draw(); + } + }, + _reset: function () { + this._origin = this._map.layerPointToLatLng(new L.Point(0, 0)); + + var size = this._map.getSize(); + if (this._width !== size.x || this._height !== size.y) { + this._width = size.x; + this._height = size.y; + + this._el.style.width = this._width + 'px'; + this._el.style.height = this._height + 'px'; + + this._heatmap._renderer.setDimensions(this._width, this._height); + } + this._draw(); + } + }); + + HeatmapOverlay.CSS_TRANSFORM = (function () { + var div = document.createElement('div'); + var props = [ + 'transform', + 'WebkitTransform', + 'MozTransform', + 'OTransform', + 'msTransform' + ]; + + for (var i = 0; i < props.length; i++) { + var prop = props[i]; + if (div.style[prop] !== undefined) { + return prop; + } + } + return props[0]; + })(); + + return HeatmapOverlay; +}); \ No newline at end of file diff --git a/src/utils/lib/leaflet.ChineseTmsProviders.js b/src/utils/lib/leaflet.ChineseTmsProviders.js new file mode 100644 index 0000000..73442dc --- /dev/null +++ b/src/utils/lib/leaflet.ChineseTmsProviders.js @@ -0,0 +1,221 @@ +// this L.CRS.Baidu from https://github.com/muyao1987/leaflet-tileLayer-baidugaode/blob/master/src/tileLayer.baidu.js + +if (L.Proj) { + L.CRS.Baidu = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs', { + resolutions: function () { + var level = 19 + var res = []; + res[0] = Math.pow(2, 18); + for (var i = 1; i < level; i++) { + res[i] = Math.pow(2, (18 - i)) + } + return res; + }(), + origin: [0, 0], + bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]) + }); +} + +L.TileLayer.ChinaProvider = L.TileLayer.extend({ + + initialize: function (type, options) { // (type, Object) + var providers = L.TileLayer.ChinaProvider.providers; + + options = options || {} + + var parts = type.split('.'); + + var providerName = parts[0]; + var mapName = parts[1]; + var mapType = parts[2]; + + var url = providers[providerName][mapName][mapType]; + options.subdomains = providers[providerName].Subdomains; + options.key = options.key || providers[providerName].key; + + if ('tms' in providers[providerName]) { + options.tms = providers[providerName]['tms'] + } + + L.TileLayer.prototype.initialize.call(this, url, options); + }, + + getTileUrl: function (coords) { + var data = { + s: this._getSubdomain(coords), + x: coords.x, + y: coords.y, + z: this._getZoomForUrl(), + }; + if (this._map && !this._map.options.crs.infinite) { + var invertedY = this._globalTileRange.max.y - coords.y; + if (this.options.tms) { + data['y'] = invertedY; + } + data['-y'] = invertedY; + } + + data.sx = data.x >> 4 + data.sy = ((1 << data.z) - data.y) >> 4 + + return L.Util.template(this._url, L.Util.extend(data, this.options)); + }, + + createTile: function (coords) { + // 创建一个用于绘图的 元素 + var tile = L.DomUtil.create('canvas', 'leaflet-tile'); + + // 根据选项设置瓦片的宽度和高度 + var size = this.getTileSize(); + tile.width = size.x; + tile.height = size.y; + + // 获得一个 canvas 上下文，并使用 coords.x、coords.y 和 coords.z 在上面画东西 + var ctx = tile.getContext('2d'); + + // 使用传入的 URL 模板替换变量 + var url = this._url + .replace('{s}', this._getSubdomain(coords)) + .replace('{x}', coords.x) + .replace('{y}', coords.y) + .replace('{z}', this._getZoomForUrl()); + + + // 创建一个图像对象来加载瓦片 + var img = new Image(); + + img.src = url; // 替换为你的图片路径 + img.setAttribute('crossOrigin', 'anonymous') + + /**获取外部接受的颜色*/ + var color = this.options.color; + + // 当图片加载完成后，绘制到 Canvas 上 + img.onload = function () { + // 绘制图片到 Canvas 上 + ctx.drawImage(img, 0, 0, tile.width, tile.height); + + if (color) { + + // 获取图像的像素数据 + var imageData = ctx.getImageData(0, 0, tile.width, tile.height); + // 获取原来的图片的像素颜色 + var pixels = imageData.data; + for (let i = 0; i < pixels.length; i += 4) { + const r = pixels[i], + g = pixels[i + 1], + b = pixels[i + 2], + a = pixels[i + 3]; + //计算灰度 + var grayVal = (r + g + b) / 3; + //灰度反转--会使图片整体变成灰色--方便上色 + grayVal = 255 - grayVal; + //将灰度替换掉原始的颜色 + pixels[i] = grayVal + color.r; + pixels[i + 1] = grayVal + color.g; + pixels[i + 2] = grayVal + color.b; + //设置一个前景透明度，以便和背景混合 + if (color.a) { + pixels[i + 3] = a * color.a; + } + } + // 将修改后的像素数据放回 Canvas + ctx.putImageData(imageData, 0, 0); + } + }; + // 返回瓦片，以便在屏幕上呈现 + return tile; + } +}); + +L.TileLayer.ChinaProvider.providers = { + TianDiTu: { + Normal: { + Map: "//t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}", + Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}" + }, + Satellite: { + Map: "//t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}", + Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}" + }, + Terrain: { + Map: "//t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}", + Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}" + }, + Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], + key: "174705aebfe31b79b3587279e211cb9a" + }, + + GaoDe: { + Normal: { + // Map: 'https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}' //高清 + Map: '//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' + }, + Satellite: { + Map: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', + Annotion: 'https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}' + }, + Subdomains: ["1", "2", "3", "4"] + }, + + Google: { + Normal: { + Map: "//www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}" + }, + Satellite: { + Map: "//www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}", + Annotion: "//www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}" + }, + Subdomains: [] + }, + + Geoq: { + Normal: { + Map: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", + PurplishBlue: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", + Gray: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}", + Warm: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}", + }, + Theme: { + Hydro: "//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}" + }, + Subdomains: [] + }, + + OSM: { + Normal: { + Map: "//{s}.tile.osm.org/{z}/{x}/{y}.png", + }, + Subdomains: ['a', 'b', 'c'] + }, + + Baidu: { + Normal: { + Map: '//online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1' + }, + Satellite: { + Map: '//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', + Annotion: '//online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020' + }, + Subdomains: '0123456789', + tms: true + }, + + Tencent: { + Normal: { + Map: "//rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={-y}&type=vector&styleid=3", + }, + Satellite: { + Map: "//p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg", + }, + Terrain: { + Map: "//p{s}.map.gtimg.com/demTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg" + }, + Subdomains: '0123', + } + +}; + +L.tileLayer.chinaProvider = function (type, options) { + return new L.TileLayer.ChinaProvider(type, options); +}; diff --git a/src/utils/lib/leaflet.mapCorrection.min.js b/src/utils/lib/leaflet.mapCorrection.min.js new file mode 100644 index 0000000..d3eb791 --- /dev/null +++ b/src/utils/lib/leaflet.mapCorrection.min.js @@ -0,0 +1,143 @@ +/* eslint-disable */ +L.CoordConver = function () { + function a(b, c) { + var d = + -100 + + 2 * b + + 3 * c + + 0.2 * c * c + + 0.1 * b * c + + 0.2 * Math.sqrt(Math.abs(b)), + d = d + (2 * (20 * Math.sin(6 * b * e) + 20 * Math.sin(2 * b * e))) / 3, + d = d + (2 * (20 * Math.sin(c * e) + 40 * Math.sin((c / 3) * e))) / 3 + return (d += + (2 * (160 * Math.sin((c / 12) * e) + 320 * Math.sin((c * e) / 30))) / 3) + } + function f(b, c) { + var d = + 300 + + b + + 2 * c + + 0.1 * b * b + + 0.1 * b * c + + 0.1 * Math.sqrt(Math.abs(b)), + d = d + (2 * (20 * Math.sin(6 * b * e) + 20 * Math.sin(2 * b * e))) / 3, + d = d + (2 * (20 * Math.sin(b * e) + 40 * Math.sin((b / 3) * e))) / 3 + return (d += + (2 * (150 * Math.sin((b / 12) * e) + 300 * Math.sin((b / 30) * e))) / 3) + } + this.getCorrdType = function (b) { + var c = 'wgs84' + switch (b.split('.')[0]) { + case 'Geoq': + case 'GaoDe': + case 'Google': + c = 'gcj02' + break + case 'Baidu': + c = 'bd09' + break + case 'OSM': + case 'TianDiTu': + c = 'wgs84' + } + return c + } + this.bd09_To_gps84 = function (b, c) { + var d = this.bd09_To_gcj02(b, c) + return this.gcj02_To_gps84(d.lng, d.lat) + } + this.gps84_To_bd09 = function (b, c) { + var d = this.gps84_To_gcj02(b, c) + return this.gcj02_To_bd09(d.lng, d.lat) + } + this.gps84_To_gcj02 = function (b, c) { + var d = a(b - 105, c - 35), + k = f(b - 105, c - 35), + l = (c / 180) * e, + g = Math.sin(l), + g = 1 - n * g * g, + m = Math.sqrt(g), + d = (180 * d) / (((h * (1 - n)) / (g * m)) * e), + k = (180 * k) / ((h / m) * Math.cos(l) * e) + return { lng: b + k, lat: c + d } + } + this.gcj02_To_gps84 = function (b, c) { + var d = a(b - 105, c - 35), + k = f(b - 105, c - 35), + l = (c / 180) * e, + g = Math.sin(l), + g = 1 - n * g * g, + m = Math.sqrt(g), + d = (180 * d) / (((h * (1 - n)) / (g * m)) * e), + k = (180 * k) / ((h / m) * Math.cos(l) * e) + return { lng: 2 * b - (b + k), lat: 2 * c - (c + d) } + } + this.gcj02_To_bd09 = function (b, c) { + var d = Math.sqrt(b * b + c * c) + 2e-5 * Math.sin(c * p), + a = Math.atan2(c, b) + 3e-6 * Math.cos(b * p) + return { lng: d * Math.cos(a) + 0.0065, lat: d * Math.sin(a) + 0.006 } + } + this.bd09_To_gcj02 = function (b, c) { + var d = b - 0.0065, + a = c - 0.006, + e = Math.sqrt(d * d + a * a) - 2e-5 * Math.sin(a * p), + d = Math.atan2(a, d) - 3e-6 * Math.cos(d * p) + return { lng: e * Math.cos(d), lat: e * Math.sin(d) } + } + var e = 3.141592653589793, + h = 6378245, + n = 0.006693421622965943, + p = (3e3 * e) / 180 +} +L.coordConver = function () { + return new L.CoordConver() +} +L.TileLayer.ChinaProvider.include({ + addTo: function (a) { + a.options.corrdType || (a.options.corrdType = this.options.corrdType) + a.addLayer(this) + return this + }, +}) +L.tileLayer.chinaProvider = function (a, f) { + f = f || {} + f.corrdType = L.coordConver().getCorrdType(a) + return new L.TileLayer.ChinaProvider(a, f) +} +L.GridLayer.include({ + _setZoomTransform: function (a, f, e) { + var h = f + void 0 != h && + this.options && + ('gcj02' == this.options.corrdType + ? (h = L.coordConver().gps84_To_gcj02(f.lng, f.lat)) + : 'bd09' == this.options.corrdType && + (h = L.coordConver().gps84_To_bd09(f.lng, f.lat))) + f = this._map.getZoomScale(e, a.zoom) + e = a.origin + .multiplyBy(f) + .subtract(this._map._getNewPixelOrigin(h, e)) + .round() + L.Browser.any3d + ? L.DomUtil.setTransform(a.el, e, f) + : L.DomUtil.setPosition(a.el, e) + }, + _getTiledPixelBounds: function (a) { + var f = a + void 0 != f && + this.options && + ('gcj02' == this.options.corrdType + ? (f = L.coordConver().gps84_To_gcj02(a.lng, a.lat)) + : 'bd09' == this.options.corrdType && + (f = L.coordConver().gps84_To_bd09(a.lng, a.lat))) + a = this._map + var e = a._animatingZoom + ? Math.max(a._animateToZoom, a.getZoom()) + : a.getZoom(), + e = a.getZoomScale(e, this._tileZoom), + f = a.project(f, this._tileZoom).floor() + a = a.getSize().divideBy(2 * e) + return new L.Bounds(f.subtract(a), f.add(a)) + }, +}) diff --git a/src/utils/lib/leaflet.polygon.gradient.js b/src/utils/lib/leaflet.polygon.gradient.js new file mode 100644 index 0000000..4c2db1f --- /dev/null +++ b/src/utils/lib/leaflet.polygon.gradient.js @@ -0,0 +1,335 @@ +/* eslint-disable */ +(function (factory, window) { + + // define an AMD module that relies on 'leaflet' + if (typeof define === 'function' && define.amd) { + define(['leaflet'], factory); + + // define a Common JS module that relies on 'leaflet' + } else if (typeof exports === 'object') { + module.exports = factory(require('leaflet')); + } + + // attach your plugin to the global 'L' letiable + if (typeof window !== 'undefined' && window.L) { + window.L.ArrowPath = factory(L); + } +}(function (L) { + + L.SVG.include({ + _updateStyle: function (layer) { + + let path = layer._path, + options = layer.options; + + if (!path) { + return; + } + + if (options.stroke) { + path.setAttribute('stroke', options.color); + path.setAttribute('stroke-opacity', options.opacity); + path.setAttribute('stroke-width', options.weight); + path.setAttribute('stroke-linecap', options.lineCap); + path.setAttribute('stroke-linejoin', options.lineJoin); + + if (options.dashArray) { + path.setAttribute('stroke-dasharray', options.dashArray); + } else { + path.removeAttribute('stroke-dasharray'); + } + + if (options.dashOffset) { + path.setAttribute('stroke-dashoffset', options.dashOffset); + } else { + path.removeAttribute('stroke-dashoffset'); + } + } else { + path.setAttribute('stroke', 'none'); + } + + if (options.fill) { + this._polyFill(layer, path, options); + path.setAttribute('fill-opacity', options.fillOpacity); + path.setAttribute('fill-rule', options.fillRule || 'evenodd'); + } else { + path.setAttribute('fill', 'none'); + } + }, + _polyFill(layer, path, options) { + let fillColor = options.fillColor; + let isLinearGradient = fillColor.match(/^linearGradient\(/); + let isRadialGradient = fillColor.match(/^radialGradient\(/); + + if (fillColor.match(/^#/)) { + path.setAttribute('fill', fillColor || options.color); + } else if (isLinearGradient || isRadialGradient) { + let gradientOpt = this._addGradient(fillColor); + if (isLinearGradient) { + this._addLinearGradient(layer, gradientOpt); + } else { + this._addRadialGradient(layer, gradientOpt); + } + } else if (fillColor.match(/^url\(/)) { + this._fillByImage(layer); + } + }, + _addLinearGradient: function (layer, gradientOpt) { + let path = layer._path; + let colorStr = layer.options.fillColor; + let gradientId = 'gradient' + gradientOpt.index; + + this._addDefs(); + + if (!gradientOpt.exist) { + let gradient = L.SVG.create('linearGradient'); + gradient.setAttribute('id', gradientId); + + let arrMap = this._getLinearProperties(colorStr, ['linearGradient(', ')']); + this._addStops(gradient, arrMap); + + this._addAngle(gradient, arrMap.angle); + + this._defs.appendChild(gradient); + } + + path.setAttribute('fill', 'url(#' + gradientId + ')'); + }, + _addRadialGradient: function (layer, gradientOpt) { + let path = layer._path; + let colorStr = layer.options.fillColor; + let gradientId = 'gradient' + gradientOpt.index; + + this._addDefs(); + + if (!gradientOpt.exist) { + let gradient = L.SVG.create('radialGradient'); + gradient.setAttribute('id', gradientId); + + let arrMap = this._getRadialProperties(colorStr, ['radialGradient(', ')']); + this._addStops(gradient, arrMap); + + this._addAttribute(gradient, arrMap); + // + this._defs.appendChild(gradient); + } + + path.setAttribute('fill', 'url(#' + gradientId + ')'); + }, + _addAttribute(gradient, arr) { + gradient.setAttribute('cx', arr.cx); + gradient.setAttribute('cy', arr.cy); + gradient.setAttribute('r', arr.r); + gradient.setAttribute('fx', arr.fx); + gradient.setAttribute('fy', arr.fy); + }, + + _getRadialProperties(colorStr, replaceArr) { + let string = colorStr; + for (let i = 0, l = replaceArr.length; i < l; i++) { + let str = replaceArr[i]; + string = string.replace(str, ''); + } + let arrays = string.split(/[\,]+/); + let colorArr = arrays.slice(5); + let resColors = []; + let resOffsets = []; + let offsetNum = 0; + for (let i = 0, l = colorArr.length; i < l; i++) { + let str = colorArr[i]; + let opts = str.trim().split(/\s+/); + resColors.push(opts[0]); + if (opts.length > 1 || i === l - 1) { + let offset; + if (opts.length > 1) { + offset = parseFloat(opts[1]); + } else { + offset = 100; + } + + let len = resOffsets.length; + if (offsetNum > 0) { + let startNum = len - offsetNum - 1; + let startVal = parseFloat(resOffsets[startNum]); + let step = (offset - startVal) / (offsetNum + 1); + for (let j = 1; j <= offsetNum; j++) { + resOffsets[startNum + j] = startVal + step * j + '%'; + } + offsetNum = 0; + } + resOffsets.push(offset + '%'); + } else { + if (i !== 0) { + offsetNum = offsetNum + 1; + resOffsets.push(''); + } else { + resOffsets.push('0%'); + } + } + } + return { + cx: arrays[0].trim(), + cy: arrays[1].trim(), + r: arrays[2].trim(), + fx: arrays[3].trim(), + fy: arrays[4].trim(), + colors: resColors, + offsets: resOffsets + } + }, + _addGradient(gradient) { + if (!this._gradientArray) { + this._gradientArray = []; + } + let gradientStr = gradient.split(/[\s\,\-\(\)]+/).join(''); + let index = this._gradientArray.indexOf(gradientStr); + if (index > -1) { + return { index: index, exist: true } + } + this._gradientArray.push(gradientStr); + return { index: this._gradientArray.length - 1, exist: false } + }, + _addDefs() { + if (!this._defs) { + this._defs = L.SVG.create('defs'); + this._container.appendChild(this._defs); + } + }, + _addAngle(gradient, angle) { + gradient.setAttribute('x1', '0'); + gradient.setAttribute('y1', '0'); + gradient.setAttribute('x2', '1'); + gradient.setAttribute('y2', '0'); + gradient.setAttribute('gradientTransform', 'rotate(' + angle.replace('deg', '') + ')'); + }, + _addStops(gradient, options) { + let colors = options.colors; + let offsets = options.offsets; + for (let i = 0, len = colors.length; i < len; i++) { + let stop = L.SVG.create('stop'); + stop.setAttribute('offset', offsets[i]); + stop.setAttribute('stop-color', colors[i]); + gradient.appendChild(stop); + } + }, + _getLinearProperties(colorStr, replaceArr) { + let string = colorStr; + for (let i = 0, l = replaceArr.length; i < l; i++) { + let str = replaceArr[i]; + string = string.replace(str, ''); + } + let arrays = string.split(/[\,]+/); + let colorArr = arrays.slice(1); + let resAngle = arrays[0].trim(); + let resColors = []; + let resOffsets = []; + let offsetNum = 0; + for (let i = 0, l = colorArr.length; i < l; i++) { + let str = colorArr[i]; + let opts = str.trim().split(/\s+/); + resColors.push(opts[0]); + if (opts.length > 1 || i === l - 1) { + let offset; + if (opts.length > 1) { + offset = parseFloat(opts[1]); + } else { + offset = 100; + } + + let len = resOffsets.length; + if (offsetNum > 0) { + let startNum = len - offsetNum - 1; + let startVal = parseFloat(resOffsets[startNum]); + let step = (offset - startVal) / (offsetNum + 1); + for (let j = 1; j <= offsetNum; j++) { + resOffsets[startNum + j] = startVal + step * j + '%'; + } + offsetNum = 0; + } + resOffsets.push(offset + '%'); + } else { + if (i !== 0) { + offsetNum = offsetNum + 1; + resOffsets.push(''); + } else { + resOffsets.push('0%'); + } + } + } + return { + angle: resAngle, + colors: resColors, + offsets: resOffsets + } + }, + + //借鉴自插件leaflet-polygon-fillPattern + _fillByImage: function (layer) { + let path = layer._path, + options = layer.options, + fill = options.fillColor; + this._addDefs(); + + let _img_url = fill.replace(/url\(+/, '').replace(/\)+/, '');/*.substring(4, fill.length - 1)*/ + let _refOption = this._addRefId(_img_url); + let _ref_id = _img_url + _refOption.index; + if (!_refOption.exist) { + this._addPattern(_img_url, _ref_id, options); + } + path.setAttribute('fill', "url(#" + _ref_id + ")"); + }, + _addRefId(url) { + if (!this._imgUrls) { + this._imgUrls = []; + } + let index = this._imgUrls.indexOf(url); + if (index > -1) { + return { index: index, exist: true } + } + this._imgUrls.push(url); + return { index: this._imgUrls.length - 1, exist: false } + }, + _addPattern(_img_url, _ref_id, options) { + let _im = new Image(); + _im.src = _img_url; + + let _p = L.SVG.create('pattern'); + _p.setAttribute('id', _ref_id); + _p.setAttribute('x', '0'); + _p.setAttribute('y', '0'); + _p.setAttribute('patternUnits', 'userSpaceOnUse'); + _p.setAttribute('width', '24'); + _p.setAttribute('height', '24'); + + let _rect = L.SVG.create('rect'); + _rect.setAttribute('width', 24); + _rect.setAttribute('height', 24); + _rect.setAttribute('x', 0); + _rect.setAttribute('x', 0); + _rect.setAttribute('fill', options.fillColor || options.color); + + let _img = L.SVG.create('image'); + _img.setAttribute('x', '0'); + _img.setAttribute('y', '0'); + _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _img_url); + _img.setAttribute('width', '24'); + _img.setAttribute('height', '24'); + + _p.appendChild(_rect); + _p.appendChild(_img); + + this._defs.appendChild(_p); + + _im.onload = function () { + _p.setAttribute('width', _im.width); + _p.setAttribute('height', _im.height); + _img.setAttribute('width', _im.width); + _img.setAttribute('height', _im.height); + }; + } + + }) + +}, window)); + + diff --git a/src/views/warningManage/warningAppear.vue b/src/views/warningManage/warningAppear.vue index ef5ea6f..9c862bd 100644 --- a/src/views/warningManage/warningAppear.vue +++ b/src/views/warningManage/warningAppear.vue @@ -1,28 +1,37 @@ +