wangzhe
/
screen-demo


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>features定位</title>
    <link rel="stylesheet" href="../../dist/index.css" />
    <script src="../../dist/index.js"></script>
    <style>
        body {
            margin: 0
        }
        #map {
            height: 100vh;
        }
        .control {
            position: absolute;
            top: 20px;
            left: 40px;
            padding: 10px 10px 0;
            background: #fff;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="map"></div>
    <div class="control">
        <button id="fixed">setFitView</button>
    </div>
</div>
</body>

<script>
    let map = new CTMapOl.extend.InitMap({
        domId: 'map'
    })
    function addCircle(p) {
        // 创建点要素
        let pointFeature = new CTMapOl.Feature({
            geometry: new CTMapOl.geom.Point(CTMapOl.proj.fromLonLat(p)) // 设置点要素的位置（这里以成都为例）
        });
        // 创建点要素的样式
        let pointStyle = new CTMapOl.style.Style({
            image: new CTMapOl.style.Circle({
                radius: 6,
                fill: new CTMapOl.style.Fill({ color: 'red' }),
                stroke: new CTMapOl.style.Stroke({ color: 'white', width: 2 })
            })
        });
        // 将点要素和样式添加到矢量图层
        let vectorLayer = new CTMapOl.layer.Vector({
            source: new CTMapOl.source.Vector({
                features: [pointFeature]
            }),
            style: pointStyle
        });
        // 将矢量图层添加到地图
        map.map.addLayer(vectorLayer);
        return pointFeature;
    }
    let points = [];
    [[104.06, 30.67],[105.06, 31.67],[114.06, 20.67]].forEach(v => {
        let f = addCircle(v);
        points.push(f)
    })

    let mapTool = new CTMapOl.extend.MapBasics(map)
    document.getElementById('fixed').onclick = () => {
        mapTool.setFitView({features: points})
    }
</script>
</html>