liuhaodong
/
laic-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore: 引入 mapbox-gl 并替换地图 env/config 

删除 maptalks 与天地图配置，改为 APP_MAPBOX_TOKEN + MAP_STYLES。
main
xiaosi 3 weeks ago
parent
b847ae246d
commit
d18651601d
6 changed files with 27 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env.development
  2. 8
      .env.example
  3. 2
      .env.production
  4. 91
      package-lock.json
  5. 2
      package.json
  6. 43
      src/config/map.js

2
.env.development
View File

@ -1,4 +1,4 @@
APP_TIANDITU_TOKEN=1e3adb7649d896631c574461b15cb9d4
APP_MAPBOX_TOKEN=pk.eyJ1IjoiaGFuZ3l1IiwiYSI6ImNrYnFiMzQ4bDB3b2YydWp5bXdvaHZra3MifQ.5Sbjm7BLsJFRPLifC3pPrA
APP_MAP_CENTER_LNG=106.62341584179686
APP_MAP_CENTER_LAT=26.657826154258505
APP_MAP_ZOOM=5

8
.env.example
View File

@ -1,9 +1,9 @@
# 复制为 .env.development / .env.local 后填写
# Vite 通过 envPrefix: 'APP_' 暴露给前端
# Vite 通过 envPrefix: ['APP_','VITE_'] 暴露给前端
# 天地图 token（必填，否则 MapLayer 跳过初始化）
# 申请：https://console.tianditu.gov.cn/
APP_TIANDITU_TOKEN=
# Mapbox token（必填，否则 MapLayer 跳过初始化）
# 申请：https://account.mapbox.com/access-tokens/
APP_MAPBOX_TOKEN=
# 默认地图中心（经度 / 纬度）与缩放级别
APP_MAP_CENTER_LNG=106.62341584179686

2
.env.production
View File

@ -1,5 +1,5 @@
# 生产构建环境变量（可按部署环境覆盖）
APP_TIANDITU_TOKEN=1e3adb7649d896631c574461b15cb9d4
APP_MAPBOX_TOKEN=pk.eyJ1IjoiaGFuZ3l1IiwiYSI6ImNrYnFiMzQ4bDB3b2YydWp5bXdvaHZra3MifQ.5Sbjm7BLsJFRPLifC3pPrA
APP_MAP_CENTER_LNG=106.62341584179686
APP_MAP_CENTER_LAT=26.657826154258505
APP_MAP_ZOOM=5

91
package-lock.json
View File

