新增灰色系的地图底图,作为默认图层

This commit is contained in:
JIANG
2025-11-13 17:29:36 +08:00
parent 218d1dd838
commit 4ddc32b282
2 changed files with 8 additions and 7 deletions

View File

@@ -3,6 +3,7 @@ import { useMap } from "../MapComponent";
import TileLayer from "ol/layer/Tile.js";
import XYZ from "ol/source/XYZ.js";
import mapboxOutdoors from "@assets/map/layers/mapbox-outdoors.png";
import mapboxLight from "@assets/map/layers/mapbox-light.png";
import mapboxSatellite from "@assets/map/layers/mapbox-satellite.png";
import mapboxSatelliteStreet from "@assets/map/layers/mapbox-satellite-streets.png";
import mapboxStreets from "@assets/map/layers/mapbox-streets.png";
@@ -10,7 +11,7 @@ import clsx from "clsx";
import Group from "ol/layer/Group";
import { MAPBOX_TOKEN } from "@config/config";
import { TIANDITU_TOKEN } from "@config/config";
const INITIAL_LAYER = "mapbox-outdoors";
const INITIAL_LAYER = "mapbox-light";
const streetsLayer = new TileLayer({
source: new XYZ({
@@ -22,9 +23,9 @@ const streetsLayer = new TileLayer({
'数据来源:<a href="https://www.mapbox.com/">Mapbox</a> & <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
}),
});
const outdoorsLayer = new TileLayer({
const lightMapLayer = new TileLayer({
source: new XYZ({
url: `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_TOKEN}`,
url: `https://api.mapbox.com/styles/v1/mapbox/light-v11/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_TOKEN}`,
tileSize: 512,
maxZoom: 20,
projection: "EPSG:3857",
@@ -89,11 +90,11 @@ const tiandituImageLayerGroup = new Group({
});
const baseLayers = [
{
id: "mapbox-outdoors",
name: "户外地图",
layer: outdoorsLayer,
id: "mapbox-light",
name: "默认地图",
layer: lightMapLayer,
// layer: tiandituVectorLayerGroup,
img: mapboxOutdoors.src,
img: mapboxLight.src,
},
{
id: "mapbox-satellite",

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB