高德地图中心点实时切换特效

最新推荐文章于 2023-02-08 08:50:38 发布

houzhanwublog

最新推荐文章于 2023-02-08 08:50:38 发布

阅读量1.8k

点赞数

分类专栏：地图 websocket 文章标签： node.js 机器学习 websocket

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_27404929/article/details/104733471

版权

地图同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

websocket

1 篇文章 0 订阅

订阅专栏

使用nodejs 模拟websocket 服务端

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 9999 });
wss.on('connection', function (ws) {
    console.log('client connected');
   // ws.on('message', function (message) {
    //    console.log(message);
	//	ws.send(message);
    //});
	
	ws.on("message", message => {
	   // 这里解析数据
	   console.log('receive data');
	  // const result = JSON.parse(message);
	   // 是否是登陆，登陆后绑定id
	   if (true) {
		// 这里只做一个小的场景，不是登陆就是发送信息
		// 根据存储的id 是否是要 发送的对象 来单独响应
		wss.clients.forEach(s => {
		 if (s.readyState == 1) {
		  s.send(message);
		 }
		});
	   }
  });
  
  ws.on("close", message => {
	console.log(ws.socketIdxos,"退出连接");
  });
	
});

cmd 切换到指定的目录：执行命令：node xxx.js

使用模拟客户端进行模拟

地图部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
		<title>5-4添加标记练习</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#container {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>

		<script>
			var array = [{
				lng: 116.379391,
				lat: 39.861536,
				zoom: 11
			}, {
				lng: 114.681373,
				lat: 37.983095,
				zoom: 12
			}, {
				lng: 114.674164,
				lat: 37.965131,
				zoom: 14
			}, {
				lng: 114.679571,
				lat: 37.965199,
				zoom: 16
			}];

			var map = new AMap.Map('container', {
				zoom: 10,
				center: [116.379391, 39.861536]
			});

			map.setDefaultCursor('pointer');

			var marker = new AMap.Marker({
				icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
				position: [114.674593, 37.979577] //114.674593,37.979577
			})

			map.on('click', function(e) {
				map.remove([marker])
				marker = new AMap.Marker({
					icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					position: [e.lnglat.lng, e.lnglat.lat],
					offset: new AMap.Pixel(-10, -20)
				});

				var lng = e.lnglat.lng;
				var lat = e.lnglat.lat;
				map.setZoomAndCenter(14, [lng, lat]);


				map.add([marker]);
			})



			if ("WebSocket" in window) {
				//alert("您的浏览器支持 WebSocket!");
				// 初始化一个 WebSocket 对象，参数指明url
				var ws = new WebSocket("ws://localhost:9999");
				// WebSocket 连接时候触发
				ws.onopen = function() {
					//使用 send() 方法发送数据
					//ws.send("客户端发送的数据");
					console.log("数据发送中...");
				};
				// 接收服务端数据时触发
				ws.onmessage = function(evt) {
					var received_msg = evt.data;
					//console.log(received_msg);
					
					var data =  eval('(' + received_msg + ')');
					data = JSON.parse(data);
					
					console.log(data.lng +"---"+ data.lat);
					
					var i = 0;
					array.forEach(function(v){
					
						//sleep(3000);// 时间间隔3秒
						
						setTimeout(function() {
						        console.log(i);
								console.log(v);
								changePoint(v);
						    }, (i + 1) * 1000);
						// setTimeout(function (){
						 
							i++;
						// }, 3000);
						
					// console.log(v);
					// changePoint(v);
					
					});
					
					
					
				};
				//断开 web socket 连接成功触发事件
				ws.onclose = function() {
					// 关闭 websocket
					console.log("连接已关闭...");
				};
			} else {
				// 浏览器不支持 WebSocket
				alert("您的浏览器不支持 WebSocket!");
			}





			//参数n为休眠时间，单位为毫秒:
			function sleep(n) {
				var start = new Date().getTime();
				//  console.log('休眠前：' + start);
				while (true) {
					if (new Date().getTime() - start > n) {
						break;
					}
				}
				// console.log('休眠后：' + new Date().getTime());
			}


			//   map.on('complete', function() {
			//      // document.getElementById('container').innerHTML = "地图图块加载完毕！当前地图中心点为：" + map.getCenter();
			// array.forEach(function(v){

			// 	sleep(3000);// 时间间隔3秒
			// 	console.log(v); 
			// 	changePoint(v);


			// });
			//   });




			// setInterval(function(){ 
			// 	changePoint();
			// }, 3000);



			function changePoint(point) {
				map.remove([marker])
				
				var lng = point.lng;
				var lat = point.lat;
				
				marker = new AMap.Marker({
					icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					position: [lng, lat],
					offset: new AMap.Pixel(-10, -20)
				});
				
				map.setZoomAndCenter(point.zoom, [lng, lat]);
				
				map.add([marker]);
			}
		</script>
	</body>
</html>

houzhanwublog

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
高德地图中心点实时切换特效

使用nodejs 模拟websocket 服务端var WebSocketServer = require('ws').Server,wss = new WebSocketServer({ port: 9999 });wss.on('connection', function (ws) { console.log('client connected'); // ws.on(...
复制链接

扫一扫