地图落点

src/api/components/supermap.js

@@ -1,4 +1,5 @@
 
 export const iconList = {
     'sj-icon-map-event-point': require('@/assets/images/event_fire/event_point.png'),
+    'sj-icon-map-camera-tower': require('@/assets/images/event_fire/camera_tower.png'),
 }

src/components/Jsmsdialog.vue

@@ -7,7 +7,12 @@
 					 <span>暂无应急预案</span>
 					 <button>应急预案</button>
 				 </div>
-				 <img src="../assets/images/yj-mapbg2.png" />
+				 <!--<img src="../assets/images/yj-mapbg2.png" />-->
+				 <supermapDetail ref="supermapDetail" style="width: 100%;height: 100vh;"
+						   class="indexSupermapClass" :mapDiv="'forestMapDetail'"
+						   :dynamicPlotting="false"
+						   :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
+						   ></supermapDetail>
 			 </div>
 			 <div class="Jsmsdialog-btn">
 				 <div class="Jsmsdialog-btn-left">
@@ -173,7 +178,7 @@
 					</div>
 				</div>
 			 </div>
-			 
+
 		 </div>
 	 </div>
 	 </el-dialog>
@@ -181,14 +186,140 @@
 
 <script>
 import leftRightSwiperScroll from './leftRightSwiperScroll.vue'
+import supermapDetail from '@/components/supermap' //超图
+
 export default {
   name: 'Jsmsdialog',
   data(){
 	  return{
-		  outerVisible:false
+		  outerVisible:false,
 	  }
   },
+	methods:{
+		setPoint(point){
+			// alert(point)
+			let pointDetail = point;
+			pointDetail.type = "event_point";
+			let pointTower = {
+				type:"camera_tower",
+				name:"监控塔",
+				contacts:"张雨晴",
+				phone:"13172208000",
+				longitude: point.longitude - 0.05,
+				latitude:point.latitude - 0.05
+			};
+			let pointList = [pointDetail, pointTower];
+			// pointList.push({
+			// 	name:"朝阳火情",
+			// 	contacts:"张洁玲",
+			// 	phone:"13500805931",
+			// 	longitude:129.33,
+			// 	latitude:43.02
+			// });
+			// pointList.push({
+			// 	name:"延吉河火情",
+			// 	contacts:"王建军",
+			// 	phone:"13664407655",
+			// 	longitude:129.46,
+			// 	latitude:43.028
+			// });
+			// pointList.push({
+			// 	name:"石人村火情",
+			// 	contacts:"蔡雨虹",
+			// 	phone:"15754320117",
+			// 	longitude:129.418,
+			// 	latitude:43.038
+			// });
+			// pointList.push({
+			// 	name:"依兰火情",
+			// 	contacts:"吕国琴",
+			// 	phone:"15044076332",
+			// 	longitude:129.4394,
+			// 	latitude:43.089
+			// });
+			// pointList.push({
+			// 	name:"明月火情",
+			// 	contacts:"吴明月",
+			// 	phone:"15044076332",
+			// 	longitude:128.99,
+			// 	latitude:43.21
+			// });
+
+			var markersList = []
+			for (let i = 0; i < pointList.length; i++) {
+				let markersMap = {
+					lng: 124.59,
+					lat: 43.02,
+					icon: 'marker',
+					bindPopupHtml: '',
+					click: 'abc',
+					parameter: pointList[i],
+					keepBindPopup: false,
+					isAggregation: true
+				}
+				markersMap.icon = 'sj-icon-map-' + pointList[i].type.replaceAll("_", "-");
+				markersMap.lng = pointList[i].longitude;
+				markersMap.lat = pointList[i].latitude;
+				markersMap.type = pointList[i].type;
+				markersMap.bindPopupHtml = '<div class="map-tip">' +
+						'<span>' +
+						'                  <div class="d-l-con">' +
+						'                  <div class="d-l-l-text">' +
+						'                  <h4>资源名称：' + pointList[i].name + '</h4>' +
+						'                </div>' +
+						'                </div>' +
+						'                </span>' +
+						'<span>' +
+						'                  <div class="d-l-con">' +
+						'                  <div class="d-l-l-text">' +
+						'                  <h4>经纬度：' + pointList[i].longitude +','+ pointList[i].latitude + '</h4>' +
+						'                </div>' +
+						'                </div>' +
+						'                </span>' +
+						'<span>' +
+						'                  <div class="d-l-con">' +
+						'                  <div class="d-l-l-text">' +
+						'                  <h4>联系人：' + (pointList[i].contacts  ? pointList[i].contacts : "")  + '</h4>' +
+						'                </div>' +
+						'                </div>' +
+						'                </span>' +
+						'<span>' +
+						'                  <div class="d-l-con">' +
+						'                  <div class="d-l-l-text">' +
+						'                  <h4>电话：' +  (pointList[i].phone ? pointList[i].phone : "") + '</h4>' +
+						'                </div>' +
+						'                </div>' +
+						'                </span>' +
+						'</div>'
+				markersList.push(markersMap)
+				// let icon = new window.L.Icon({
+				//     iconUrl: iconList[markersList[i].icon],
+				//     iconSize: [48, 48],
+				//     iconAnchor: [24, 40],
+				//     popupAnchor: [-3, -40],
+				//     shadowSize: [41, 41]
+				// })
+				// let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
+				//     icon: markersMap.icon
+				// })
+				// markerClick.on('click', function() {
+				//     let clickName = markersList[i].click
+				//     this.$emit(clickName, markersList[i].parameter)
+				// })
+			}
+			for (let i = 0; i < markersList.length; i++) {
+				setTimeout(() => {
+				// alert(markersList[i].type)
+					this.$refs.supermapDetail.setMarkersByType([markersList[i]], markersList[i].type);
+				}, 3000)
+			}
+			// setTimeout(() => {
+			// 	this.$refs.supermapDetail.setMarkersByType(markersList, type);
+			// }, 3000)
+		}
+	},
 	components: {
+		supermapDetail,
  	 leftRightSwiperScroll
  }
 }
@@ -215,7 +346,7 @@ export default {
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
-		
+
 	}
 	.Jsmsdialog .el-dialog__header span{
 		font-size: 18px;
@@ -417,9 +548,9 @@ export default {
 	}
 	.Jsmsdialog-tit2 span{
 		font-size: 18px;
-		 background-image:-webkit-linear-gradient(top,#fff,#4ce9ff); 
-		-webkit-background-clip:text; 
-		-webkit-text-fill-color:transparent; 
+		 background-image:-webkit-linear-gradient(top,#fff,#4ce9ff);
+		-webkit-background-clip:text;
+		-webkit-text-fill-color:transparent;
 		font-weight: bold;
 	}
 	.Jsmsdialog-jbqk-txt{

src/views/index.vue

@@ -98,7 +98,7 @@
                         icon: 'marker',
                         bindPopupHtml: '',
                         click: 'abc',
-                        parameter: '',
+                        parameter: pointList[i],
                         keepBindPopup: false,
                         isAggregation: true
                     }
@@ -207,8 +207,9 @@
                 this.$refs.bottomMenu.showBanChild = false;
                 this.$refs.bottomMenu.showChangChild = false;
             },
-            abc(){
+            abc(point){
                 this.$refs.Jsmsdialog.outerVisible = true
+                this.$refs.Jsmsdialog.setPoint(point);
                 console.log('1111')
             }
         },