panhui
/
Dingdong_client


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOMOverlay</title>
</head>
<script charset="utf-8"
	src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
	html,
	body {
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	#container {
		width: 100%;
		height: 100%;
	}
</style>

<body onload="initMap()">
	<div id="container"></div>
	<script>
		var SVG_NS = 'http://www.w3.org/2000/svg';
		// 自定义环状饼图 - 继承DOMOverlay
		function Donut(options) {
			TMap.DOMOverlay.call(this, options);
		}

		Donut.prototype = new TMap.DOMOverlay();

		// 初始化
		Donut.prototype.onInit = function (options) {
			this.position = options.position;
			this.data = options.data;
			this.minRadius = options.minRadius || 0;
			this.maxRadius = options.maxRadius || 50;
		};

		// 销毁时需解绑事件监听
		Donut.prototype.onDestroy = function () {
			if (this.onClick) {
				this.dom.removeEventListener(this.onClick);
			}
		};

		// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
		Donut.prototype.createDOM = function () {
			let svg = document.createElementNS(SVG_NS, 'svg');

			svg.setAttribute('width', '64px');
			svg.setAttribute('height', '75px');
			svg.style.cssText = 'position:absolute;top:0px;left:0px;';
			html = `<path fill-rule="evenodd"  opacity="0.502" fill="rgb(0, 0, 0)"
 d="M31.000,50.787 C47.016,50.787 60.000,55.715 60.000,61.793 C60.000,67.872 47.016,72.799 31.000,72.799 C14.984,72.799 2.000,67.872 2.000,61.793 C2.000,55.715 14.984,50.787 31.000,50.787 Z"/>
<path fill-rule="evenodd"  stroke="rgb(241, 90, 60)" stroke-width="4px" stroke-linecap="butt" stroke-linejoin="miter" fill="rgb(241, 90, 60)"
 d="M56.154,60.538 C53.385,61.278 50.538,59.639 49.796,56.878 C49.796,56.878 47.801,55.106 45.308,52.447 L43.260,60.792 L18.805,60.792 L16.779,52.535 C14.237,55.187 12.199,56.952 12.199,56.952 C11.457,59.715 8.614,61.355 5.847,60.614 C3.080,59.874 1.438,57.034 2.180,54.271 L13.538,32.672 C13.575,32.535 13.639,32.414 13.686,32.282 C13.712,32.216 13.735,32.146 13.762,32.082 C13.974,31.558 14.254,31.084 14.606,30.670 C15.128,30.021 15.766,29.529 16.521,29.269 C17.015,29.059 17.537,28.921 18.082,28.872 C18.751,28.358 20.921,26.742 23.554,25.303 C20.647,22.983 18.781,19.423 18.781,15.425 C18.781,8.431 24.476,2.762 31.500,2.762 C38.524,2.762 44.219,8.431 44.219,15.425 C44.219,19.606 42.174,23.303 39.036,25.609 C41.333,26.910 43.200,28.280 43.903,28.812 C44.695,28.882 45.452,29.122 46.120,29.524 C46.662,29.816 47.132,30.238 47.530,30.756 C47.536,30.763 47.542,30.770 47.548,30.778 C47.736,31.024 47.904,31.294 48.057,31.582 C48.076,31.619 48.093,31.655 48.111,31.692 C48.293,32.051 48.454,32.431 48.582,32.842 L59.825,54.198 C60.567,56.959 58.924,59.798 56.154,60.538 Z"/>
`
			svg.innerHTML = html


			// click事件监听
			this.onClick = () => {
				// DOMOverlay继承自EventEmitter，可以使用emit触发事件
				this.emit('click');
			};
			svg.addEventListener('click', this.onClick);
			return svg;
		};

		// 更新DOM元素，在地图移动/缩放后执行
		Donut.prototype.updateDOM = function () {
			if (!this.map) {
				return;
			}

			// 经纬度坐标转容器像素坐标
			let pixel = this.map.projectToContainer(this.position);

			// 使饼图中心点对齐经纬度坐标点
			let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
			let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
			this.dom.style.transform = `translate(${left}, ${top})`;
		};

		// 使用SVG创建环状饼图
		function createDonut(data, minRadius, maxRadius) {
			const colorList = [
				'#7AF4FF',
				'#67D7FF',
				'#52B5FF',
				'#295BFF'
			];
			let sum = data.reduce((prev, curr) => prev + curr, 0);
			let angle = 0;

			let group = document.createElementNS(SVG_NS, "g");


			// 在中心创建一个圆形
			let circleShape = document.createElementNS(SVG_NS, 'circle');
			circleShape.setAttribute('style', 'fill: #FFFFFF');
			circleShape.setAttribute('cx', 0);
			circleShape.setAttribute('cy', 0);
			circleShape.setAttribute('r', minRadius);
			group.appendChild(circleShape);

			// 绘制文字
			let textShape = document.createElementNS(SVG_NS, 'text');
			textShape.setAttribute('x', 0);
			textShape.setAttribute('y', '0.3em');
			textShape.setAttribute('text-anchor', 'middle');
			textShape.innerHTML = sum;
			group.appendChild(textShape);

			return group;
		}

		window.Donut = Donut;
	</script>
	<script type="text/javascript">
		var map;
		function initMap() {
			// 初始化地图
			map = new TMap.Map("container", {
				zoom: 12, // 设置地图缩放级别
				center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标
			});

			let donutList = [
				new Donut({
					map,
					position: new TMap.LatLng(39.96030543872138, 116.25809083213608),
					type: 'user'
				}),
				new Donut({
					map,
					position: new TMap.LatLng(39.9986945980902, 116.33598362780685),
					type: 'merchat'
				}),
				new Donut({
					map,
					position: new TMap.LatLng(40.02906301748584, 116.25499991104516),
					type: 'rider'
				})
			];

			donutList.forEach((donut, index) => {
				donut.on('click', () => {
					console.log(`第${index}个环形图被点击，位置为${donut.position}`);
				});
			});
		}
	</script>
</body>

</html>