添加测试

2024-06-27 15:05:38 +08:00 · 2024-06-27 15:05:38 +08:00 · ffb5a8841e
parent 92e662beb6
commit ffb5a8841e
1 changed files with 105 additions and 0 deletions
--- a/src/test/martin_loading.html
+++ b/src/test/martin_loading.html
@ -0,0 +1,105 @@
+<!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>Document</title>
+    <script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/Archive/mapbox-gl.js"></script>
+    <link href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/mapbox-gl.css"/>
+    <style>
+        #map{
+            height: 100vh;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <button style="position: absolute;left: 100px;top: 50px;" onClick="filterFeature()">filter</button>
+    <script>
+        
+        const TIANDITU_URL = 'http://t0.tianditu.gov.cn';
+        const tdtKey = "bf156eb3c72350d62b008dc8a4ae1016";
+        const tdtConfig = {
+            code: 'tdt_img',
+            name: '天地图影像',
+            source: {
+                type: 'raster',
+                tiles: [
+                    `${TIANDITU_URL}/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${tdtKey}`
+                ],
+                tileSize: 256,
+                minzoom: 0,
+                maxzoom: 22
+            },
+            layer: {
+                id: 'tdt-img-tiles',
+                type: 'raster',
+                minzoom: 0,
+                maxzoom: 22,
+                layout: { visibility: 'visible' }
+            }
+        }
+        var map = new mapboxgl.Map({
+            container:'map',
+            style:{
+                "version":8,
+                "sources":{},
+                "layers":[],
+                glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+            },
+            center: [112.39747, 22.908823], // 广东
+            zoom: 8, // starting zoom 地图初始的拉伸比例
+            pitch: 0, // 地图的角度，不写默认是0，取值是0-85度，一般在3D中使用
+            bearing: 0, // 地图的初始方向，值是北的逆时针度数，默认是0，即是正北
+            antialias: true, // 抗锯齿，通过false关闭提升性能
+            minZoom: 3,
+            maxZoom: 17.36
+        });
+        map.on('load', () => {
+            // 天地图底图加载
+            addLayerConfig(tdtConfig);
+            addMvt();
+        });
+        function addLayerConfig(layerConfig){
+            const {code, source,layer} = layerConfig;
+            map.addSource(code, source);
+            const layerParams = {
+                ...layer,
+                source: code
+            };
+            // 添加图层
+            map.addLayer(layerParams);
+        }
+        var ep = ['>=', 'id', 3442];
+        var mvtLayer;
+        var booltemp=false
+        function filterFeature(){
+            if(booltemp){
+                map.setLayoutProperty('lines', 'visibility', 'visible');
+                booltemp=!booltemp
+            }else{
+
+                map.setLayoutProperty('lines', 'visibility', 'none');
+                booltemp=!booltemp
+            }
+        }
+        function addMvt(){
+            mvtLayer = map.addLayer({
+                id: 'lines',
+                type: 'fill',
+                source: {
+                    type: 'vector',
+                    url: 'http://localhost:3000/lablepolygon'
+                },
+                'source-layer': 'lablepolygon',
+                paint: {
+                	'fill-color': 'red'
+                },
+            //    filter : ep
+            });
+        }
+    </script>
+</body>
+</html>