gdmap-utils 1.1.2 → 1.1.4

package/examples/3_MarkerLayer.html

@@ -7,7 +7,10 @@
       name="viewport"
       content="initial-scale=1.0, user-scalable=no, width=device-width"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@5.0.2/reset.min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/reset.css@5.0.2/reset.min.css"
+    />
     <link
       rel="stylesheet"
       href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
@@ -29,7 +32,7 @@
         color: #fff;
         border: 1px solid rgba(27, 204, 253, 0.6588);
       }
-      
+
       .control-panel {
         position: fixed;
         top: 10px;
@@ -38,9 +41,9 @@
         background-color: white;
         padding: 10px;
         border-radius: 5px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       }
-      
+
       .control-panel button {
         margin: 5px;
         padding: 8px 12px;
@@ -55,25 +58,25 @@
       <button id="addBtn">添加标记</button>
       <button id="removeBtn">删除标记</button>
       <button id="removeByIdBtn">按ID删除</button>
-      <br><br>
-      <input type="text" id="markerIdInput" placeholder="输入标记ID">
+      <br /><br />
+      <input type="text" id="markerIdInput" placeholder="输入标记ID" />
       <button id="toggleLabelBtn">切换标签显示</button>
       <button id="refreshIconBtn">刷新图标</button>
-      <br><br>
+      <br /><br />
       <button id="fitViewBtn">自适应视图</button>
       <button id="zoomOutBtn">缩小视图</button>
-      <br><br>
+      <br /><br />
       <button id="showBtn">显示图层</button>
       <button id="hideBtn">隐藏图层</button>
       <button id="getAllBtn">获取所有标记</button>
-      <br><br>
+      <br /><br />
       <button id="clearAllBtn">清空所有标记</button>
       <button id="reloadBtn">重新加载图层</button>
       <button id="destroyBtn">销毁图层</button>
     </div>
     <!-- 加载地图JSAPI脚本 -->
-    <script src="../dist/index.js"></script>
-    <script>
+    <!-- <script src="../dist/index.js"></script> -->
+    <script defer>
       const data = [
         {
           id: 5194,
@@ -281,273 +284,282 @@
         },
       ];
 
-      const { createMapUtils } = MapUtils;
+      window.onload = () => {
 
-      const loaderOpts = {
-        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ['AMap.MapType', 'AMap.MoveAnimation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        key: '9506c73ed67acb0a09f1aabf88df4819',
-      };
+        const createMapUtils = MapUtils.createMapUtils;
 
-      test();
-
-      async function test() {
-        const mapUtils = await createMapUtils(
-          {
-            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
-            zoom: 11, // 初始化地图层级
-            center: [data[0].jd, data[1].wd], // 初始化地图中心点
-            mountSelector: 'container',
-          },
-          loaderOpts
-        );
-        /* 
-
-*/    
-        window.cleanPointLayer = mapUtils.createLayer({
-          layerType: 'markerLayer',
-          layerName: 'cleanPointLayer',
-          getIconUrl(item) {
-            if (window.flag) {
-              return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png';
-            }
-            return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
-          },
-          getOverlayOpts(item, index, MapUtils) {
-            return {
-              anchor: 'bottom-center',
-              clickable: true,
-              zooms: [2, 20],
-              zIndex: 1000,
-           /*    label: {
+        const loaderOpts = {
+          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+          plugins: ['AMap.MapType', 'AMap.MoveAnimation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+          key: '9506c73ed67acb0a09f1aabf88df4819',
+        };
+        test();
+
+        async function test() {
+          const mapUtils = await createMapUtils(
+            {
+              viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
+              zoom: 11, // 初始化地图层级
+              center: [data[0].jd, data[1].wd], // 初始化地图中心点
+              mountSelector: 'container',
+            },
+            loaderOpts
+          );
+
+          window.cleanPointLayer = mapUtils.createBaseMarkerLayer({
+            layerType: 'markerLayer',
+            layerName: 'cleanPointLayer',
+            getIconUrl(item) {
+              if (window.flag) {
+                return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png';
+              }
+              return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
+            },
+            getOverlayOpts(item, index, MapUtils) {
+              return {
+                anchor: 'bottom-center',
+                clickable: true,
+                zooms: [2, 20],
+                zIndex: 1000,
+                /*    label: {
                 content: `<div class="labelTitle">${item.overlayData.title}</div>`,
                 offset: MapUtils.Pixel(0, -5),
                 direction: 'top',
               }, */
-            };
-          },
-          overlayList: data.slice(0, 10).map(item => {
-            return {
-              overlayData: {
-                lon: item.jd,
-                lat: item.wd,
-                title: item.sydmc,
+              };
+            },
+            overlayList: data.slice(0, 10).map(item => {
+              return {
+                overlayData: {
+                  lon: item.jd,
+                  lat: item.wd,
+                  title: item.sydmc,
+                  id: item.id,
+                  extData: item,
+                },
                 id: item.id,
-                extData: item,
+                labelShowed: true,
+              };
+            }),
+          });
+
+          cleanPointLayer.bindEventOverlays('click', () => {
+            console.log('哈哈哈哈');
+          });
+          // 图层适配
+          cleanPointLayer.overlayFitMap();
+
+          // 为add和remove方法添加测试代码
+          const addBtn = document.getElementById('addBtn');
+          const removeBtn = document.getElementById('removeBtn');
+          const removeByIdBtn = document.getElementById('removeByIdBtn');
+
+          // 添加新标记的计数器
+          let newMarkerId = 10000;
+
+          // 点击添加标记按钮
+          addBtn.addEventListener('click', () => {
+            // 创建一个新的标记数据
+            const newMarker = {
+              overlayData: {
+                lon: 121.515844 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成经度
+                lat: 31.218427 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成纬度
+                title: `新标记${newMarkerId}`,
+                id: newMarkerId,
+                extData: { id: newMarkerId, sydmc: `新标记${newMarkerId}` },
               },
-              id: item.id,
+              id: newMarkerId,
               labelShowed: true,
             };
-          }),
-        });
-
-        cleanPointLayer.bindEventOverlays('click', () => {
-          console.log('哈哈哈哈');
-        });
-        // 图层适配
-        cleanPointLayer.overlayFitMap();
-        
-        // 为add和remove方法添加测试代码
-        const addBtn = document.getElementById('addBtn');
-        const removeBtn = document.getElementById('removeBtn');
-        const removeByIdBtn = document.getElementById('removeByIdBtn');
-        
-        // 添加新标记的计数器
-        let newMarkerId = 10000;
-        
-        // 点击添加标记按钮
-        addBtn.addEventListener('click', () => {
-          // 创建一个新的标记数据
-          const newMarker = {
-            overlayData: {
-              lon: 121.515844 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成经度
-              lat: 31.218427 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成纬度
-              title: `新标记${newMarkerId}`,
-              id: newMarkerId,
-              extData: { id: newMarkerId, sydmc: `新标记${newMarkerId}` }
-            },
-            id: newMarkerId,
-            labelShowed: true
-          };
-          
-          // 调用add方法添加标记
-          cleanPointLayer.add([newMarker]);
-          
-          console.log(`添加了新标记: ${newMarkerId}`);
-          newMarkerId++;
-        });
-        
-        // 点击删除标记按钮
-        removeBtn.addEventListener('click', () => {
-          // 获取所有标记的ID
-          const markerIds = cleanPointLayer.getAllOverlay();
-          
-          if (markerIds.length > 0) {
-            // 随机选择一个标记ID
-            const randomId = markerIds.pop();
-            
-            // 调用remove方法删除标记
-            cleanPointLayer.remove([randomId]);
-            
-            console.log(`删除了标记`,randomId);
-          } else {
-            console.log('没有可删除的标记');
-          }
-        });
-        
-        // 点击按ID删除按钮
-        removeByIdBtn.addEventListener('click', () => {
-          // 输入要删除的标记ID
-          const markerId = prompt('请输入要删除的标记ID:');
-          
-          if (markerId) {
-            try {
-              const id = parseInt(markerId);
-              
-              // 调用remove方法按ID删除标记
-              cleanPointLayer.remove([id]);
-              
-              console.log(`删除了标记: ${id}`);
-            } catch (error) {
-              console.error('无效的标记ID');
+
+            // 调用add方法添加标记
+            cleanPointLayer.add([newMarker]);
+
+            console.log(`添加了新标记: ${newMarkerId}`);
+            newMarkerId++;
+          });
+
+          // 点击删除标记按钮
+          removeBtn.addEventListener('click', () => {
+            // 获取所有标记的ID
+            const markerIds = cleanPointLayer.getAllOverlay();
+
+            if (markerIds.length > 0) {
+              // 随机选择一个标记ID
+              const randomId = markerIds.pop();
+
+              // 调用remove方法删除标记
+              cleanPointLayer.remove([randomId]);
+
+              console.log(`删除了标记`, randomId);
+            } else {
+              console.log('没有可删除的标记');
+            }
+          });
+
+          // 点击按ID删除按钮
+          removeByIdBtn.addEventListener('click', () => {
+            // 输入要删除的标记ID
+            const markerId = prompt('请输入要删除的标记ID:');
+
+            if (markerId) {
+              try {
+                const id = parseInt(markerId);
+
+                // 调用remove方法按ID删除标记
+                cleanPointLayer.remove([id]);
+
+                console.log(`删除了标记: ${id}`);
+              } catch (error) {
+                console.error('无效的标记ID');
+              }
             }
-          }
-        });
-        
-        // 点击切换标签显示按钮
-        const toggleLabelBtn = document.getElementById('toggleLabelBtn');
-        const markerIdInput = document.getElementById('markerIdInput');
-        const refreshIconBtn = document.getElementById('refreshIconBtn');
-        
-        toggleLabelBtn.addEventListener('click', () => {
-          const markerId = markerIdInput.value;
-          
-          if (markerId) {
-            try {
-              const id = parseInt(markerId);
-              
-              // 查找该标记当前的标签显示状态
-              const overlayIndex = cleanPointLayer.overlayList.findIndex(item => item.id === id);
-              
-              if (overlayIndex !== -1) {
-                // 获取当前标签显示状态并取反
-                const currentLabelShow = cleanPointLayer.overlayList[overlayIndex].labelShowed;
-                const newLabelShow = !currentLabelShow;
-                
-                // 调用refreshOverlayLabel方法切换标签显示状态
-                cleanPointLayer.refreshOverlayLabel(id, newLabelShow);
-                
-                console.log(`标记 ${id} 的标签显示状态已切换为: ${newLabelShow ? '显示' : '隐藏'}`);
-              } else {
-                console.error('未找到指定ID的标记');
+          });
+
+          // 点击切换标签显示按钮
+          const toggleLabelBtn = document.getElementById('toggleLabelBtn');
+          const markerIdInput = document.getElementById('markerIdInput');
+          const refreshIconBtn = document.getElementById('refreshIconBtn');
+
+          toggleLabelBtn.addEventListener('click', () => {
+            const markerId = markerIdInput.value;
+
+            if (markerId) {
+              try {
+                const id = parseInt(markerId);
+
+                // 查找该标记当前的标签显示状态
+                const overlayIndex = cleanPointLayer.overlayList.findIndex(
+                  item => item.id === id
+                );
+
+                if (overlayIndex !== -1) {
+                  // 获取当前标签显示状态并取反
+                  const currentLabelShow =
+                    cleanPointLayer.overlayList[overlayIndex].labelShowed;
+                 cleanPointLayer.overlayList[overlayIndex].labelShowed = !currentLabelShow;
+
+                  // 调用refreshOverlayLabel方法切换标签显示状态
+                  cleanPointLayer.refreshOverlayLabel(id);
+
+                  console.log(
+                    `标记 ${id} 的标签显示状态已切换为: ${cleanPointLayer.overlayList[overlayIndex].labelShowed ? '显示' : '隐藏'}`
+                  );
+                } else {
+                  console.error('未找到指定ID的标记');
+                }
+              } catch (error) {
+                console.error('无效的标记ID',error);
               }
-            } catch (error) {
-              console.error('无效的标记ID');
+            } else {
+              console.error('请输入标记ID');
             }
-          } else {
-            console.error('请输入标记ID');
-          }
-        });
-        
-        // 点击刷新图标按钮
-        refreshIconBtn.addEventListener('click', () => {
-          const markerId = markerIdInput.value;
-          
-          if (markerId) {
-            try {
-              const id = parseInt(markerId);
-              
-              // 查找该标记
-              const overlayIndex = cleanPointLayer.overlayList.findIndex(item => item.id === id);
-              
-              if (overlayIndex !== -1) {
-                // 切换窗口标记，用于改变图标
-                window.flag = !window.flag;
-                
-                // 调用refreshOverlayIcon方法刷新图标
-                cleanPointLayer.refreshOverlayIcon(id);
-                
-                console.log(`标记 ${id} 的图标已刷新`);
-              } else {
-                console.error('未找到指定ID的标记');
+          });
+
+          // 点击刷新图标按钮
+          refreshIconBtn.addEventListener('click', () => {
+            const markerId = markerIdInput.value;
+
+            if (markerId) {
+              try {
+                const id = parseInt(markerId);
+
+                // 查找该标记
+                const overlayIndex = cleanPointLayer.overlayList.findIndex(
+                  item => item.id === id
+                );
+
+                if (overlayIndex !== -1) {
+                  // 切换窗口标记，用于改变图标
+                  window.flag = !window.flag;
+
+                  // 调用refreshOverlayIcon方法刷新图标
+                  cleanPointLayer.refreshOverlayIcon(id);
+
+                  console.log(`标记 ${id} 的图标已刷新`);
+                } else {
+                  console.error('未找到指定ID的标记');
+                }
+              } catch (error) {
+                console.error('无效的标记ID');
               }
-            } catch (error) {
-              console.error('无效的标记ID');
+            } else {
+              console.error('请输入标记ID');
             }
-          } else {
-            console.error('请输入标记ID');
-          }
-        });
-        
-        // 点击自适应视图按钮
-        const fitViewBtn = document.getElementById('fitViewBtn');
-        const zoomOutBtn = document.getElementById('zoomOutBtn');
-        
-        fitViewBtn.addEventListener('click', () => {
-          // 调用overlayFitMap方法，使地图自适应显示所有标记
-          cleanPointLayer.overlayFitMap();
-          console.log('已调用overlayFitMap方法，地图已自适应显示所有标记');
-        });
-        
-        // 点击缩小视图按钮
-        zoomOutBtn.addEventListener('click', () => {
-          // 先缩小地图视图
-          const currentZoom = mapUtils.map.getZoom();
-          mapUtils.map.setZoom(currentZoom - 2);
-          console.log('地图已缩小，当前缩放级别:', mapUtils.map.getZoom());
-          
-          // 提示用户可以点击"自适应视图"按钮来测试效果
-          console.log('现在可以点击"自适应视图"按钮，测试overlayFitMap方法的效果');
-        });
-
-        // 点击显示图层按钮
-        const showBtn = document.getElementById('showBtn');
-        showBtn.addEventListener('click', () => {
-          cleanPointLayer.show();
-          console.log('已调用show方法，图层已显示');
-        });
-
-        // 点击隐藏图层按钮
-        const hideBtn = document.getElementById('hideBtn');
-        hideBtn.addEventListener('click', () => {
-          cleanPointLayer.hide();
-          console.log('已调用hide方法，图层已隐藏');
-        });
-
-        // 点击获取所有标记按钮
-        const getAllBtn = document.getElementById('getAllBtn');
-        getAllBtn.addEventListener('click', () => {
-          const allOverlays = cleanPointLayer.getAllOverlay();
-          console.log('已调用getAllOverlay方法，所有标记:', allOverlays);
-          alert(`当前共有 ${allOverlays.length} 个标记`);
-        });
-
-        // 点击清空所有标记按钮
-        const clearAllBtn = document.getElementById('clearAllBtn');
-        clearAllBtn.addEventListener('click', () => {
-          if (confirm('确定要清空所有标记吗？')) {
-            cleanPointLayer.clearAllOverlay();
-            console.log('已调用clearAllOverlay方法，所有标记已清空');
-          }
-        });
-
-        // 点击重新加载图层按钮
-        const reloadBtn = document.getElementById('reloadBtn');
-        reloadBtn.addEventListener('click', () => {
-          window.flag = !window.flag
-          cleanPointLayer.reload();
-          console.log('已调用reload方法，图层已重新加载');
-        });
-
-        // 点击销毁图层按钮
-        const destroyBtn = document.getElementById('destroyBtn');
-        destroyBtn.addEventListener('click', () => {
-          if (confirm('确定要销毁图层吗？销毁后将无法恢复')) {
-            cleanPointLayer.destroy();
-            console.log('已调用destroy方法，图层已销毁');
-          }
-        });
-      }
+          });
+
+          // 点击自适应视图按钮
+          const fitViewBtn = document.getElementById('fitViewBtn');
+          const zoomOutBtn = document.getElementById('zoomOutBtn');
+
+          fitViewBtn.addEventListener('click', () => {
+            // 调用overlayFitMap方法，使地图自适应显示所有标记
+            cleanPointLayer.overlayFitMap();
+            console.log('已调用overlayFitMap方法，地图已自适应显示所有标记');
+          });
+
+          // 点击缩小视图按钮
+          zoomOutBtn.addEventListener('click', () => {
+            // 先缩小地图视图
+            const currentZoom = mapUtils.map.getZoom();
+            mapUtils.map.setZoom(currentZoom - 2);
+            console.log('地图已缩小，当前缩放级别:', mapUtils.map.getZoom());
+
+            // 提示用户可以点击"自适应视图"按钮来测试效果
+            console.log(
+              '现在可以点击"自适应视图"按钮，测试overlayFitMap方法的效果'
+            );
+          });
+
+          // 点击显示图层按钮
+          const showBtn = document.getElementById('showBtn');
+          showBtn.addEventListener('click', () => {
+            cleanPointLayer.show();
+            console.log('已调用show方法，图层已显示');
+          });
+
+          // 点击隐藏图层按钮
+          const hideBtn = document.getElementById('hideBtn');
+          hideBtn.addEventListener('click', () => {
+            cleanPointLayer.hide();
+            console.log('已调用hide方法，图层已隐藏');
+          });
+
+          // 点击获取所有标记按钮
+          const getAllBtn = document.getElementById('getAllBtn');
+          getAllBtn.addEventListener('click', () => {
+            const allOverlays = cleanPointLayer.getAllOverlay();
+            console.log('已调用getAllOverlay方法，所有标记:', allOverlays);
+            alert(`当前共有 ${allOverlays.length} 个标记`);
+          });
+
+          // 点击清空所有标记按钮
+          const clearAllBtn = document.getElementById('clearAllBtn');
+          clearAllBtn.addEventListener('click', () => {
+            if (confirm('确定要清空所有标记吗？')) {
+              cleanPointLayer.clearAllOverlay();
+              console.log('已调用clearAllOverlay方法，所有标记已清空');
+            }
+          });
+
+          // 点击重新加载图层按钮
+          const reloadBtn = document.getElementById('reloadBtn');
+          reloadBtn.addEventListener('click', () => {
+            window.flag = !window.flag;
+            cleanPointLayer.reload();
+            console.log('已调用reload方法，图层已重新加载');
+          });
+
+          // 点击销毁图层按钮
+          const destroyBtn = document.getElementById('destroyBtn');
+          destroyBtn.addEventListener('click', () => {
+            if (confirm('确定要销毁图层吗？销毁后将无法恢复')) {
+              cleanPointLayer.destroy();
+              console.log('已调用destroy方法，图层已销毁');
+            }
+          });
+        }
+      };
     </script>
   </body>
 </html>