Skip to content

Commit 51e8503

Browse files
MelihAltintasMelihAltintas
committed
Source TiandiDitu is added
1 parent 0985786 commit 51e8503

File tree

3 files changed

+231
-3
lines changed

3 files changed

+231
-3
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-openlayers",
3-
"version": "0.1.40",
3+
"version": "0.1.41",
44
"description": "Openlayers Wrapper for Vue3",
55
"repository": {
66
"type": "git",

‎src/components/sources/SourceTianDiTu.vue‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
<template>
2+
<div v-if="false"></div>
3+
</template>
4+
5+
<script>
6+
import WMTSSource from "ol/source/WMTS";
7+
import TileGridWMTS from "ol/tilegrid/WMTS";
8+
import { inject, watch, onMounted, onUnmounted, computed } from "vue";
9+
import usePropsAsObjectProperties from "../../composables/usePropsAsObjectProperties";
10+
11+
export class Tianditu extends WMTSSource {
12+
constructor(opt_options) {
13+
Tianditu.layerLabelMap = {
14+
vec: "cva",
15+
ter: "cta",
16+
img: "cia",
17+
};
18+
Tianditu.layerZoomMap = {
19+
vec: 18,
20+
ter: 14,
21+
img: 18,
22+
};
23+
let options = opt_options || {};
24+
25+
options.layerType = options.layerType || "vec";
26+
options.layerType = options.isLabel
27+
? Tianditu.layerLabelMap[options.layerType]
28+
: options.layerType;
29+
options.matrixSet =
30+
options.projection === "EPSG:4326" || options.projection === "EPSG:4490"
31+
? "c"
32+
: "w";
33+
if (!options.url && !options.urls) {
34+
options.url = "https://t{0-7}.tianditu.gov.cn/{layer}_{proj}/wmts?";
35+
}
36+
if (options.tk) {
37+
options.url = `${options.url}tk=${options.tk}`;
38+
}
39+
options.url = options.url
40+
.replace("{layer}", options.layerType)
41+
.replace("{proj}", options.matrixSet);
42+
let tileGrid =
43+
options.tileGrid ||
44+
Tianditu.getTileGrid(options.projection || "EPSG:3857");
45+
let crossOrigin =
46+
options.crossOrigin !== undefined ? options.crossOrigin : "anonymous";
47+
let superOptions = {
48+
version: options.version || "1.0.0",
49+
format: options.format || "tiles",
50+
dimensions: options.dimensions || {},
51+
layer: options.layerType,
52+
matrixSet: options.matrixSet,
53+
tileGrid: tileGrid,
54+
style: options.style || "default",
55+
cacheSize: options.cacheSize,
56+
crossOrigin: crossOrigin,
57+
opaque: options.opaque === undefined ? true : options.opaque,
58+
maxZoom: Tianditu.layerZoomMap[options.layerType],
59+
reprojectionErrorThreshold: options.reprojectionErrorThreshold,
60+
url: options.url,
61+
urls: options.urls,
62+
projection: options.projection || "EPSG:3857",
63+
wrapX: options.wrapX,
64+
};
65+
66+
67+
if (options.tileProxy) {
68+
superOptions.tileLoadFunction = tileLoadFunction;
69+
}
70+
super(superOptions);
71+
if (options.tileProxy) {
72+
this.tileProxy = options.tileProxy;
73+
}
74+
75+
let me = this;
76+
function tileLoadFunction(imageTile, src) {
77+
imageTile.getImage().src = me.tileProxy + encodeURIComponent(src);
78+
}
79+
}
80+
81+
static getTileGrid(projection) {
82+
if (projection === "EPSG:4326" || projection === "EPSG:4490") {
83+
return Tianditu.default4326TileGrid();
84+
}
85+
return Tianditu.default3857TileGrid();
86+
}
87+
88+
static default4326TileGrid() {
89+
let tdt_WGS84_resolutions = [];
90+
let matrixIds = [];
91+
for (let i = 1; i < 19; i++) {
92+
tdt_WGS84_resolutions.push((0.703125 * 2) / Math.pow(2, i));
93+
matrixIds.push(i);
94+
}
95+
let tileGird = new TileGridWMTS({
96+
extent: [-180, -90, 180, 90],
97+
resolutions: tdt_WGS84_resolutions,
98+
origin: [-180, 90],
99+
matrixIds: matrixIds,
100+
minZoom: 1,
101+
});
102+
return tileGird;
103+
}
104+
105+
static default3857TileGrid() {
106+
let tdt_Mercator_resolutions = [];
107+
let matrixIds = [];
108+
for (let i = 1; i < 19; i++) {
109+
tdt_Mercator_resolutions.push((78271.5169640203125 * 2) / Math.pow(2, i));
110+
matrixIds.push(i);
111+
}
112+
let tileGird = new TileGridWMTS({
113+
extent: [
114+
-20037508.3427892,
115+
-20037508.3427892,
116+
20037508.3427892,
117+
20037508.3427892,
118+
],
119+
resolutions: tdt_Mercator_resolutions,
120+
matrixIds: matrixIds,
121+
origin: [-20037508.3427892, 20037508.3427892],
122+
minZoom: 1,
123+
});
124+
return tileGird;
125+
}
126+
}
127+
export default {
128+
name: "ol-source-tianditu",
129+
setup(props) {
130+
const layer = inject("tileLayer");
131+
const { properties } = usePropsAsObjectProperties(props);
132+
let source = computed(() => {
133+
return new Tianditu(properties);
134+
});
135+
watch(source, () => {
136+
layer.value.setSource(source.value);
137+
});
138+
watch(layer, () => {
139+
layer.value.setSource(source.value);
140+
});
141+
onMounted(() => {
142+
layer.value.setSource(source.value);
143+
});
144+
onUnmounted(() => {
145+
layer.value.setSource(null);
146+
});
147+
return {
148+
layer,
149+
source,
150+
};
151+
},
152+
props: {
153+
layerType: {
154+
type: String,
155+
default: "img",
156+
},
157+
tk: {
158+
type: String,
159+
},
160+
isLabel: {
161+
type: Boolean,
162+
default: false,
163+
},
164+
cacheSize: {
165+
type: Number,
166+
},
167+
crossOrigin: {
168+
type: String,
169+
},
170+
projection: {
171+
Type: String,
172+
default: "EPSG:3857",
173+
},
174+
hidpi: {
175+
type: Boolean,
176+
default: false,
177+
},
178+
requestEncoding: {
179+
type: String,
180+
default: "KVP",
181+
},
182+
format: {
183+
type: String,
184+
},
185+
version: {
186+
type: String,
187+
default: "1.0.0",
188+
},
189+
culture: {
190+
type: String,
191+
default: "en-us",
192+
},
193+
matrixSet: {
194+
type: String,
195+
},
196+
dimensions: {
197+
type: Object,
198+
default: () => {},
199+
},
200+
imageSmoothing: {
201+
type: Boolean,
202+
default: true,
203+
},
204+
maxZoom: {
205+
type: Number,
206+
default: 21,
207+
},
208+
reprojectionErrorThreshold: {
209+
type: Number,
210+
},
211+
tileLoadFunction: {
212+
type: Function,
213+
default: (imageTile, src) => (imageTile.getImage().src = src),
214+
},
215+
wrapX: {
216+
type: Boolean,
217+
default: true,
218+
},
219+
transition: {
220+
type: Number,
221+
},
222+
},
223+
};
224+
</script>
225+
226+
<style lang=""></style>

‎src/components/sources/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import SourceWMTS from './SourceWMTS.vue'
55
import SourceVector from './SourceVector.vue'
66
import SourceCluster from './SourceCluster.vue'
77
import SourceBingMaps from './SourceBingMaps.vue'
8-
8+
import SourceTianDiTu from './SourceTianDiTu.vue'
99
function install (app) {
1010

1111
if (install.installed) {
@@ -21,6 +21,7 @@ function install (app) {
2121
app.component(SourceVector.name, SourceVector)
2222
app.component(SourceCluster.name, SourceCluster)
2323
app.component(SourceBingMaps.name, SourceBingMaps)
24+
app.component(SourceTianDiTu.name, SourceTianDiTu)
2425
}
2526

2627
export default install
@@ -32,5 +33,6 @@ function install (app) {
3233
SourceImageStatic,
3334
SourceWMTS,
3435
SourceVector,
35-
SourceCluster
36+
SourceCluster,
37+
SourceTianDiTu
3638
}

0 commit comments

Comments
 (0)