v-ol-map 1.0.2 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.cjs +29 -0
- package/.vscode/extensions.json +3 -0
- package/README.md +11 -19
- package/index.html +13 -0
- package/package.json +36 -35
- package/public/vite.svg +1 -0
- package/src/App.vue +13 -0
- package/src/assets/vue.svg +1 -0
- package/src/components/index.js +13 -0
- package/src/components/index.js.map +1 -0
- package/src/components/index.ts +16 -0
- package/src/components/layers/base.ts +48 -0
- package/src/components/layers/tile/index.js +6 -0
- package/src/components/layers/tile/index.js.map +1 -0
- package/src/components/layers/tile/index.ts +8 -0
- package/src/components/layers/tile/tile.vue +97 -0
- package/src/components/map/index.js +6 -0
- package/src/components/map/index.js.map +1 -0
- package/src/components/map/index.ts +8 -0
- package/src/components/map/map.vue +91 -0
- package/src/main.js +6 -0
- package/src/main.js.map +1 -0
- package/src/main.ts +6 -0
- package/src/style.css +82 -0
- package/src/utils/cityMap.js +2260 -0
- package/src/utils/cityMap.js.map +1 -0
- package/src/utils/cityMap.ts +2263 -0
- package/src/utils/index.js +47 -8
- package/src/utils/index.js.map +1 -1
- package/src/utils/index.ts +68 -17
- package/src/vite-env.d.ts +7 -0
- package/tsconfig.json +16 -22
- package/tsconfig.node.json +9 -0
- package/vite.config.ts +40 -0
- package/.browserslistrc +0 -3
- package/.eslintrc.js +0 -20
- package/babel.config.js +0 -3
- package/examples/App.vue +0 -26
- package/examples/main.ts +0 -10
- package/examples/router/index.ts +0 -21
- package/examples/views/Home.vue +0 -25
- package/lib/demo.html +0 -8
- package/lib/v-ol-map.common.js +0 -29683
- package/lib/v-ol-map.umd.js +0 -29693
- package/lib/v-ol-map.umd.min.js +0 -7
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -17
- package/src/@types/component.d.ts +0 -6
- package/src/@types/index.d.ts +0 -3
- package/src/@types/shims-tsx.d.ts +0 -13
- package/src/@types/shims-vue.d.ts +0 -4
- package/src/assets/logo.png +0 -0
- package/src/components/Layers/BaseLayer.vue +0 -37
- package/src/components/Layers/TileLayer/index.ts +0 -7
- package/src/components/Layers/TileLayer/src/index.vue +0 -52
- package/src/components/VMap/index.js +0 -6
- package/src/components/VMap/index.js.map +0 -1
- package/src/components/VMap/index.ts +0 -7
- package/src/components/VMap/src/VMap.vue +0 -63
- package/src/index.js +0 -21
- package/src/index.js.map +0 -1
- package/src/index.ts +0 -25
- package/vue.config.js +0 -41
package/public/favicon.ico
DELETED
|
Binary file
|
package/public/index.html
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
|
-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
8
|
-
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<noscript>
|
|
12
|
-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
13
|
-
</noscript>
|
|
14
|
-
<div id="app"></div>
|
|
15
|
-
<!-- built files will be auto injected -->
|
|
16
|
-
</body>
|
|
17
|
-
</html>
|
package/src/@types/index.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import Vue, { VNode } from "vue";
|
|
2
|
-
|
|
3
|
-
declare global {
|
|
4
|
-
namespace JSX {
|
|
5
|
-
// tslint:disable no-empty-interface
|
|
6
|
-
interface Element extends VNode {}
|
|
7
|
-
// tslint:disable no-empty-interface
|
|
8
|
-
interface ElementClass extends Vue {}
|
|
9
|
-
interface IntrinsicElements {
|
|
10
|
-
[elem: string]: any;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}
|
package/src/assets/logo.png
DELETED
|
Binary file
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { PropType } from "vue";
|
|
3
|
-
import { Prop, Vue } from "vue-property-decorator";
|
|
4
|
-
|
|
5
|
-
interface Options {
|
|
6
|
-
id: "";
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export default class BaseLayer extends Vue {
|
|
10
|
-
render() {
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
13
|
-
@Prop({ default: "ol-layer" }) className!: string;
|
|
14
|
-
@Prop({ default: 1 }) opacity!: number;
|
|
15
|
-
@Prop({ default: true }) visible!: boolean;
|
|
16
|
-
@Prop({
|
|
17
|
-
type: Array as PropType<string[]>,
|
|
18
|
-
})
|
|
19
|
-
extent!: string[];
|
|
20
|
-
@Prop() zIndex!: number;
|
|
21
|
-
@Prop() minResolution!: number;
|
|
22
|
-
@Prop() maxResolution!: number;
|
|
23
|
-
@Prop() minZoom!: number;
|
|
24
|
-
@Prop() maxZoom!: number;
|
|
25
|
-
@Prop() title!: string;
|
|
26
|
-
@Prop() name!: string;
|
|
27
|
-
@Prop() preview!: string;
|
|
28
|
-
@Prop() baseLayer!: boolean;
|
|
29
|
-
@Prop({
|
|
30
|
-
type: Object as PropType<Options>,
|
|
31
|
-
default: () => ({}),
|
|
32
|
-
})
|
|
33
|
-
properties!: Options;
|
|
34
|
-
}
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
<style scoped></style>
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { Prop, Vue, Inject, Component } from "vue-property-decorator";
|
|
3
|
-
import { nanoid } from "nanoid";
|
|
4
|
-
import BaseLayer from "@/components/Layers/BaseLayer.vue";
|
|
5
|
-
import { XYZ } from "ol/source";
|
|
6
|
-
import { Tile as TileLayer } from "ol/layer";
|
|
7
|
-
// Vue.extend(BaseLayer);};
|
|
8
|
-
@Component({
|
|
9
|
-
name: "v-tile",
|
|
10
|
-
})
|
|
11
|
-
export default class VTile extends BaseLayer implements Vue {
|
|
12
|
-
render() {
|
|
13
|
-
return null;
|
|
14
|
-
}
|
|
15
|
-
@Inject() VMap: any;
|
|
16
|
-
@Prop({ default: `tile-layer-${nanoid()}` })
|
|
17
|
-
layerId!: string;
|
|
18
|
-
layers: TileLayer<XYZ>[] = [];
|
|
19
|
-
mounted(): void {
|
|
20
|
-
this.init();
|
|
21
|
-
}
|
|
22
|
-
init(): void {
|
|
23
|
-
const layerVec = this.initXYZbyURL(
|
|
24
|
-
"http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a"
|
|
25
|
-
);
|
|
26
|
-
const layerCva = this.initXYZbyURL(
|
|
27
|
-
"http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a"
|
|
28
|
-
);
|
|
29
|
-
this.layers = [layerVec, layerCva];
|
|
30
|
-
console.log(this.VMap.map);
|
|
31
|
-
this.layers.forEach((layer) => {
|
|
32
|
-
this.VMap.map.addLayer(layer);
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
initXYZbyURL(url: string): TileLayer<XYZ> {
|
|
36
|
-
const xyzOpt = {
|
|
37
|
-
...{ crossOrigin: "anonymous" },
|
|
38
|
-
...this.$props.xyz,
|
|
39
|
-
...{ url: url },
|
|
40
|
-
};
|
|
41
|
-
const source = new XYZ(xyzOpt);
|
|
42
|
-
console.log(this.$props);
|
|
43
|
-
const layerOpt = { ...this.$props, ...{ source: source } };
|
|
44
|
-
const layer = new TileLayer(layerOpt);
|
|
45
|
-
layer.set("base", true);
|
|
46
|
-
layer.setZIndex(0);
|
|
47
|
-
return layer;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
</script>
|
|
51
|
-
|
|
52
|
-
<style scoped></style>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,gCAAgC,CAAC;AAEjD,IAAY,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IACnC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACjC,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div :id="target" :style="{ width: mapWidth, height: mapHeight }">
|
|
3
|
-
<slot v-if="load"></slot>
|
|
4
|
-
</div>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<script lang="ts">
|
|
8
|
-
import {
|
|
9
|
-
Component,
|
|
10
|
-
Prop,
|
|
11
|
-
Vue,
|
|
12
|
-
PropSync,
|
|
13
|
-
Provide,
|
|
14
|
-
} from "vue-property-decorator";
|
|
15
|
-
import { olMap } from "@/utils";
|
|
16
|
-
|
|
17
|
-
@Component({
|
|
18
|
-
name: "v-map",
|
|
19
|
-
})
|
|
20
|
-
export default class VMap extends Vue {
|
|
21
|
-
@Provide("VMap")
|
|
22
|
-
VMap: this = this;
|
|
23
|
-
// map = olMap.map;
|
|
24
|
-
|
|
25
|
-
@Prop({ default: "map" }) target!: string;
|
|
26
|
-
@Prop() private width!: number | string;
|
|
27
|
-
@Prop() private height!: number | string;
|
|
28
|
-
|
|
29
|
-
@PropSync("width", { default: "100%" }) mapWidth!: boolean;
|
|
30
|
-
@PropSync("height", { default: "100%" }) mapHeight!: boolean;
|
|
31
|
-
get map(): any {
|
|
32
|
-
return olMap.map;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// map: any | undefined;
|
|
36
|
-
load = false;
|
|
37
|
-
|
|
38
|
-
// mounted 生命周期钩子函数
|
|
39
|
-
mounted(): void {
|
|
40
|
-
this.init().then((res) => {
|
|
41
|
-
// console.log(this.map);
|
|
42
|
-
if (res === "success") {
|
|
43
|
-
this.load = true;
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
init(): Promise<string> {
|
|
48
|
-
return new Promise((resolve, reject) => {
|
|
49
|
-
olMap.map = new olMap({
|
|
50
|
-
target: this.target,
|
|
51
|
-
});
|
|
52
|
-
if (olMap.map) {
|
|
53
|
-
resolve("success");
|
|
54
|
-
} else {
|
|
55
|
-
reject(new Error("fail"));
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
</script>
|
|
61
|
-
|
|
62
|
-
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
63
|
-
<style scoped lang="scss"></style>
|
package/src/index.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import VMap from "@/components/VMap/src/VMap.vue";
|
|
2
|
-
const components = [VMap];
|
|
3
|
-
const install = (Vue) => {
|
|
4
|
-
if (install.installed)
|
|
5
|
-
return;
|
|
6
|
-
install.installed = true;
|
|
7
|
-
components.map((component) => {
|
|
8
|
-
Vue.component(component.name, component);
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
|
-
// 这一步判断window.Vue是否存在,因为直接引用vue.min.js, 它会把Vue绑到Window上,我们直接引用打包好的js才能正常跑起来。
|
|
12
|
-
if (typeof window !== "undefined" && window.Vue) {
|
|
13
|
-
// window.Vue.use(install)
|
|
14
|
-
install(window.Vue);
|
|
15
|
-
}
|
|
16
|
-
export default {
|
|
17
|
-
install,
|
|
18
|
-
VMap,
|
|
19
|
-
};
|
|
20
|
-
export { VMap };
|
|
21
|
-
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,gCAAgC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC;AAE1B,MAAM,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IAC3B,IAAK,OAAe,CAAC,SAAS;QAAE,OAAO;IACtC,OAAe,CAAC,SAAS,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;QAC3B,GAAG,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AACF,6EAA6E;AAC7E,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,GAAG,EAAE;IACxD,0BAA0B;IAC1B,OAAO,CAAE,MAAc,CAAC,GAAG,CAAC,CAAC;CAC9B;AAED,eAAe;IACb,OAAO;IACP,IAAI;CACL,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
package/src/index.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import VMap from "@/components/VMap/src/VMap.vue";
|
|
2
|
-
import VTile from "@/components/Layers/TileLayer/index";
|
|
3
|
-
|
|
4
|
-
const components = [VMap, VTile];
|
|
5
|
-
|
|
6
|
-
const install = (Vue: any) => {
|
|
7
|
-
if ((install as any).installed) return;
|
|
8
|
-
(install as any).installed = true;
|
|
9
|
-
components.map((component) => {
|
|
10
|
-
Vue.component(component.name, component);
|
|
11
|
-
});
|
|
12
|
-
};
|
|
13
|
-
// 这一步判断window.Vue是否存在,因为直接引用vue.min.js, 它会把Vue绑到Window上,我们直接引用打包好的js才能正常跑起来。
|
|
14
|
-
if (typeof window !== "undefined" && (window as any).Vue) {
|
|
15
|
-
// window.Vue.use(install)
|
|
16
|
-
install((window as any).Vue);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export default {
|
|
20
|
-
install,
|
|
21
|
-
VMap,
|
|
22
|
-
VTile,
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export { VMap, VTile };
|
package/vue.config.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// Template version: 1.3.1
|
|
3
|
-
// see http://vuejs-templates.github.io/webpack for documentation.
|
|
4
|
-
module.exports = {
|
|
5
|
-
// 修改 src 目录 为 examples 目录
|
|
6
|
-
pages: {
|
|
7
|
-
index: {
|
|
8
|
-
entry: "examples/main.ts",
|
|
9
|
-
template: "public/index.html",
|
|
10
|
-
filename: "index.html",
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
devServer: {
|
|
14
|
-
hotOnly: true,
|
|
15
|
-
open: true,
|
|
16
|
-
proxy: {
|
|
17
|
-
"/arcgis": {
|
|
18
|
-
target:
|
|
19
|
-
"http://172.16.28.120:6080/arcgis/rest/services/tx/NAServer/Route/solve",
|
|
20
|
-
changeOrigin: true,
|
|
21
|
-
},
|
|
22
|
-
"/route": {
|
|
23
|
-
target: "http://172.16.28.74:9999/route",
|
|
24
|
-
changeOrigin: true,
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
// vue 通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的图片路径,再用 url-loader 将小于 4kb 的
|
|
29
|
-
// 图片内联,以减少 HTTP 请求的数量。所以我们可以通过 chainWebpack 调整图片的大小限制。例如,我们将
|
|
30
|
-
// 图片大小限制设置为 13kb,低于13kb的图片全部被内联,高于13kb的图片会放在单独的img文件夹中。
|
|
31
|
-
chainWebpack: (config) => {
|
|
32
|
-
const imagesRule = config.module.rule("images");
|
|
33
|
-
imagesRule
|
|
34
|
-
.use("url-loader")
|
|
35
|
-
.loader("url-loader")
|
|
36
|
-
.tap((options) => Object.assign(options, { limit: 13312 }));
|
|
37
|
-
},
|
|
38
|
-
// 设置css: { extract: false },可以强制内联,就不会将css单独打包成一个文件,导致页面没有style
|
|
39
|
-
css: { extract: false },
|
|
40
|
-
productionSourceMap: false,
|
|
41
|
-
};
|