From 82fb5033d5e1ee121825a612682b07659116417f Mon Sep 17 00:00:00 2001
From: sunxs <huxin@123.com>
Date: Fri, 21 Mar 2025 20:03:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=9C=8D=E5=8A=A1=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/新建 文本文档 (3).html          | 115 ++++++++++++++++++
 ...示例2：Mapbox加载CGCS2000矢量瓦片地图.html |  74 +++++++++++
 2 files changed, 189 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/views/新建 文本文档 (3).html
 create mode 100644 Dkl-vue3-ui-DP/src/views/示例2：Mapbox加载CGCS2000矢量瓦片地图.html
diff --git a/Dkl-vue3-ui-DP/src/views/新建 文本文档 (3).html b/Dkl-vue3-ui-DP/src/views/新建 文本文档 (3).html
new file mode 100644
index 0000000..f9494d0
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/新建 文本文档 (3).html	
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>地图服务加载样例代码（含打点功能）</title>
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <!-- 一张图定制版mapbox api -->
+    <script src="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js"></script>
+    <link
+      href="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.css"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+      }
+      /* 自定义标记点样式（可选） */
+      .custom-marker {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: #ff4444;
+        border: 2px solid white;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: bold;
+      }
+    </style>
+  </head>
+  <body>
+    <style>
+      .boxdraw {
+        background: rgba(56, 135, 190, 0.1);
+        border: 2px solid #3887be;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+      }
+    </style>
+
+    <div id="map"></div>
+
+    <script>
+      // mapbox api token
+      mapboxgl.accessToken =
+        "pk.eyJ1Ijoib25lZ2lzZXIiLCJhIjoiY2plZHptcnVuMW5tazMzcWVteHM2aGFsZiJ9.ERWP7zZ-N6fmNl3cRocJ1g";
+
+      // 初始化地图对象
+      var map = new mapboxgl.Map({
+        container: "map",
+        style: "http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/blue_yj-225.json",
+        center: { lng: 109, lat: 35.655 }, // 陕西中心坐标
+        zoom: 6,
+        pitch: 5,
+        minZoom: 5,
+        maxZoom: 17,
+      });
+
+      // 加载指北针、比例尺
+      map.addControl(new mapboxgl.NavigationControl());
+      map.addControl(
+        new mapboxgl.ScaleControl({ maxWidth: 80, unit: "metric" }),
+        "bottom-left"
+      );
+
+      // -------------------------- 打点核心逻辑 --------------------------
+      // 地图加载完成后执行（确保地图容器已初始化）
+      map.on('load', function() {
+        // 1. 基础打点：默认图标 + 弹窗（以西安为例）
+        const xiAnMarker = new mapboxgl.Marker()
+          .setLngLat([108.940174, 34.263161]) // 西安坐标（经纬度）
+          .setPopup(new mapboxgl.Popup().setHTML('<h3>西安市</h3><p>陕西省省会</p>')) // 点击弹窗
+          .addTo(map); // 挂载到地图
+
+        // 2. 自定义样式打点：自定义DOM样式（以宝鸡为例）
+        const baoJiMarker = new mapboxgl.Marker(document.createElement('div'))
+          .setElementClass('custom-marker') // 绑定自定义CSS类
+          .setElementContent('宝') // 标记点内文字
+          .setLngLat([107.273414, 34.361761]) // 宝鸡坐标
+          .setPopup(new mapboxgl.Popup().setHTML('<h3>宝鸡市</h3><p>炎帝故里</p>'))
+          .addTo(map);
+
+        // 3. 批量打点：循环添加多个城市（适合多坐标场景）
+        const cityPoints = [
+          { name: '咸阳市', lng: 108.707303, lat: 34.348743, desc: '秦都' },
+          { name: '延安市', lng: 109.492292, lat: 36.600692, desc: '革命圣地' },
+          { name: '汉中市', lng: 107.037442, lat: 33.075774, desc: '天府之国' }
+        ];
+
+        cityPoints.forEach(point => {
+          new mapboxgl.Marker()
+            .setLngLat([point.lng, point.lat])
+            .setPopup(new mapboxgl.Popup().setHTML(`<h3>${point.name}</h3><p>${point.desc}</p>`))
+            .addTo(map);
+        });
+      });
+      // ------------------------------------------------------------------
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Dkl-vue3-ui-DP/src/views/示例2：Mapbox加载CGCS2000矢量瓦片地图.html b/Dkl-vue3-ui-DP/src/views/示例2：Mapbox加载CGCS2000矢量瓦片地图.html
new file mode 100644
index 0000000..be422fe
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/示例2：Mapbox加载CGCS2000矢量瓦片地图.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>地图服务加载样例代码</title>
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <!-- 一张图定制版mapbox api -->
+    <script src="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js"></script>
+    <link
+      href="https://shaanxi.tianditu.gov.cn/vectormap/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.css"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <style>
+      .boxdraw {
+        background: rgba(56, 135, 190, 0.1);
+        border: 2px solid #3887be;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+      }
+    </style>
+
+    <div id="map"></div>
+
+    <script>
+      // mapbox api 申请的token
+      mapboxgl.accessToken =
+        "pk.eyJ1Ijoib25lZ2lzZXIiLCJhIjoiY2plZHptcnVuMW5tazMzcWVteHM2aGFsZiJ9.ERWP7zZ-N6fmNl3cRocJ1g";
+
+      // 初始化地图对象
+      var map = new mapboxgl.Map({
+        container: "map",
+		    // 以互联网版服务为例，另外也提供了10段和59段的服务地址
+        style: "http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/blue_yj-225.json", 
+		center: { lng: 109, lat: 35.655 },
+        zoom: 6,
+        pitch: 5,
+        minZoom: 5,
+        maxZoom: 17,
+      });
+
+      // 加载指北针图表
+      map.addControl(new mapboxgl.NavigationControl());
+
+      // 加载地图比例尺
+      map.addControl(
+        new mapboxgl.ScaleControl({
+          maxWidth: 80,
+          unit: "metric",
+        }),
+        "bottom-left"
+      );
+    </script>
+  </body>
+</html>
