|
@@ -117,21 +117,56 @@ function goMakeWish() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 高德瓦片(GCJ-02 坐标系)
|
|
// 高德瓦片(GCJ-02 坐标系)
|
|
|
-const GAODE_TILE = "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
|
|
|
|
|
|
|
|
|
|
-function initMap() {
|
|
|
|
|
|
|
+async function initMap() {
|
|
|
try {
|
|
try {
|
|
|
- map = L.map(mapContainer.value!, {
|
|
|
|
|
- center: [39.9042, 116.4074],
|
|
|
|
|
- zoom: 14,
|
|
|
|
|
|
|
+ // 尝试获取当前位置作为地图中心
|
|
|
|
|
+ let lng = 108.372652;
|
|
|
|
|
+ let lat = 22.84905;
|
|
|
|
|
+ try {
|
|
|
|
|
+ const pos = await getUserLocation();
|
|
|
|
|
+ const gcj = wgs84ToGcj02(pos);
|
|
|
|
|
+ lng = gcj.lng;
|
|
|
|
|
+ lat = gcj.lat;
|
|
|
|
|
+ } catch {
|
|
|
|
|
+ // 定位失败使用默认坐标
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 天地图参数
|
|
|
|
|
+ const tileOptions = {
|
|
|
|
|
+ zoomControl: true,
|
|
|
attributionControl: false,
|
|
attributionControl: false,
|
|
|
|
|
+ minZoom: 0,
|
|
|
|
|
+ minNativeZoom: 7,
|
|
|
|
|
+ maxZoom: 22,
|
|
|
|
|
+ maxNativeZoom: 18,
|
|
|
|
|
+ };
|
|
|
|
|
+ const VEC_C =
|
|
|
|
|
+ "https://t0.tianditu.gov.cn/img_w/wmts?" +
|
|
|
|
|
+ "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
|
|
|
|
|
+ "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=";
|
|
|
|
|
+ const CVA_C =
|
|
|
|
|
+ "https://t0.tianditu.gov.cn/cia_w/wmts?" +
|
|
|
|
|
+ "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
|
|
|
|
|
+ "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=";
|
|
|
|
|
+ const TK_KEY = "96d2b2c34cf02a4ea614386a16738ba9";
|
|
|
|
|
+ let layer1 = L.tileLayer(VEC_C + TK_KEY, tileOptions);
|
|
|
|
|
+ let layer2 = L.tileLayer(CVA_C + TK_KEY, tileOptions);
|
|
|
|
|
+ map = L.map(mapContainer.value!, {
|
|
|
|
|
+ center: [lat, lng],
|
|
|
|
|
+ zoom: 18,
|
|
|
|
|
+ minZoom: 0,
|
|
|
|
|
+ maxZoom: 22,
|
|
|
|
|
+ layers: [layer1, layer2],
|
|
|
zoomControl: false,
|
|
zoomControl: false,
|
|
|
|
|
+ attributionControl: false,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- L.tileLayer(GAODE_TILE, {
|
|
|
|
|
- subdomains: ["1", "2", "3", "4"],
|
|
|
|
|
- maxZoom: 18,
|
|
|
|
|
- }).addTo(map);
|
|
|
|
|
|
|
+ // L.tileLayer(GAODE_TILE, {
|
|
|
|
|
+ // subdomains: ["1", "2", "3", "4"],
|
|
|
|
|
+ // maxZoom: 18,
|
|
|
|
|
+ // }).addTo(map);
|
|
|
|
|
+ L.layerGroup().addTo(map);
|
|
|
|
|
|
|
|
L.control.scale({ metric: true, imperial: false }).addTo(map);
|
|
L.control.scale({ metric: true, imperial: false }).addTo(map);
|
|
|
L.control.zoom({ position: "topright" }).addTo(map);
|
|
L.control.zoom({ position: "topright" }).addTo(map);
|
|
@@ -145,10 +180,10 @@ function initMap() {
|
|
|
|
|
|
|
|
// GPS 定位 → GCJ-02 转换(供 store 定时刷新使用)
|
|
// GPS 定位 → GCJ-02 转换(供 store 定时刷新使用)
|
|
|
async function getGcjLocation(): Promise<{ lng: number; lat: number }> {
|
|
async function getGcjLocation(): Promise<{ lng: number; lat: number }> {
|
|
|
- const gps = await getUserLocation()
|
|
|
|
|
- const gcj = wgs84ToGcj02(gps)
|
|
|
|
|
- console.log(`GPS → GCJ-02:${gps.lng},${gps.lat} → ${gcj.lng},${gcj.lat}`)
|
|
|
|
|
- return gcj
|
|
|
|
|
|
|
+ const gps = await getUserLocation();
|
|
|
|
|
+ const gcj = wgs84ToGcj02(gps);
|
|
|
|
|
+ console.log(`GPS → GCJ-02:${gps.lng},${gps.lat} → ${gcj.lng},${gcj.lat}`);
|
|
|
|
|
+ return gcj;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
async function locateUser() {
|
|
async function locateUser() {
|
|
@@ -158,7 +193,7 @@ async function locateUser() {
|
|
|
locationStore.setLocation(lng, lat);
|
|
locationStore.setLocation(lng, lat);
|
|
|
|
|
|
|
|
if (map) {
|
|
if (map) {
|
|
|
- map.setView([lat, lng], 16);
|
|
|
|
|
|
|
+ map.setView([lat, lng], 18);
|
|
|
|
|
|
|
|
if (userMarker) map.removeLayer(userMarker);
|
|
if (userMarker) map.removeLayer(userMarker);
|
|
|
const icon = L.icon({
|
|
const icon = L.icon({
|
|
@@ -229,7 +264,9 @@ async function loadTrees() {
|
|
|
iconAnchor: [0, 0],
|
|
iconAnchor: [0, 0],
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- const marker = L.marker([tree.latitude, tree.longitude], { icon }).addTo(map);
|
|
|
|
|
|
|
+ const marker = L.marker([tree.latitude, tree.longitude], { icon }).addTo(
|
|
|
|
|
+ map,
|
|
|
|
|
+ );
|
|
|
|
|
|
|
|
marker.on("click", () => {
|
|
marker.on("click", () => {
|
|
|
selectedTree.value = tree;
|
|
selectedTree.value = tree;
|
|
@@ -241,7 +278,7 @@ async function loadTrees() {
|
|
|
|
|
|
|
|
if (trees.length > 0 && locationStore.lng) {
|
|
if (trees.length > 0 && locationStore.lng) {
|
|
|
const bounds = L.latLngBounds(
|
|
const bounds = L.latLngBounds(
|
|
|
- trees.map((t: any) => [t.latitude, t.longitude] as L.LatLngTuple)
|
|
|
|
|
|
|
+ trees.map((t: any) => [t.latitude, t.longitude] as L.LatLngTuple),
|
|
|
);
|
|
);
|
|
|
bounds.extend([locationStore.lat!, locationStore.lng]);
|
|
bounds.extend([locationStore.lat!, locationStore.lng]);
|
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|