|
@@ -0,0 +1,146 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+
|
|
|
+ <script type="text/javascript"
|
|
|
+ src="https://api.map.baidu.com/api?v=2.0&ak=B74ya3RGhwWIdc8dwN2SfZOYD9G8kXiu"></script>
|
|
|
+ <script src="https://mapv.baidu.com/build/mapv.min.js"></script>
|
|
|
+
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>你好</title>
|
|
|
+
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ html, body {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<body>
|
|
|
+<div id="allmap" style="height: 100%;width: 100%"></div>
|
|
|
+</body>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const thyyLocation = new BMap.Point(112.96716239793697, 28.309655062968343)
|
|
|
+ let thyy = null
|
|
|
+ let event = null
|
|
|
+ let patientInfo = null
|
|
|
+
|
|
|
+ function setIcon(val) {
|
|
|
+ thyy = val
|
|
|
+ }
|
|
|
+
|
|
|
+ function eventFunc(data) {
|
|
|
+ event = data
|
|
|
+ }
|
|
|
+
|
|
|
+ function createADrawing(data) {
|
|
|
+ map.clearOverlays()
|
|
|
+ createAHospitalLogo()
|
|
|
+
|
|
|
+ let points = []
|
|
|
+
|
|
|
+ for (let i = 0, len = data.length; i < len; i++) {
|
|
|
+ let item = data[i];
|
|
|
+ points.push({
|
|
|
+ geometry: {
|
|
|
+ type: 'Point',
|
|
|
+ patientData: item,
|
|
|
+ coordinates: [item.longitude, item.latitude]
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const dataSet = new mapv.DataSet(points);
|
|
|
+
|
|
|
+ const options = {
|
|
|
+ shadowColor: 'rgba(255, 250, 50, 1)',
|
|
|
+ shadowBlur: 10,
|
|
|
+ // 非聚合点的颜色和大小,未设置icon或icon获取失败时使用
|
|
|
+ fillStyle: 'rgba(255, 50, 0, 1.0)',
|
|
|
+ size: 50 / 3 / 2, // 非聚合点的半径
|
|
|
+ minSize: 8, // 聚合点最小半径
|
|
|
+ maxSize: 31, // 聚合点最大半径
|
|
|
+ globalAlpha: 0.8, // 透明度
|
|
|
+ clusterRadius: 150, // 聚合像素半径
|
|
|
+ maxClusterZoom: 18, // 最大聚合的级别
|
|
|
+ maxZoom: 19, // 最大显示级别
|
|
|
+ minPoints: 5, // 最少聚合点数,点数多于此值才会被聚合
|
|
|
+ extent: 400, // 聚合的细腻程度,越高聚合后点越密集
|
|
|
+ label: { // 聚合文本样式
|
|
|
+ show: true, // 是否显示
|
|
|
+ fillStyle: 'white',
|
|
|
+ },
|
|
|
+ gradient: {0: "blue", 0.5: "#28f51a", 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色
|
|
|
+ draw: 'cluster',
|
|
|
+ methods: {
|
|
|
+ click(point) {
|
|
|
+ if (point?.geometry?.patientData) {
|
|
|
+ deletePreviousPunctuation()
|
|
|
+ // 清空上一次的患者信息
|
|
|
+ if (patientInfo !== null) {
|
|
|
+ map.removeOverlay(new BMap.Point(patientInfo.longitude, patientInfo.latitude))
|
|
|
+ }
|
|
|
+ // 复制下一次患者信息
|
|
|
+ patientInfo = point?.geometry?.patientData
|
|
|
+ patientInfo.mapPoint = new BMap.Point(patientInfo.longitude, patientInfo.latitude)
|
|
|
+ event['pointClick'](patientInfo)
|
|
|
+ locateThePatient()
|
|
|
+ marker()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ new mapv.baiduMapLayer(map, dataSet, options);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function deletePreviousPunctuation() {
|
|
|
+ let data = map.getOverlays()
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ let item = data[i]
|
|
|
+ if (data[i].id) {
|
|
|
+ if (data[i].id === patientInfo.patNo) {
|
|
|
+ map.removeOverlay(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function locateThePatient() {
|
|
|
+ map.panTo(patientInfo.mapPoint)
|
|
|
+ }
|
|
|
+
|
|
|
+ const marker = () => {
|
|
|
+ const marker = new BMap.Marker(patientInfo.mapPoint);
|
|
|
+ marker.id = patientInfo.patNo
|
|
|
+ map.addOverlay(marker)
|
|
|
+ }
|
|
|
+
|
|
|
+ function createAHospitalLogo() {
|
|
|
+ map.clearOverlays()
|
|
|
+ const myIcon = new BMap.Icon(thyy, new BMap.Size(40, 40));
|
|
|
+ myIcon.setImageSize(new BMap.Size(40, 40))
|
|
|
+ const marker = new BMap.Marker(thyyLocation, {
|
|
|
+ icon: myIcon
|
|
|
+ });
|
|
|
+ map.addOverlay(marker);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ window.onload = () => {
|
|
|
+ // 创建Map实例
|
|
|
+ window.map = new BMap.Map("allmap", {
|
|
|
+ enableMapClick: false
|
|
|
+ });
|
|
|
+ // 初始化地图,设置中心点坐标和地图级别
|
|
|
+ map.centerAndZoom(thyyLocation, 15);
|
|
|
+ // 开启鼠标滚轮缩放
|
|
|
+ map.enableScrollWheelZoom(true);
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</html>
|