From 3c496c263fca58417fa9b35beb9707ad147e6c7d Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期一, 22 七月 2024 15:01:33 +0800
Subject: [PATCH] Merge branch 'main' of http://218.28.192.34:9999/r/sqys/sqys_web
---
src/views/main/indexMarge.vue | 552 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 552 insertions(+), 0 deletions(-)
diff --git a/src/views/main/indexMarge.vue b/src/views/main/indexMarge.vue
new file mode 100644
index 0000000..37c6266
--- /dev/null
+++ b/src/views/main/indexMarge.vue
@@ -0,0 +1,552 @@
+<template>
+ <el-container>
+ <selectColor :select-color.sync="selectColor" :min-color="minColor" @changeRender="changeRender" />
+ <themeCom @styleChange="changeStyle" />
+ <el-main style="margin: 0px; padding: 0px">
+ <div id="aMap" :style="{ height: windowHeight - 50 + 'px' }" />
+ </el-main>
+ </el-container>
+</template>
+<script>
+const markerContent = `
+
+<div class="custom-content-marker" onclick="showContent()">
+ <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
+ </div>`
+import selectColor from './components/selectColor.vue'
+import themeCom from './components/theme.vue'
+export default {
+ name: 'AMap',
+ components: {
+ selectColor,
+ themeCom
+ },
+ data() {
+ return {
+ circleMarker: [],
+ recordValue: [], // 璁板綍缁樺埗杩囩殑鏂囧瓧
+ adcode: 410000, // 涓績琛屾斂code
+ currentCodeObj: '', // 涓績琛屾斂code
+ map: null, // 鍦板浘瀹炰緥鍖�
+ districtExplorer: null, // 娓叉煋琛屾斂鍖哄煙瀹炰緥鍖�
+ windowHeight: document.documentElement.clientHeight,
+ selectColor: '#FF0000',
+ minColor: '',
+ provinceData: [
+ {
+ 'name': '閮戝窞甯�',
+ 'value': '8.99'
+ },
+ {
+ 'name': '寮�灏佸競',
+ 'value': '22.84'
+ },
+ {
+ 'name': '娲涢槼甯�',
+ 'value': '48.96'
+ },
+ {
+ 'name': '骞抽《灞卞競',
+ 'value': '79.49'
+ },
+ {
+ 'name': '瀹夐槼甯�',
+ 'value': '37.82'
+ },
+ {
+ 'name': '楣ゅ甯�',
+ 'value': '27.55'
+ },
+ {
+ 'name': '鏂颁埂甯�',
+ 'value': '90.76'
+ },
+ {
+ 'name': '鐒︿綔甯�',
+ 'value': '72.26'
+ },
+ {
+ 'name': '婵槼甯�',
+ 'value': '14.03'
+ },
+ {
+ 'name': '璁告槍甯�',
+ 'value': '32.93'
+ },
+ {
+ 'name': '婕渤甯�',
+ 'value': '57.85'
+ },
+ {
+ 'name': '涓夐棬宄″競',
+ 'value': '85.35'
+ },
+ {
+ 'name': '鍗楅槼甯�',
+ 'value': '99.59'
+ },
+ {
+ 'name': '鍟嗕笜甯�',
+ 'value': '45.33'
+ },
+ {
+ 'name': '淇￠槼甯�',
+ 'value': '69.38'
+ },
+ {
+ 'name': '鍛ㄥ彛甯�',
+ 'value': '65.45'
+ },
+ {
+ 'name': '椹婚┈搴楀競',
+ 'value': '90.25'
+ },
+ {
+ 'name': '娴庢簮甯�',
+ 'value': '88.85'
+ }
+ ],
+ style: 'dark',
+ marker: [],
+ infoWindow: [],
+ // marker: [],
+ regionData: {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ [
+ [113.576491, 34.744435],
+ [113.605331, 34.768129],
+ [113.712447, 34.74782],
+ [113.673995, 34.66823],
+ [113.601211, 34.687994],
+ [113.573745, 34.705495],
+ [113.570998, 34.725249]
+ ]
+ ]
+ },
+ properties: {}
+ }
+ ]
+ }
+ }
+ },
+ mounted() {
+ const vm = this
+ vm.loadMap()
+ },
+ methods: {
+ changeStyle(e) {
+ this.style = e
+ this.loadMap()
+ },
+ changeRender() {
+ this.loadMap()
+ },
+ loadMap() {
+ const vm = this
+ vm.map = new AMap.Map('aMap', {
+ viewMode: '2D', // 榛樿浣跨敤 2D 妯″紡锛屽鏋滃笇鏈涗娇鐢ㄥ甫鏈変刊浠拌鐨� 3D 妯″紡锛岃璁剧疆 viewMode: '3D'
+ zoom: 11, // 鍒濆鍖栧湴鍥惧眰绾�
+ center: [113.681999, 34.762029], // 鍒濆鍖栧湴鍥句腑蹇冪偣
+ mapStyle: 'amap://styles/' + this.style
+ })
+ vm.fillCityOrTown()
+ },
+ // 鍔犺浇娌冲崡鐪佸競鍘�
+ fillCityOrTown() {
+ const vm = this
+ AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
+ // 鍚姩椤甸潰
+ vm.initPage(DistrictExplorer)
+ })
+ },
+ initPage(DistrictExplorer) {
+ const vm = this
+ // 鍒涘缓涓�涓疄渚�
+ vm.districtExplorer = new DistrictExplorer({
+ eventSupport: true, // 鎵撳紑浜嬩欢鏀寔
+ map: vm.map // 鍏宠仈鐨勫湴鍥惧疄渚�
+ })
+ // 閰嶇疆鐐瑰嚮浜嬩欢
+ vm.districtExplorer.on('featureClick', function(e, feature) {
+ var props = feature.properties
+ // 濡傛灉瀛樺湪瀛愯妭鐐�
+ vm.recordValue.map(item => {
+ item.setMap(null)
+ })
+
+ vm.recordValue = []
+ vm.circleMarker.map(item => {
+ // item.setMap(null)
+ vm.map.remove(item)
+ })
+ vm.circleMarker = []
+ if (feature.properties.level === 'district') {
+ setTimeout(() => {
+ vm.drawMarker(feature.properties.center)
+ }, 500)
+ vm.initData()
+ }
+ // if (props.childrenNum > 0) {
+ // 鍒囨崲鑱氱劍鍖哄煙
+ vm.switch2AreaNode(props.adcode)
+ // }
+ })
+ // 澶栭儴鍖哄煙琚偣鍑�
+ vm.districtExplorer.on('outsideClick', function(e) {
+ vm.districtExplorer.locatePosition(e.originalEvent.lnglat, function(_error, routeFeatures) {
+ vm.recordValue.map(item => {
+ item.setMap(null)
+ })
+ vm.recordValue = []
+ vm.infoWindow.forEach(element => {
+ element.close(vm.map)
+ })
+ vm.marker.forEach(element => {
+ element.setMap(null)
+ })
+ vm.circleMarker.map(item => {
+ // item.setMap(null)
+ vm.map.remove(item)
+ })
+ vm.circleMarker = []
+ if (routeFeatures && routeFeatures.length > 1) {
+ // 鍒囨崲鍒扮渷绾у尯鍩�
+ vm.switch2AreaNode(routeFeatures[1].properties.adcode)
+ } else {
+ // 鍒囨崲鍒板叏鍥�
+ vm.switch2AreaNode(100000)
+ }
+ }, {
+ levelLimit: 2
+ })
+ })
+ var adcode = vm.adcode // 鍏ㄥ浗鐨勫尯鍒掔紪鐮�
+ vm.districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
+ if (error) {
+ console.error(error)
+ return
+ }
+ // 缁樺埗杞藉叆鐨勫尯鍒掕妭鐐�
+ vm.renderAreaNode(areaNode)
+ })
+ },
+ initData(){
+ for (let i = 0; i < this.regionData.features.length; i++) {
+ let item = this.regionData.features[i];
+ if(item.geometry.type=='Polygon'){
+ let arr = item.geometry.coordinates
+ let polygon = new AMap.Polygon({
+ path: arr,
+ fillColor: '#ccebc5',
+ strokeOpacity: 1,
+ fillOpacity: 0.2,//鑳屾櫙閫忔槑搴�
+ strokeColor: '#2b8cbe',
+ strokeWeight: 2,
+ strokeStyle: 'dashed',
+ strokeDasharray: [5, 5],
+ });
+ this.map.add(polygon);
+ }
+ }
+ },
+ getMathRandom() {
+ return (Math.random() * 101).toFixed(2)
+ },
+ adjustColor(color, range) {
+ let newColor = '#'
+ for (let i = 0; i < 3; i++) {
+ const hxStr = color.substr(i * 2 + 1, 2)
+ let val = parseInt(hxStr, 16)
+ val += range
+ if (val < 0) val = 0
+ else if (val > 255) val = 255
+ newColor += val.toString(16).padStart(2, '0')
+ }
+ this.$emit('minColor', newColor)
+ return newColor
+ },
+ renderAreaNode(areaNode) {
+ const vm = this
+ vm.map.setBounds(areaNode.getBounds(), null, null, true)
+ // 娓呴櫎宸叉湁鐨勭粯鍒跺唴瀹�
+ vm.districtExplorer.clearFeaturePolygons()
+ var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00']
+ // 缁樺埗瀛愬尯鍩�
+ // const arr = []
+ vm.districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
+ // arr.push({
+ // name: feature.properties.name, value: vm.getMathRandom()
+ // })
+ // console.log(feature.adcode) // 琛屾斂鍖虹殑areacode
+ var fillColor = colors[i % colors.length]
+ var strokeColor = colors[colors.length - 1 - i % colors.length]
+ const value = vm.provinceData.find(item => item.name === feature.properties.name)
+ const color = vm.adjustColor(vm.selectColor, 200)
+ const colorValue = vm.getColorBetween(value.value, 0, 100, color, vm.selectColor)
+ const fontStyle = {
+ 'background-color': 'rgba(0,0,0,0)',
+ 'border-width': 0,
+ 'font-size': '10px',
+ color: '#fff',
+ 'text-align': 'center'
+ }
+ // 瀹氫箟Text绫�
+ const text1 = new AMap.Text({
+ text: feature.properties.name,
+ position: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ style: fontStyle
+ })
+ // 鍒涘缓鍦嗗舰鐐规爣璁� CircleMarker 瀹炰緥
+ const circleMarker = new AMap.CircleMarker({
+ center: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ radius: 4, // 3D瑙嗗浘涓嬶紝CircleMarker鍗婂緞涓嶈瓒呰繃64px
+ strokeColor: 'white',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 1,
+ zIndex: 100000,
+ bubble: true,
+ cursor: 'pointer',
+ clickable: true
+ })
+ vm.recordValue.push(text1)
+ vm.circleMarker.push(circleMarker)
+ vm.map.add(text1)
+ vm.map.add(circleMarker)
+ return {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: strokeColor, // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: colorValue, // 濉厖鑹�
+ fillOpacity: 1 // 濉厖閫忔槑搴�
+ }
+ })
+ // 缁樺埗鐖跺尯鍩�
+ vm.districtExplorer.renderParentFeature(areaNode, {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: 'black', // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: areaNode.getSubFeatures().length ? null : colors[0], // 濉厖鑹�
+ fillOpacity: 0.35 // 濉厖閫忔槑搴�
+ })
+ // vm.
+
+ vm.map.setFitView(vm.districtExplorer.getAllFeaturePolygons())
+ },
+ // 鍒锋柊椤甸潰
+ switch2AreaNode(adcode, callback) {
+ const vm = this
+ if (vm.currentCodeObj && ('' + vm.currentCodeObj.getAdcode() === '' + adcode)) {
+ return
+ }
+ vm.loadAreaNode(adcode, function(error, areaNode) {
+ if (error) {
+ if (callback) {
+ callback(error)
+ }
+ return
+ }
+ vm.adcode = window.currentAreaNode = areaNode.adcode
+ vm.currentCodeObj = window.currentAreaNode = areaNode
+ // 璁剧疆褰撳墠浣跨敤鐨勫畾浣嶇敤鑺傜偣
+ vm.districtExplorer.setAreaNodesForLocating([vm.currentCodeObj])
+ vm.refreshAreaNode(areaNode)
+ if (callback) {
+ callback(null, areaNode)
+ }
+ })
+ },
+ // 鍒锋柊鍖哄煙杈圭晫
+ loadAreaNode(adcode, callback) {
+ const vm = this
+ vm.districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
+ if (error) {
+ if (callback) {
+ callback(error)
+ }
+ return
+ }
+ if (callback) {
+ callback(null, areaNode)
+ }
+ })
+ },
+ refreshAreaNode(areaNode) {
+ this.districtExplorer.setHoverFeature(null)
+ this.renderAreaPolygons(areaNode)
+ },
+ // 缁樺埗鏌愪釜鍖哄煙鐨勮竟鐣�
+ renderAreaPolygons(areaNode) {
+ const vm = this
+ // 鏇存柊鍦板浘瑙嗛噹
+ vm.map.setBounds(areaNode.getBounds(), null, null, true)
+ // 娓呴櫎宸叉湁鐨勭粯鍒跺唴瀹�
+ vm.districtExplorer.clearFeaturePolygons()
+ var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00']
+ // 缁樺埗瀛愬尯鍩�
+ vm.districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
+ var fillColor = colors[i % colors.length]
+ var strokeColor = colors[colors.length - 1 - i % colors.length]
+ const fontStyle = {
+ 'background-color': 'rgba(0,0,0,0)',
+ 'border-width': 0,
+ 'text-align': 'center',
+ 'font-size': '14px',
+ color: '#fff'
+ }
+ const text1 = new AMap.Text({
+ text: feature.properties.name,
+ position: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ style: fontStyle
+ })
+ vm.recordValue.push(text1)
+
+ vm.map.add(text1)
+
+ const value = vm.provinceData.find(item => item.name === feature.properties.name)
+ if (value && value.value) {
+ const color = vm.adjustColor(vm.selectColor, 200)
+ fillColor = vm.getColorBetween(value.value, 0, 100, color, vm.selectColor)
+ }
+ // 鍒涘缓鍦嗗舰鐐规爣璁� CircleMarker 瀹炰緥
+ const circleMarker = new AMap.CircleMarker({
+ center: new AMap.LngLat(feature.properties.center[0], feature.properties.center[1]),
+ radius: 4, // 3D瑙嗗浘涓嬶紝CircleMarker鍗婂緞涓嶈瓒呰繃64px
+ strokeColor: 'white',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 1,
+ zIndex: 100000,
+ bubble: true,
+ cursor: 'pointer',
+ clickable: true
+ })
+ vm.circleMarker.push(circleMarker)
+ vm.map.add(circleMarker)
+ return {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: strokeColor, // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: fillColor, // 濉厖鑹�
+ fillOpacity: 1 // 濉厖閫忔槑搴�
+ }
+ })
+
+ // 缁樺埗鐖跺尯鍩�
+ vm.districtExplorer.renderParentFeature(areaNode, {
+ cursor: 'default',
+ bubble: true,
+ strokeColor: 'black', // 绾块鑹�
+ strokeOpacity: 1, // 绾块�忔槑搴�
+ strokeWeight: 1, // 绾垮
+ fillColor: areaNode.getSubFeatures().length ? null : colors[0], // 濉厖鑹�
+ fillOpacity: 0.35 // 濉厖閫忔槑搴�
+ })
+ },
+ // 鏍规嵁鍊艰繑鍥為鑹�
+ getColorBetween(value, minValue, maxValue, minColor, maxColor) {
+ // 灏嗛鑹茶浆鎹负RGB
+ function hexToRgb(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null
+ }
+
+ // 灏哛GB杞崲涓哄崄鍏繘鍒堕鑹�
+ function rgbToHex(r, g, b) {
+ return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+ }
+
+ // 灏嗛鑹茬殑姣忎釜鍒嗛噺杩涜鎻掑��
+ function interpolateColor(start, end, factor) {
+ return Math.round(start + (end - start) * factor)
+ }
+
+ // 纭繚鍊煎湪鏈�灏忓�煎拰鏈�澶у�间箣闂�
+ value = Math.max(minValue, Math.min(value, maxValue))
+
+ // 璁＄畻鍥犲瓙锛屽皢鍊艰寖鍥存槧灏勫埌0鍒�1涔嬮棿
+ const factor = (value - minValue) / (maxValue - minValue)
+
+ // 鑾峰彇涓ょ棰滆壊鐨凴GB鍊�
+ const minRgb = hexToRgb(minColor)
+ const maxRgb = hexToRgb(maxColor)
+ // 鏍规嵁鍥犲瓙鎻掑�糝GB鍒嗛噺
+ const r = interpolateColor(minRgb.r, maxRgb.r, factor)
+ const g = interpolateColor(minRgb.g, maxRgb.g, factor)
+ const b = interpolateColor(minRgb.b, maxRgb.b, factor)
+
+ // 灏哛GB杞崲涓哄崄鍏繘鍒堕鑹插苟杩斿洖
+ return rgbToHex(r, g, b)
+ },
+ // 缁樺埗鏍囩偣
+ // 缁樺埗鏍囩偣
+ drawMarker(positionArg) {
+ var content = [
+ '<div><b>杩欐槸涓彁绀烘枃瀛�</b>',
+ '鍦板潃锛氶儜宸炲競閲戞按鍖鸿姳鍥矾</div>'
+ ]
+ const position = new AMap.LngLat(positionArg[0], positionArg[1]) // Marker 缁忕含搴�
+ // 鍒涘缓 infoWindow 瀹炰緥
+
+ function getImageUrl(url) {
+ console.log(`../../assets/icon/${url}.png`)
+ const path = new URL(`../../assets/icon/${url}.png`, import.meta.url)
+ return path.href
+ }
+
+ for (let a = 0; a < 4; a++) {
+ const icon = new AMap.Icon({
+ size: new AMap.Size(20, 20), // 鍥炬爣灏哄
+ image: getImageUrl(`icon${a + 1}`), // 鍥炬爣鐨刄RL
+ imageSize: new AMap.Size(20, 20) // 鍥炬爣鎵�鐢ㄥ浘鐗囩殑澶у皬
+ })
+ const position = new AMap.LngLat(positionArg[0] - 0.02 * a, positionArg[1]) // Marker 缁忕含搴�
+ const infoWindow = new AMap.InfoWindow({
+ content: content.join('<br>'), // 浼犲叆瀛楃涓叉嫾鎺ョ殑 DOM 鍏冪礌
+ anchor: 'top-center',
+ position: position
+ // offset: [10, 40]
+ })
+ this.infoWindow.push(infoWindow)
+ const marker = new AMap.Marker({
+ position: position,
+ // content: markerContent, // 灏� html 浼犵粰 content
+ // icon: '',
+ icon: icon,
+ offset: new AMap.Pixel(-10, -30) // 浠� icon 鐨� [center bottom] 涓哄師鐐�
+ })
+ this.map.add(marker)
+ this.marker.push(marker)
+ marker.on('click', () => {
+ infoWindow.open(this.map)
+ })
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.aMap {
+ width: 100vw;
+ height: 100vh;
+}
+</style>
--
Gitblit v1.9.1