From 6ffa578934b471302ed9ced5d1813003f8c23cc5 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期四, 04 三月 2021 11:56:11 +0800
Subject: [PATCH] 修改管网先tooltip样式
---
src/views/MapTemplate.vue | 3 +
src/components/panel/LegendPanel.vue | 33 ++++++++++++++++
src/components/helpers/ServiceLayerHelper.js | 67 ++++++++++++++++++++++++---------
src/Sgis.js | 2 +
4 files changed, 86 insertions(+), 19 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index 6ae1b0a..22380e4 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -9,6 +9,7 @@
import MapConfig from '@/conf/MapConfig'
import DashFlow from '@components/plugin/PathDashFlow'
+import CanvasMarkers from '@components/plugin/CanvasMarkers'
let map = null
const L = window.L
const initMap = (div) => {
@@ -23,6 +24,7 @@
WmtsSupport.init(L) // 鎵╁睍锛屼娇鏀寔WMTS
// CustomPopup.init(L) // 鑷畾涔夊脊鍑烘
DashFlow.DashFlow(L) // 娴佸姩绾垮浘
+ CanvasMarkers.init(L)// 鐢诲竷鍥惧眰
// Leaflet鎵╁睍浠ｇ爜
map = L.map(div, MapConfig.mapOptions)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 83e8a86..ece5e5d 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -72,10 +72,10 @@
}
/**
- * 璇锋眰wfs鏁版嵁
- * @param url
- * @param item
- */
+ * 璇锋眰wfs鏁版嵁
+ * @param url
+ * @param item
+ */
loadGeojsonLayer (url, item) {
var matches = this.regex.exec(url)
var matchValue = item[matches[1]]
@@ -92,9 +92,9 @@
}
/**
- * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず
- * @param res
- */
+ * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず
+ * @param res
+ */
loadGeojson (res, opt) {
var that = this
var icon = opt.icon
@@ -115,7 +115,6 @@
pointToLayer: function (geoJsonPoint, latlng) {
return that.L.canvasMarker(latlng,
{
- radius: 20,
img: {
// url: 'assets/images/map/marker-icon.png',
url: '/assets/images/map/' + icon,
@@ -132,17 +131,47 @@
minWidth: 300,
closeButton: false,
autoClose: false
- }).bindTooltip(function (layer) {
- console.log(layer)
- return layer.feature.properties.name
- }).on('mouseover', function (e) {
- console.log(e)
- var layer = e.layer
- layer.setStyle({ weight: 8, color: '#00ffff' })
- }).on('mouseout', function (e) {
- var layer = e.layer
- layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
- }).addTo(featureGroup).tooltip()
+ })
+ .bindTooltip(function (layer) {
+ const nameId = layer.feature.id
+ let name = ''
+ if (nameId.indexOf('涓夐��') !== -1 || nameId.indexOf('鍥涢��') !== -1) {
+ name = layer.feature.properties.pointnumber
+ } else {
+ name = layer.feature.properties.name
+ }
+ return name
+ })
+ .on('mouseover', function (e) {
+ const layer = e.layer
+ const type = e.layer.feature.geometry.type
+ if (type === 'LineString' || type === 'MultiLineString') {
+ layer.setStyle({ weight: 8, color: '#00ffff' })
+ } else if (type === 'Point' || type === 'MultiPoint') {
+ layer.setStyle({
+ img: {
+ url: '/assets/images/map/' + icon,
+ size: [25, 25]
+ }
+ })
+
+ layer.bringToFront()
+ }
+ }).on('mouseout', function (e) {
+ const layer = e.layer
+ const type = e.layer.feature.geometry.type
+ if (type === 'LineString' || type === 'MultiLineString') {
+ layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
+ }
+ if (type === 'Point' || type === 'MultiPoint') {
+ layer.setStyle({
+ img: {
+ url: '/assets/images/map/' + icon,
+ size: styles.defaultLineStyle.size
+ }
+ })
+ }
+ }).addTo(featureGroup)
if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
geojson.bringToBack()
} else {
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
new file mode 100644
index 0000000..17431e4
--- /dev/null
+++ b/src/components/panel/LegendPanel.vue
@@ -0,0 +1,33 @@
+<template>
+<div class="legend-panel">
+
+ <div class="legend-icon unactive">
+
+ <i class="el-icon-more-outline"></i>
+ <span >鍥句緥</span>
+ </div>
+</div>
+</template>
+
+<script>
+export default {
+ name: 'LegendPanel'
+}
+</script>
+
+<style lang="less" scoped>
+
+.legend-panel{
+ position: absolute;
+ z-index: 502;
+ bottom: .11979rem;
+ right: .14583rem;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+}
+
+</style>
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index ab4cb1e..a1c32db 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -12,6 +12,7 @@
<!-- <top-enterprise-panel></top-enterprise-panel>-->
<tool-box-panel></tool-box-panel>
<menu-special></menu-special>
+ <legend-panel></legend-panel>
</div>
</template>
@@ -27,10 +28,12 @@
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
import MenuSpecial from '@components/panel/MenuTopic'
+import LegendPanel from '@components/panel/LegendPanel'
export default {
name: 'MapTemplate',
components: {
+ LegendPanel,
MenuSpecial,
ToolBoxPanel,
// TopEnterprisePanel,
--
Gitblit v1.8.0