@ -10,7 +10,7 @@
"dependencies": {
"axios": "^1.6.8",
"less": "^4.9.0",
"maptalks": "^1.12.1",
"mapbox-gl": "^3.29.0",
"pinia": "^2.1.7",
"tdesign-vue-next": "^1.20.6",
"vue": "^3.4.27",
@ -491,25 +491,6 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@maptalks/feature-filter": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@maptalks/feature-filter/-/feature-filter-1.3.0.tgz",
"integrity": "sha512-O6GcFzPuCbz6bO4TNBnmP8VunS0GexTzZ4m36A4HbYQICY1cplpFgntX2fyB/TY3cZrFRGoeMePBeMZFMOOhcQ=="
},
"node_modules/@maptalks/function-type": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@maptalks/function-type/-/function-type-1.4.1.tgz",
"integrity": "sha512-Z78FdI8mZ4vdcBqxlMDV6HP6WE/njZ9PhlM5JwbURxW1DnQK7R1GP+fubkGJPP6hVSv0Y52/dK8cZE/HuXVZ3A==",
"dependencies": {
"colorin": "^0.5.0"
}
},
"node_modules/@maptalks/function-type/node_modules/colorin": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/colorin/-/colorin-0.5.0.tgz",
"integrity": "sha512-gN6fIMCehYUonAhbmm5+ZHeFunG75u77hI2tRlVndNthO6v0wZMV2G2FwYSi8Ws4b4lpFJK1ql2a/MlW9z/Vhg==",
"license": "MIT"
},
"node_modules/@napi-rs/lzma-linux-x64-gnu": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
@ -582,6 +563,7 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
@ -763,6 +745,7 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -1073,12 +1056,6 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/colorin": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/colorin/-/colorin-0.6.0.tgz",
"integrity": "sha512-huI54MwKNMP6eypurqzxGf7rvTA3pNWdXZopQbN7v3TDxXYWyyGQ3CtQndNZ2Z0Gy6HDWqA7sRYxbjRDO2FZMA==",
"license": "MIT"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@ -1341,12 +1318,6 @@
"node": ">= 6"
}
},
"node_modules/frustum-intersects": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/frustum-intersects/-/frustum-intersects-0.1.0.tgz",
"integrity": "sha512-W0S6dmX5LJLtamimyuKhvbkpDTm5eVfMgk4X9yXNyWQ1zZ/cMm0PZoeX9Pm0tL302l+erQVrdfRGhV3ILfeTeQ==",
"license": "MIT"
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -1553,12 +1524,6 @@
"source-map": "~0.6.0"
}
},
"node_modules/lineclip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/lineclip/-/lineclip-1.1.5.tgz",
"integrity": "sha512-KlA/wRSjpKl7tS9iRUdlG72oQ7qZ1IlVbVgHwoO10TBR/4gQ86uhKow6nlzMAJJhjCWKto8OeoAzzIzKSmN25A==",
"license": "ISC"
},
"node_modules/local-pkg": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
@ -1611,24 +1576,17 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/maptalks": {
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/maptalks/-/maptalks-1.12.1.tgz",
"integrity": "sha512-Vvr6Ikp3GRtPToUhPD0FzyA+tLLp8dsakJdNvp6N6ScPnQw9gfS+bpZP7Apc0kEjGBK55mHzJmuyNaQxYuhLlw==",
"license": "BSD-3-Clause",
"dependencies": {
"@maptalks/feature-filter": "^1.3.0",
"@maptalks/function-type": "^1.4.1",
"colorin": "^0.6.0",
"frustum-intersects": "^0.1.0",
"lineclip": "^1.1.5",
"rbush": "^2.0.2",
"simplify-js": "^1.2.1"
},
"optionalDependencies": {
"@rollup/rollup-darwin-x64": "^4.13.0",
"@rollup/rollup-linux-x64-gnu": "^4.13.0"
}
"node_modules/mapbox-gl": {
"version": "3.29.0",
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.29.0.tgz",
"integrity": "sha512-Fnh1WLsZMfihwRZY5scp456iQuZo9G97tTpb26bf/Ejsi/L7O+4dE9+I03VoOor2ul3DEOp6F2P3273omyVsNw==",
"license": "SEE LICENSE IN LICENSE.txt",
"workspaces": [
"src/style-spec",
"plugins/mapbox-gl-pmtiles-provider",
"test/bundlers/*",
"test/build/typings"
]
},
"node_modules/math-intrinsics": {
"version": "1.1.0",
@ -1968,21 +1926,6 @@
],
"license": "MIT"
},
"node_modules/quickselect": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
"integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ==",
"license": "ISC"
},
"node_modules/rbush": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
"integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
"license": "MIT",
"dependencies": {
"quickselect": "^1.0.1"
}
},
"node_modules/readdirp": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
@ -2067,12 +2010,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/simplify-js": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/simplify-js/-/simplify-js-1.2.4.tgz",
"integrity": "sha512-vITfSlwt7h/oyrU42R83mtzFpwYk3+mkH9bOHqq/Qw6n8rtR7aE3NZQ5fbcyCUVVmuMJR6ynsAhOfK2qoah8Jg==",
"license": "BSD-2-Clause"
},
"node_modules/sortablejs": {
"version": "1.15.7",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",

2
package.json
View File

@ -11,7 +11,7 @@
"dependencies": {
"axios": "^1.6.8",
"less": "^4.9.0",
"maptalks": "^1.12.1",
"mapbox-gl": "^3.29.0",
"pinia": "^2.1.7",
"tdesign-vue-next": "^1.20.6",
"vue": "^3.4.27",

43
src/config/map.js
View File

@ -1,4 +1,9 @@
const token = import.meta.env.APP_TIANDITU_TOKEN || import.meta.env.VITE_TIANDITU_TOKEN || ''
const token = import.meta.env.APP_MAPBOX_TOKEN || import.meta.env.VITE_MAPBOX_TOKEN || ''
export const MAP_STYLES = {
satellite: 'mapbox://styles/mapbox/satellite-streets-v12',
street: 'mapbox://styles/mapbox/streets-v12',
}
export default {
token,
@ -8,39 +13,3 @@ export default {
],
zoom: Number(import.meta.env.APP_MAP_ZOOM) || 5,
}
/** 天地图影像/矢量 + 注记（Web 墨卡托 w 系列） */
export function createTiandituLayerOptions(tk) {
return {
img: {
urlTemplate: `https://t{s}.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=${tk}`,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
},
cia: {
urlTemplate: `https://t{s}.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=${tk}`,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
},
vec: {
urlTemplate: `https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
},
cva: {
urlTemplate: `https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
},
}
}
export function createTiandituBaseLayer(maptalks, tk, mode = 'satellite') {
const layers = createTiandituLayerOptions(tk)
if (mode === 'street') {
return new maptalks.GroupTileLayer('tianditu-base', [
new maptalks.TileLayer('tdt-vec', layers.vec),
new maptalks.TileLayer('tdt-cva', layers.cva),
])
}
return new maptalks.GroupTileLayer('tianditu-base', [
new maptalks.TileLayer('tdt-img', layers.img),
new maptalks.TileLayer('tdt-cia', layers.cia),
])
}

Write Preview
Loading…
Cancel
Save