Skip to content

G
gk
Commit 428ccf9d authored by daniel's avatar daniel
Browse files
Options

fix(demo): 新增mapbox地图demo

parent 87c933ee
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 276 deletions
src/main/webapp/WEB-INF/views/cmpt/demo.jsp
View file @ 428ccf9d
...@@ -26,10 +26,17 @@ ...@@ -26,10 +26,17 @@
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule <script nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<!-- 添加Mapbox GL JS CSS -->
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<!-- 添加Mapbox GL JS -->
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<!-- Favicon--> <!-- Favicon-->
<link rel="shortcut icon" href="https://img.geexek.com/files/home/favicon.ico"> <link rel="shortcut icon" href="https://img.geexek.com/files/home/favicon.ico">
<!-- 自定义css --> <!-- 自定义css -->
<link rel="stylesheet" href="${ctxStatic}/css/base.css"> <link rel="stylesheet" href="${ctxStatic}/css/base.css">
<!-- 添加天地图API -->
<script
src="https://api.tianditu.gov.cn/api?v=4.0&tk=16a595e56ea0cec57ad8c07368d7f1ac"></script>
<style> <style>
...@@ -54,7 +61,6 @@ ...@@ -54,7 +61,6 @@
</head> </head>
<body> <body>
<jsp:include page="../common/header.jsp"></jsp:include>
<div class="page-content d-flex align-items-stretch main-body"> <div class="page-content d-flex align-items-stretch main-body">
<div id="app" v-cloak> <div id="app" v-cloak>
<n-config-provider> <n-config-provider>
...@@ -69,294 +75,121 @@ ...@@ -69,294 +75,121 @@
</div> </div>
</div> </div>
<script type="text/x-template" id="my-app"> <script type="text/x-template" id="my-app">
<n-space> <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0;">
<n-button tertiary> <div ref="mapContainer" style="width: 100%; height: 100%;"></div>
Default </div>
</n-button>
<n-button tertiary type="primary">
Primary
</n-button>
<n-button tertiary type="info">
Info
</n-button>
<n-button tertiary type="success">
Success
</n-button>
<n-button tertiary type="warning">
Warning
</n-button>
<n-button tertiary type="error">
Error
</n-button>
<n-button tertiary round>
Default
</n-button>
<n-button tertiary round type="primary">
Primary
</n-button>
<n-button tertiary round type="info">
Info
</n-button>
<n-button tertiary round type="success">
Success
</n-button>
<n-button tertiary round type="warning">
Warning
</n-button>
<n-button tertiary round type="error">
Error
</n-button>
<n-button tertiary circle>
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="primary">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="info">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="success">
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</n-button>
<n-button tertiary circle type="warning">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="error">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
</n-space>
<n-dropdown trigger="hover" :options="options" @select="handleSelect">
<n-button>找个地方休息</n-button>
</n-dropdown>
<n-space>
<n-tag>Real Love</n-tag>
<n-tag type="success">
Yes It Is
</n-tag>
<n-tag type="warning">
I'm Down
</n-tag>
<n-tag type="error">
Yesterday
</n-tag>
<n-tag type="info">
I'm Looking Through You
</n-tag>
</n-space>
<n-form
ref="formRef"
inline
:label-width="80"
:model="formValue"
:rules="rules"
size="small"
>
<n-form-item label="Name" path="user.name">
<n-input v-model:value="formValue.user.name" placeholder="Input Name" />
</n-form-item>
<n-form-item label="Age" path="user.age">
<n-input v-model:value="formValue.user.age" placeholder="Input Age" />
</n-form-item>
<n-form-item label="Phone" path="phone">
<n-input v-model:value="formValue.phone" placeholder="Phone Number" />
</n-form-item>
<n-form-item>
<n-button @click="handleValidateClick">
Validate
</n-button>
</n-form-item>
</n-form>
<pre>{{ JSON.stringify(formValue, null, 2) }}
</pre>
<n-slider v-model:value="slide" :step="10" />
<n-time-picker default-formatted-value="00:12:13" />
<n-data-table
:columns="columns"
:data="data"
:pagination="pagination"
:bordered="false"
/>
<n-button @click="handleClick">
Start me up
</n-button>
<n-modal title="Card preset draggable"
preset="card"
draggable v-model:show="showModal" >
<n-card
style="width: 600px"
title="Modal"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
666s
</n-card>
</n-modal>
<n-space>
<n-button @click="notify('info')">
Info
</n-button>
<n-button @click="notify('success')">
Success
</n-button>
<n-button @click="notify('warning')">
Warning
</n-button>
<n-button @click="notify('error')">
Error
</n-button>
</n-space>
</script> </script>
<script> <script>
const { createApp, defineComponent, ref } = Vue; const { createApp, defineComponent, ref, onMounted } = Vue;
const { useMessage, useNotification } = naive const { useMessage, useNotification } = naive
const MyApp = defineComponent({ const tk = "16a595e56ea0cec57ad8c07368d7f1ac"
name: 'MyApp', const mapBoxToken = 'pk.eyJ1IjoieGluZ3NhaSIsImEiOiJjbTc0ZXJ4ZjgwOWF3MmtyMjFxN2E2MHo0In0.pknVy3Lq6fLcXiwvrVLcFg'
template: '#my-app', // 获取天地图的地址
setup() { const getTDTUrls = () => {
const message = useMessage() const services = Array.from({ length: 7 }, (_, i) => i + 1);
const notification = useNotification() const baseUrl = 'https://t%s.tianditu.gov.cn';
const formRef = ref(null) const generateUrls = (path) => {
const showModalRef = ref(false) return services.map((v) => baseUrl.replace('%s', v.toString()) + path);
const handleClick = () => { };
showModalRef.value = true // 天地图卫星影像服务地址
} const satellitePath = "/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;
const TDTSatelliteUrls = generateUrls(satellitePath);
// 获取原始地图数据集合
const dataServerPath = "/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + tk;
const TDTDataServerUrls = generateUrls(dataServerPath);
// 天地图注记服务地址
const annotationPath = "/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;
const TDTAnnotationUrls = generateUrls(annotationPath);
return { return {
notify(type) { TDTSatelliteUrls,
notification[type]({ TDTDataServerUrls,
content: 'What to say?', TDTAnnotationUrls,
meta: 'I don\'t know', };
duration: 2500,
keepAliveOnHover: true
})
},
formRef,
showModal: showModalRef,
handleClick,
slide: ref(50),
formValue: ref({
user: {
name: '',
age: ''
},
phone: ''
}),
data: [
{ no: 3, title: 'Wonderwall', length: '4:18' },
{ no: 4, title: 'Don\'t Look Back in Anger', length: '4:48' },
{ no: 12, title: 'Champagne Supernova', length: '7:27' }
],
pagination: ref({ pageSize: 5 }),
columns: [{
title: 'No',
key: 'no'
},
{
title: 'Title',
key: 'title'
},
{
title: 'Length',
key: 'length'
},
{
title: 'Action',
key: 'actions'
}],
rules: {
user: {
name: {
required: true,
message: 'Please input your name',
trigger: 'blur'
},
age: {
required: true,
message: 'Please input your age',
trigger: ['input', 'blur']
} }
// mapbox的字体
const glyphs = 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf';
// 获取地址
const { TDTDataServerUrls, TDTAnnotationUrls, TDTSatelliteUrls } =
getTDTUrls();
// 构建样式
const defaultStyle = {
version: 8,
sources: {
tianmap: {
type: 'raster',
tiles: TDTSatelliteUrls,
tileSize: 256,
attribution: '天地图影像图',
}, },
phone: { // 添加注记图层的数据源
required: true, tianmapAnnotation: {
message: 'Please input your number', type: 'raster',
trigger: ['input'] tiles: TDTAnnotationUrls,
} tileSize: 256,
attribution: '天地图注记图层',
}, },
handleValidateClick(e) {
e.preventDefault()
formRef.value?.validate((errors) => {
if (!errors) {
message.success('Valid')
}
else {
console.log(errors)
message.error('Invalid')
}
})
}, },
options: [ layers: [
{ {
label: '滨海湾金沙，新加坡', id: 'tianmap-layer',
key: 'marina bay sands', type: 'raster',
disabled: true source: 'tianmap',
}, },
{ {
label: '布朗酒店，伦敦', id: 'tianmap-annotation-layer',
key: 'brown\'s hotel, london' type: 'raster',
source: 'tianmapAnnotation',
}, },
{
label: '亚特兰蒂斯巴哈马，拿骚',
key: 'atlantis nahamas, nassau'
},
{
label: '比佛利山庄酒店，洛杉矶',
key: 'the beverly hills hotel, los angeles'
}
], ],
handleSelect(key) { // 添加 glyphs 属性到地图样式
message.info(String(key)) glyphs,
};
const MyApp = defineComponent({
name: 'MyApp',
template: '#my-app',
setup() {
const message = useMessage()
const notification = useNotification()
const mapContainer = ref(null);
let map = ref(null);
onMounted(() => {
if (mapContainer.value) {
// 确保容器已完全渲染
setTimeout(() => {
map.value = new mapboxgl.Map({
container: mapContainer.value,
style: defaultStyle,
center: [116.404, 39.915],
zoom: 11,
minZoom: 5,
maxZoom: 18,
pitch: 0,
accessToken: mapBoxToken,
antialias: true,
bearing: 0,
interactive: true,
attributionControl: false,
});
// 添加resize事件监听器
window.addEventListener('resize', () => {
map.value.resize();
});
// 添加地图控件
map.value.addControl(new mapboxgl.NavigationControl());
}, 0);
} }
});
return {
mapContainer
} }
} }
}) })
// app.use(naive).mount('#app');
// const MyApp = defineComponent({
// name: 'MyApp',
// template: '#my-app-template',
// setup() {
// const message = useMessage()
// const buttonText = ref("点击我")
// const handleClick = () => {
// message.success("你点了按钮！")
// }
// return { buttonText, handleClick }
// }
// })
const app = Vue.createApp({}) const app = Vue.createApp({})
app.component('my-app', MyApp) app.component('my-app', MyApp)
app.use(naive) app.use(naive)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment