You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.5 KiB
86 lines
2.5 KiB
<!--
|
|
* @Description:
|
|
* @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
|
|
* @Date: 2022-10-27 19:25:47
|
|
* @LastEditTime: 2022-10-27 23:09:58
|
|
* @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY li
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>动态辐射圈</title>
|
|
<script
|
|
charset="utf-8"
|
|
src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"
|
|
></script>
|
|
<style type="text/css">
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
#container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#name {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 20px;
|
|
font-size: 12px;
|
|
color:#ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="initMap()">
|
|
<div id="container"></div>
|
|
<div id="name">北京市道路积水预警</div>
|
|
<script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/beijing_pondingWarning.js"></script>
|
|
<script>
|
|
function initMap() {
|
|
//初始化地图
|
|
var map = new TMap.Map("container", {
|
|
zoom: 11.5, //设置地图缩放级别
|
|
center: new TMap.LatLng(39.914961477236766, 116.3898104098216), //设置地图中心点坐标
|
|
mapStyleId: "style4", //个性化样式2
|
|
renderOptions: {
|
|
enableBloom: true, //泛光
|
|
},
|
|
});
|
|
//初始化辐射圈
|
|
var radiationCircle = new TMap.visualization.Radiation({
|
|
styles: {
|
|
style2: {
|
|
fillColor: "rgba(29,250,242,0.9)", //辐射圈填充颜色
|
|
},
|
|
},
|
|
processAnimation: {
|
|
duration: 3000, //辐射圈半径从0到最大半径的时长，单位为ms
|
|
},
|
|
})
|
|
.addTo(map)
|
|
radiationCircle.setData(radiationData);
|
|
|
|
//初始化散点图并添加至map图层
|
|
var dot = new TMap.visualization.Dot({
|
|
styles: {
|
|
style1: {
|
|
radius: 2, //圆形半径
|
|
},
|
|
style2: {
|
|
fillColor: "rgba(29,250,242,1)", //圆形填充颜色
|
|
radius: 3, //圆形半径
|
|
},
|
|
},
|
|
enableBloom: true, // 泛光
|
|
})
|
|
.addTo(map)
|
|
dot.setData(dotData); //设置数据
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|