yeguodong
/
web_dist


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
							<!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>