From 59af55dc3e72f8f2655ae06af9d1b6f766bac423 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 20 三月 2026 16:02:19 +0800
Subject: [PATCH] 2026.3.20
---
src/utils/map/marks.js | 699 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 611 insertions(+), 88 deletions(-)
diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js
index 05137fd..4ad5074 100644
--- a/src/utils/map/marks.js
+++ b/src/utils/map/marks.js
@@ -2,82 +2,605 @@
* 楂樺痉鍦板浘鐐规爣璁扮粯鍒剁浉鍏�
*/
-import { map, AMap } from './index';
-import { useToolboxStore } from '@/stores/toolbox';
+import { map, AMap } from './index'
+import { useToolboxStore } from '@/stores/toolbox'
+import util from './util'
+import * as echarts from 'echarts'
+import exceedIcon from '@/assets/exceed.png'
+import exceptionIcon from '@/assets/exception.png'
+import offlineIcon from '@/assets/offline.png'
-const toolboxStore = useToolboxStore();
+const toolboxStore = useToolboxStore()
-var _massMarks = undefined;
+var _massMarks = undefined
+
+// 鐘舵�佸浘鏍囬厤缃�
+const statusIcons = {
+ exceed: exceedIcon, // 娌圭儫娴撳害瓒呮爣
+ exception: exceptionIcon, // 渚涚數寮傚父
+ offline: offlineIcon, // 璁惧鎴栫綉缁滃紓甯�
+ online: createCustomMarkerOnline(), // 鍦ㄧ嚎鐘舵��
+ offlineStatus: createCustomMarkerOffline(), // 绂荤嚎鐘舵��
+}
+
+/**
+ * 缁樺埗娴烽噺鐐规爣璁�
+ * @param {Array} shops 搴楅摵瀵硅薄鏁扮粍
+ * @param {Object} shops[].shop 搴楅摵鍩烘湰淇℃伅
+ * @param {string} shops[].shop.name 搴楅摵鍚嶇О
+ * @param {string} shops[].shop.address 搴楅摵鍦板潃
+ * @param {number} shops[].shop.latitude 绾害
+ * @param {number} shops[].shop.longitude 缁忓害
+ * @param {string} shops[].shop.ringCodeLevel 鏈�鏂扮幆淇＄爜绛夌骇
+ * @param {string} shops[].shop.ringCodePublishTime 鏈�鏂扮幆淇＄爜鍙戝竷鏃堕棿
+ * @param {boolean} shops[].shop.isOnline 鍦ㄧ嚎鐘舵��
+ * @param {number} shops[].shop.exceptionStatus 寮傚父鐘舵�侊紙0: 娌圭儫娴撳害瓒呮爣, 1: 渚涚數寮傚父, 2: 璁惧鎴栫綉缁滃紓甯�, 3: 鏃犲紓甯革級
+ * @param {Array} shops[].recentData 杩�1灏忔椂鐨勭洃娴嬫暟鎹�
+ * @param {string} shops[].recentData[].sampleTime 鏁版嵁閲囨牱鏃堕棿
+ * @param {number} shops[].recentData[].oilSmokeConcentration 娌圭儫娴撳害
+ * @param {number} shops[].recentData[].purifierCurrent 鍑�鍖栧櫒鐢垫祦
+ * @param {number} shops[].recentData[].fanCurrent 椋庢満鐢垫祦
+ */
+function drawMassMarks(shops) {
+ // 閰嶇疆鏍峰紡
+ const massMarksStyle = [
+ {
+ url: statusIcons.exceed,
+ size: new AMap.Size(20, 20),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.exception,
+ size: new AMap.Size(20, 20),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.offline,
+ size: new AMap.Size(20, 20),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.online,
+ size: new AMap.Size(32, 32),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ {
+ url: statusIcons.offlineStatus,
+ size: new AMap.Size(32, 32),
+ anchor: new AMap.Pixel(10, 10),
+ },
+ ]
+ // 鍑嗗娴烽噺鐐规暟鎹�
+ const massMarksData = shops.map((shop, index) => {
+ // 鏍规嵁寮傚父鐘舵�佸拰鍦ㄧ嚎鐘舵�佽幏鍙栨牱寮忕储寮�
+ let styleIndex = 3 // 榛樿鍦ㄧ嚎鐘舵��
+
+ if (shop.shop.exceptionStatus !== undefined) {
+ switch (shop.shop.exceptionStatus) {
+ case 0: // 娌圭儫娴撳害瓒呮爣
+ styleIndex = 0
+ break
+ case 1: // 渚涚數寮傚父
+ styleIndex = 1
+ break
+ case 2: // 璁惧鎴栫綉缁滃紓甯�
+ styleIndex = 2
+ break
+ case 3: // 鏃犲紓甯革紝鏍规嵁鍦ㄧ嚎鐘舵�佸喅瀹�
+ styleIndex = shop.shop.isOnline ? 3 : 4
+ break
+ default:
+ styleIndex = shop.shop.isOnline ? 3 : 4
+ }
+ } else {
+ // 娌℃湁寮傚父鐘舵�佹椂锛屾牴鎹湪绾跨姸鎬佸喅瀹�
+ styleIndex = shop.shop.isOnline ? 3 : 4
+ }
+
+ return {
+ id: index,
+ name: shop.shop.name,
+ lnglat: [shop.shop.longitude, shop.shop.latitude],
+ style: styleIndex, // 鏍峰紡绱㈠紩锛屽搴� massMarksStyle
+ extData: shop, // 瀛樺偍瀹屾暣鐨勫簵閾轰俊鎭�
+ }
+ })
+
+ // 娓呴櫎鐜版湁鐨勬捣閲忕偣鏍囪
+ if (window.massMarks) {
+ window.massMarks.clear()
+ }
+
+ // 鍒涘缓鏂扮殑娴烽噺鐐规爣璁�
+ window.massMarks = new AMap.MassMarks(massMarksData, {
+ zIndex: 111,
+ cursor: 'pointer',
+ style: massMarksStyle,
+ })
+
+ // 娣诲姞鐐瑰嚮浜嬩欢
+ window.massMarks.on('click', function (e) {
+ const shop = e.data.extData
+ showShopInfoWindow(shop)
+ })
+
+ var marker = new AMap.Marker({
+ content: ' ',
+ map: map,
+ offset: new AMap.Pixel(13, 12),
+ })
+
+ var timeout
+ window.massMarks.on('mouseover', (e) => {
+ if (timeout) {
+ clearTimeout(timeout)
+ }
+ marker.setPosition(e.data.lnglat)
+ marker.setLabel({ content: e.data.name })
+ map.add(marker)
+ timeout = setTimeout(() => {
+ map.remove(marker)
+ }, 2000)
+ })
+
+ // 娣诲姞鍒板湴鍥�
+ window.massMarks.setMap(map)
+ util.setBound(massMarksData.map((item) => item.lnglat))
+}
+
+/**
+ * 鏍规嵁鐜俊鐮佺瓑绾ц幏鍙栭鑹�
+ * @param {string} level 鐜俊鐮佺瓑绾�
+ * @returns {string} 棰滆壊鍊�
+ */
+function getColorByRingCodeLevel(level) {
+ switch (level + '') {
+ case '0':
+ return '#52c41a' // 缁胯壊
+ case '1':
+ return '#faad14' // 榛勮壊
+ case '2':
+ return '#f5222d' // 绾㈣壊
+ default:
+ return '#8c8c8c' // 鐏拌壊
+ }
+}
+
+/**
+ * 鏍规嵁鐜俊鐮佺瓑绾ц幏鍙栦腑鏂�
+ * @param {string} level 鐜俊鐮佺瓑绾�
+ * @returns {string} 涓枃琛ㄧず
+ */
+function getRingCodeLevelText(level) {
+ switch (level + '') {
+ case '0':
+ return '缁胯壊'
+ case '1':
+ return '榛勮壊'
+ case '2':
+ return '绾㈣壊'
+ default:
+ return '鏈煡'
+ }
+}
+
+/**
+ * 鏍规嵁寮傚父鐘舵�佽幏鍙栦腑鏂�
+ * @param {number} status 寮傚父鐘舵��
+ * @returns {string} 涓枃琛ㄧず
+ */
+function getExceptionStatusText(status) {
+ switch (status + '') {
+ case '0':
+ return '娌圭儫娴撳害瓒呮爣'
+ case '1':
+ return '渚涚數寮傚父'
+ case '2':
+ return '璁惧鎴栫綉缁滃紓甯�'
+ case '3':
+ return '鏃犲紓甯�'
+ default:
+ return '鏈煡鐘舵��'
+ }
+}
+
+/**
+ * 鏍规嵁寮傚父鐘舵�佽幏鍙栭鑹�
+ * @param {number} status 寮傚父鐘舵��
+ * @returns {string} 棰滆壊鍊�
+ */
+function getColorByExceptionStatus(status) {
+ switch (status + '') {
+ case '0':
+ return '#f5222d' // 娌圭儫娴撳害瓒呮爣 - 绾㈣壊
+ case '1':
+ return '#faad14' // 渚涚數寮傚父 - 榛勮壊
+ case '2':
+ return '#8c8c8c' // 璁惧鎴栫綉缁滃紓甯� - 鐏拌壊
+ case '3':
+ return '#52c41a' // 鏃犲紓甯� - 缁胯壊
+ default:
+ return '#8c8c8c' // 鐏拌壊
+ }
+}
+
+/**
+ * 鍒涘缓鑷畾涔夋爣璁�
+ * @param {string} color 鏍囪棰滆壊
+ * @returns {string} 鏍囪鐨凷VG URL
+ */
+function createCustomMarker(color) {
+ const svg = `
+ <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="10" cy="10" r="8" fill="${color}" stroke="white" stroke-width="2"/>
+ <circle cx="10" cy="10" r="3" fill="white"/>
+ </svg>
+ `
+ return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
+}
+
+/**
+ * 鍒涘缓鍦ㄧ嚎鐘舵�佺殑SVG鏍囪锛堟补鐑熺洃娴嬭澶囧舰璞★級
+ * @returns {string} 鏍囪鐨凷VG URL
+ */
+function createCustomMarkerOnline() {
+ const svg = `
+ <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+ <!-- 璁惧涓讳綋 - 鍦嗚鐭╁舰 -->
+ <rect x="5" y="8" width="22" height="16" rx="3" fill="#52c41a" stroke="white" stroke-width="2"/>
+
+ <!-- 璁惧椤堕儴 - 寮у舰 -->
+ <path d="M5 8 Q16 3 27 8" stroke="white" stroke-width="2" fill="#389e0d"/>
+
+ <!-- 璁惧搴曢儴 - 寮у舰 -->
+ <path d="M5 24 Q16 29 27 24" stroke="white" stroke-width="2" fill="#389e0d"/>
+
+ <!-- 璁惧鏄剧ず灞� -->
+ <rect x="8" y="11" width="16" height="10" rx="2" fill="white"/>
+
+ <!-- 鏄剧ず灞忔暟鎹� -->
+ <path d="M11 14 L21 14" stroke="#52c41a" stroke-width="1.5"/>
+ <path d="M11 17 L18 17" stroke="#52c41a" stroke-width="1.5"/>
+ <path d="M11 20 L15 20" stroke="#52c41a" stroke-width="1.5"/>
+
+ <!-- 璁惧澶╃嚎 -->
+ <line x1="16" y1="8" x2="16" y2="3" stroke="white" stroke-width="1.5"/>
+ <circle cx="16" cy="3" r="1.5" fill="white"/>
+
+ <!-- 璁惧鎸囩ず鐏� -->
+ <circle cx="27" cy="16" r="3" fill="#ffffff"/>
+ <circle cx="27" cy="16" r="1.5" fill="#52c41a"/>
+
+ <!-- 瑁呴グ绾挎潯 -->
+ <line x1="5" y1="13" x2="6" y2="13" stroke="white" stroke-width="1.5"/>
+ <line x1="5" y1="19" x2="6" y2="19" stroke="white" stroke-width="1.5"/>
+ </svg>
+ `
+ return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
+}
+
+/**
+ * 鍒涘缓绂荤嚎鐘舵�佺殑SVG鏍囪锛堟补鐑熺洃娴嬭澶囧舰璞★級
+ * @returns {string} 鏍囪鐨凷VG URL
+ */
+function createCustomMarkerOffline() {
+ const svg = `
+ <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+ <!-- 璁惧涓讳綋 - 鍦嗚鐭╁舰 -->
+ <rect x="5" y="8" width="22" height="16" rx="3" fill="#8c8c8c" stroke="white" stroke-width="2"/>
+
+ <!-- 璁惧椤堕儴 - 寮у舰 -->
+ <path d="M5 8 Q16 3 27 8" stroke="white" stroke-width="2" fill="#666666"/>
+
+ <!-- 璁惧搴曢儴 - 寮у舰 -->
+ <path d="M5 24 Q16 29 27 24" stroke="white" stroke-width="2" fill="#666666"/>
+
+ <!-- 璁惧鏄剧ず灞� -->
+ <rect x="8" y="11" width="16" height="10" rx="2" fill="white"/>
+
+ <!-- 鏄剧ず灞忔棤鏁版嵁 - 浜ゅ弶绾� -->
+ <line x1="11" y1="12" x2="21" y2="22" stroke="#8c8c8c" stroke-width="2"/>
+ <line x1="11" y1="22" x2="21" y2="12" stroke="#8c8c8c" stroke-width="2"/>
+
+ <!-- 璁惧澶╃嚎 -->
+ <line x1="16" y1="8" x2="16" y2="3" stroke="white" stroke-width="1.5"/>
+ <circle cx="16" cy="3" r="1.5" fill="white"/>
+
+ <!-- 璁惧鎸囩ず鐏� -->
+ <circle cx="27" cy="16" r="3" fill="#ffffff"/>
+ <circle cx="27" cy="16" r="1.5" fill="#8c8c8c"/>
+
+ <!-- 瑁呴グ绾挎潯 -->
+ <line x1="5" y1="13" x2="6" y2="13" stroke="white" stroke-width="1.5"/>
+ <line x1="5" y1="19" x2="6" y2="19" stroke="white" stroke-width="1.5"/>
+ </svg>
+ `
+ return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
+}
+
+/**
+ * 鏄剧ず搴楅摵淇℃伅绐楀彛
+ * @param {Object} shop 搴楅摵瀵硅薄
+ */
+function showShopInfoWindow(shop) {
+ // 鍑嗗淇℃伅绐楀彛鍐呭
+ // 鑾峰彇鍦ㄧ嚎鐘舵�佹枃鏈�
+ const onlineStatusText = shop.shop.isOnline ? '鍦ㄧ嚎' : '绂荤嚎'
+ // 鑾峰彇寮傚父鐘舵�佹枃鏈�
+ const exceptionStatusText = getExceptionStatusText(shop.shop.exceptionStatus)
+ // 鑾峰彇寮傚父鐘舵�侀鑹�
+ const exceptionStatusColor = getColorByExceptionStatus(shop.shop.exceptionStatus)
+
+ // 鏍规嵁鐘舵�佽幏鍙栧搴旂殑鍥炬爣
+ let statusIcon = statusIcons.online // 榛樿鍦ㄧ嚎鍥炬爣
+ if (shop.shop.exceptionStatus !== undefined) {
+ switch (shop.shop.exceptionStatus) {
+ case 0:
+ statusIcon = statusIcons.exceed
+ break
+ case 1:
+ statusIcon = statusIcons.exception
+ break
+ case 2:
+ statusIcon = statusIcons.offline
+ break
+ case 3:
+ statusIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+ break
+ default:
+ statusIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+ }
+ } else {
+ statusIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+ }
+
+ // 鏍规嵁鍦ㄧ嚎鐘舵�佽幏鍙栧浘鏍�
+ const onlineIcon = shop.shop.isOnline ? statusIcons.online : statusIcons.offlineStatus
+
+ // 鏍规嵁寮傚父鐘舵�佽幏鍙栧浘鏍�
+ let exceptionIcon = statusIcons.online // 榛樿鍦ㄧ嚎鍥炬爣
+ if (shop.shop.exceptionStatus !== undefined) {
+ switch (shop.shop.exceptionStatus) {
+ case 0:
+ exceptionIcon = statusIcons.exceed
+ break
+ case 1:
+ exceptionIcon = statusIcons.exception
+ break
+ case 2:
+ exceptionIcon = statusIcons.offline
+ break
+ case 3:
+ exceptionIcon = statusIcons.online
+ break
+ default:
+ exceptionIcon = statusIcons.online
+ }
+ }
+
+ const content = `
+ <div style="padding: 10px; width: 400px;">
+ <h3 style="margin: 0 0 10px 0; color: #333;">${shop.shop.name}</h3>
+ <div style="font-size: 14px; line-height: 1.5;">
+ <p><strong>鍦板潃锛�</strong>${shop.shop.address}</p>
+ <div style="display: flex; flex-direction: row;">
+ <span style="flex:1"><strong>鍦ㄧ嚎鐘舵�侊細</strong><span style="color: ${shop.shop.isOnline ? '#52c41a' : '#8c8c8c'}">${onlineStatusText}</span> </span>
+ <span style="flex:1"><strong>寮傚父鐘舵�侊細</strong><span style="color: ${exceptionStatusColor}">${exceptionStatusText}</span></span>
+ </div>
+ <div style="display: flex; flex-direction: row;">
+ <span style="flex:1"><strong>鐜俊鐮佺瓑绾э細</strong><span style="color: ${getColorByRingCodeLevel(shop.shop.ringCodeLevel)}">${getRingCodeLevelText(shop.shop.ringCodeLevel)}</span></span>
+ <span style="flex:1"><strong>鍙戝竷鏃堕棿锛�</strong>${shop.shop.ringCodePublishTime}</span>
+ </div>
+ <h4 style="margin: 10px 0 5px 0; color: #666;">杩�1灏忔椂鐩戞祴鏁版嵁</h4>
+ <div id="infowindowChartContainer" style="width: 100%; height: 250px;"></div>
+ </div>
+ </div>
+ `
+
+ // 娓呴櫎鐜版湁鐨勪俊鎭獥鍙�
+ if (window.infoWindow) {
+ window.infoWindow.close()
+ }
+
+ // 鍒涘缓鏂扮殑淇℃伅绐楀彛
+ window.infoWindow = new AMap.InfoWindow({
+ content: content,
+ size: new AMap.Size(400, 400),
+ offset: new AMap.Pixel(-24, -80),
+ })
+
+ // 鎵撳紑淇℃伅绐楀彛
+ window.infoWindow.open(map, [shop.shop.longitude, shop.shop.latitude])
+
+ // 绛夊緟淇℃伅绐楀彛鍔犺浇瀹屾垚鍚庡垵濮嬪寲鍥捐〃
+ setTimeout(() => {
+ const chartdom = document.getElementById('infowindowChartContainer')
+ if (chartdom) {
+ initChart(chartdom, shop.recentData)
+ }
+ }, 100)
+}
+
+/**
+ * 鍒濆鍖栫洃娴嬫暟鎹浘琛�
+ * @param {Array} data 鐩戞祴鏁版嵁
+ */
+function initChart(chartdom, data) {
+ // 鍑嗗鍥捐〃鏁版嵁
+ const times = data.map((item) => item.sampleTime)
+ const oilSmokeData = data.map((item) => item.oilSmokeConcentration)
+ const purifierData = data.map((item) => item.purifierCurrent)
+ const fanData = data.map((item) => item.fanCurrent)
+
+ // 鍒濆鍖栧浘琛�
+ const chart = echarts.init(chartdom)
+
+ // 鍥捐〃閰嶇疆
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985',
+ },
+ },
+ },
+ legend: {
+ data: ['娌圭儫娴撳害', '鍑�鍖栧櫒鐢垫祦', '椋庢満鐢垫祦'],
+ top: 0,
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: times.map((time) => time.split(' ')[1]),
+ axisLabel: {
+ rotate: 0,
+ fontSize: 10,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '娌圭儫娴撳害 (mg/m鲁)',
+ position: 'left',
+ left: '30%',
+ },
+ {
+ type: 'value',
+ name: '鐢垫祦 (A)',
+ position: 'right',
+ },
+ ],
+ series: [
+ {
+ name: '娌圭儫娴撳害',
+ type: 'line',
+ data: oilSmokeData,
+ yAxisIndex: 0,
+ smooth: true,
+ },
+ {
+ name: '鍑�鍖栧櫒鐢垫祦',
+ type: 'line',
+ data: purifierData,
+ yAxisIndex: 1,
+ smooth: true,
+ },
+ {
+ name: '椋庢満鐢垫祦',
+ type: 'line',
+ data: fanData,
+ yAxisIndex: 1,
+ smooth: true,
+ },
+ ],
+ }
+
+ // 搴旂敤閰嶇疆
+ chart.setOption(option)
+
+ // 鍝嶅簲寮忓鐞�
+ window.addEventListener('resize', function () {
+ chart.resize()
+ })
+}
+
+/**
+ * 娓呴櫎娴烽噺鐐规爣璁�
+ */
+function clearMassMarks() {
+ if (window.massMarks) {
+ window.massMarks.clear()
+ window.massMarks.setMap(null)
+ window.massMarks = null
+ }
+
+ if (window.infoWindow) {
+ window.infoWindow.close()
+ window.infoWindow = null
+ }
+}
export default {
- /**
- * 缁樺埗娴烽噺鐐规爣璁�
- * @param fDatas 瀹屾暣鐩戞祴鏁版嵁
- * @param _factor 褰撳墠灞曠ず鐨勭洃娴嬪洜瀛愬璞�
- */
- drawMassMarks(fDatas, _factor, onClick) {
- if (!toolboxStore.dataMarkerStatus) {
- return;
- }
- this.clearMassMarks();
- const lnglats = fDatas.lnglats_GD;
- var data = [];
- for (let i = 0; i < lnglats.length; i++) {
- data.push({
- lnglat: lnglats[i], //鐐规爣璁颁綅缃�
- name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} 渭g/m鲁`,
- id: i
- });
- }
+ drawMassMarks,
+ clearMassMarks,
+ // /**
+ // * 缁樺埗娴烽噺鐐规爣璁�
+ // * @param fDatas 瀹屾暣鐩戞祴鏁版嵁
+ // * @param _factor 褰撳墠灞曠ず鐨勭洃娴嬪洜瀛愬璞�
+ // */
+ // drawMassMarks(fDatas, _factor, onClick) {
+ // if (!toolboxStore.dataMarkerStatus) {
+ // return;
+ // }
+ // this.clearMassMarks();
+ // const lnglats = fDatas.lnglats_GD;
+ // var data = [];
+ // for (let i = 0; i < lnglats.length; i++) {
+ // data.push({
+ // lnglat: lnglats[i], //鐐规爣璁颁綅缃�
+ // name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} 渭g/m鲁`,
+ // id: i
+ // });
+ // }
- // 鍒涘缓鏍峰紡瀵硅薄
- var styleObject = {
- url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
- // url: './asset/mipmap/ic_up_white.png', // 鍥炬爣鍦板潃
+ // // 鍒涘缓鏍峰紡瀵硅薄
+ // var styleObject = {
+ // url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+ // // url: './asset/mipmap/ic_up_white.png', // 鍥炬爣鍦板潃
- size: new AMap.Size(11, 11), // 鍥炬爣澶у皬
+ // size: new AMap.Size(11, 11), // 鍥炬爣澶у皬
- anchor: new AMap.Pixel(5, 5) // 鍥炬爣鏄剧ず浣嶇疆鍋忕Щ閲忥紝鍩哄噯鐐逛负鍥炬爣宸︿笂瑙�
- };
+ // anchor: new AMap.Pixel(5, 5) // 鍥炬爣鏄剧ず浣嶇疆鍋忕Щ閲忥紝鍩哄噯鐐逛负鍥炬爣宸︿笂瑙�
+ // };
- var massMarks = new AMap.MassMarks(data, {
- zIndex: 5, // 娴烽噺鐐瑰浘灞傚彔鍔犵殑椤哄簭
- zooms: [15, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
- style: styleObject // 璁剧疆鏍峰紡瀵硅薄
- });
- massMarks.on('click', (event) => {
- const i = event.data.id;
- // 3. 鑷畾涔夌偣鍑讳簨浠�
- onClick(i);
- });
+ // var massMarks = new AMap.MassMarks(data, {
+ // zIndex: 5, // 娴烽噺鐐瑰浘灞傚彔鍔犵殑椤哄簭
+ // zooms: [15, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
+ // style: styleObject // 璁剧疆鏍峰紡瀵硅薄
+ // });
+ // massMarks.on('click', (event) => {
+ // const i = event.data.id;
+ // // 3. 鑷畾涔夌偣鍑讳簨浠�
+ // onClick(i);
+ // });
- var marker = new AMap.Marker({
- content: ' ',
- map: map,
+ // var marker = new AMap.Marker({
+ // content: ' ',
+ // map: map,
- offset: new AMap.Pixel(13, 12)
- });
- var timeout;
- massMarks.on('mouseover', (e) => {
- if (timeout) {
- clearTimeout(timeout);
- }
- marker.setPosition(e.data.lnglat);
- marker.setLabel({ content: e.data.name });
- map.add(marker);
- timeout = setTimeout(() => {
- map.remove(marker);
- }, 2000);
- });
- _massMarks = massMarks;
- map.add(massMarks);
- },
- clearMassMarks() {
- if (_massMarks) {
- map.remove(_massMarks);
- _massMarks = undefined;
- }
- },
+ // offset: new AMap.Pixel(13, 12)
+ // });
+ // var timeout;
+ // massMarks.on('mouseover', (e) => {
+ // if (timeout) {
+ // clearTimeout(timeout);
+ // }
+ // marker.setPosition(e.data.lnglat);
+ // marker.setLabel({ content: e.data.name });
+ // map.add(marker);
+ // timeout = setTimeout(() => {
+ // map.remove(marker);
+ // }, 2000);
+ // });
+ // _massMarks = massMarks;
+ // map.add(massMarks);
+ // },
+ // clearMassMarks() {
+ // if (_massMarks) {
+ // map.remove(_massMarks)
+ // _massMarks = undefined
+ // }
+ // },
/**
* 鍒涘缓鏍囪鐐�
@@ -93,14 +616,14 @@
// 寮�鍚爣娉ㄩ伩璁╋紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴��
collision: collision,
// 寮�鍚爣娉ㄦ贰鍏ュ姩鐢伙紝榛樿涓哄紑鍚紝v1.4.15 鏂板灞炴��
- animation: true
- });
+ animation: true,
+ })
- map.add(layer);
+ map.add(layer)
// var markers = [];
for (var i = 0; i < dataList.length; i++) {
- const data = dataList[i];
+ const data = dataList[i]
var curData = {
name: data.name,
position: [data.longitude, data.latitude],
@@ -115,7 +638,7 @@
size: [30, 30],
anchor: 'bottom-center',
angel: 0,
- retina: true
+ retina: true,
},
text: {
content: showTxt ? data.name : '',
@@ -127,22 +650,22 @@
fillColor: '#fff',
strokeColor: '#333',
strokeWidth: 0,
- backgroundColor: '#122b54a9'
- }
- }
- };
+ backgroundColor: '#122b54a9',
+ },
+ },
+ }
curData.extData = {
- index: i
- };
+ index: i,
+ }
- var labelMarker = new AMap.LabelMarker(curData);
+ var labelMarker = new AMap.LabelMarker(curData)
// markers.push(labelMarker);
- layer.add(labelMarker);
+ layer.add(labelMarker)
}
- return layer;
+ return layer
},
createMarker({ position, img, title, content, label = '', extData }) {
@@ -151,8 +674,8 @@
size: new AMap.Size(30, 30), //鍥炬爣灏哄
image: img, //Icon 鐨勫浘鍍�
// imageOffset: new AMap.Pixel(-9, -3), //鍥惧儚鐩稿灞曠ず鍖哄煙鐨勫亸绉婚噺锛岄�備簬闆ⅶ鍥剧瓑
- imageSize: new AMap.Size(30, 30) //鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
- });
+ imageSize: new AMap.Size(30, 30), //鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
+ })
const marker = new AMap.Marker({
position: position,
// offset: new AMap.Pixel(-13, -30),
@@ -161,11 +684,11 @@
title: title,
label: {
content: label,
- direction: 'bottom'
+ direction: 'bottom',
},
- extData
- });
+ extData,
+ })
// map.add(marker);
- return marker;
- }
-};
+ return marker
+ },
+}
--
Gitblit v1.9.3