Skip to content

蒋波涛 / super_mapboxgl_vue

Go to a project
Toggle navigation
Toggle navigation pinning
6986fdc7 by unknown
Options

'20191214'

1 parent 46f87e0b
Expand all
Inline Side-by-side
Showing 11 changed files with 226 additions and 18 deletions
...@@ -58,7 +58,15 @@ exports.cssLoaders = function (options) { ...@@ -58,7 +58,15 @@ exports.cssLoaders = function (options) {
58 return { 58 return {
59 css: generateLoaders(), 59 css: generateLoaders(),
60 postcss: generateLoaders(), 60 postcss: generateLoaders(),
61 less: generateLoaders('less'), 61 // less: generateLoaders('less'),
62 less: generateLoaders('less', {
63 modifyVars: {
64 'primary-color': '#1DA57A',
65 'link-color': '#1DA57A',
66 'border-radius-base': '2px',
67 },
68 javascriptEnabled: true,
69 }),
62 sass: generateLoaders('sass', { indentedSyntax: true }), 70 sass: generateLoaders('sass', { indentedSyntax: true }),
63 scss: generateLoaders('sass'), 71 scss: generateLoaders('sass'),
64 stylus: generateLoaders('stylus'), 72 stylus: generateLoaders('stylus'),
......
...@@ -4,9 +4,12 @@ ...@@ -4,9 +4,12 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 <title>SuperMap Mapbox GL VUE示例</title> 6 <title>SuperMap Mapbox GL VUE示例</title>
7 <script src="./static/js/v3.0.11/turf.min.js"></script>
8 <script src="./static/js/v1.0.9/mapbox-gl-draw.js"></script>
7 <script src="./static/js/mapbox-gl-enhance.js"></script> 9 <script src="./static/js/mapbox-gl-enhance.js"></script>
8 <script src="./static//js/styles.js"></script> 10 <script src="./static//js/styles.js"></script>
9 <link href='./static/css/mapbox-gl.css' rel='stylesheet' /> 11 <link href='./static/css/mapbox-gl.css' rel='stylesheet' />
12 <link rel="stylesheet" href="./static/js/v1.0.9/mapbox-gl-draw.css" type="text/css"/>
10 </head> 13 </head>
11 <body style="padding: 0px; margin: 0px; overflow: hidden;"> 14 <body style="padding: 0px; margin: 0px; overflow: hidden;">
12 <div id="app"></div> 15 <div id="app"></div>
......
...@@ -2,23 +2,72 @@ ...@@ -2,23 +2,72 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-12 17:40:15 3 * @Date: 2019-12-12 17:40:15
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-12 17:51:38 5 * @LastEditTime: 2019-12-14 00:01:58
6 * @FilePath: \mymapbox\src\App.vue 6 * @FilePath: \mymapbox\src\App.vue
7 --> 7 -->
8 <template> 8 <template>
9 <div id="app"> 9 <a-layout id="components-layout-demo-top-side-2">
10 <router-view/> 10 <a-layout-header class="header">
11 </div> 11 <a-icon type="compass" />&nbsp;&nbsp;温州项目VUE 2DMap示例(v10.0)
12 <a-menu
13 theme="dark"
14 mode="horizontal"
15 :defaultSelectedKeys="['2']"
16 :style="{ lineHeight: '64px' }"
17 >
18 </a-menu>
19 </a-layout-header>
20 <a-layout>
21 <a-layout-sider width="200" style="background: #fff">
22 <MyMenu></MyMenu>
23 </a-layout-sider>
24 <a-layout style="padding: 10px 10px 10px 10px">
25 <a-layout-content :style="{ background: '#fff', padding: '10px', margin: 0, minHeight: '500px' }">
26 <div id="app" style="position: relative; width:100%;">
27 <router-view/>
28 </div>
29 </a-layout-content>
30 </a-layout>
31 </a-layout>
32 </a-layout>
12 </template> 33 </template>
13 34
14 <script> 35 <script>
36 import MyMenu from './components/menu/MyMenu';
15 export default { 37 export default {
16 name: 'App' 38 name: 'App',
39 data() {
40 return {
41 collapsed: false,
42 };
43 },
44 components: { MyMenu },
17 } 45 }
18 </script> 46 </script>
19 47
20 <style> 48 <style>
21 #app { 49 .ant-layout-header {
22 50 height: 64px;
23 } 51 padding: 0 10px;
52 line-height: 64px;
53 background: #096fd0;
54 color: white;
55 font-size: 30px;
56 border-bottom-style: solid;
57 border-bottom-width: 2px;
58 border-bottom-color: #bb5905;
59 }
60 .ant-layout {
61 height: 100%;
62 }
63 #components-layout-demo-top-side-2 .logo {
64 width: 120px;
65 height: 31px;
66 background: rgba(255, 255, 255, 0.2);
67 margin: 16px 28px 16px 0;
68 float: left;
69 }
70 #app{
71 height: 100%;
72 }
24 </style> 73 </style>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-09 23:17:48 3 * @Date: 2019-12-09 23:17:48
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-12 18:37:31 5 * @LastEditTime: 2019-12-14 00:21:29
6 * @FilePath: \mymapbox\src\components\Map3857.vue 6 * @FilePath: \mymapbox\src\components\Map3857.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -18,8 +18,8 @@ Vue.use(message) ...@@ -18,8 +18,8 @@ Vue.use(message)
18 18
19 import mapboxgl from 'mapbox-gl'; 19 import mapboxgl from 'mapbox-gl';
20 import { Logo, MeasureService } from '@supermap/iclient-mapboxgl'; 20 import { Logo, MeasureService } from '@supermap/iclient-mapboxgl';
21 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'; 21 // import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
22 import MapboxDraw from '@mapbox/mapbox-gl-draw'; 22 // import MapboxDraw from '@mapbox/mapbox-gl-draw';
23 export default { 23 export default {
24 name: 'HelloWorld', 24 name: 'HelloWorld',
25 data () { 25 data () {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-10 14:16:04 3 * @Date: 2019-12-10 14:16:04
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-10 17:03:22 5 * @LastEditTime: 2019-12-14 00:21:41
6 * @FilePath: \mymapbox\src\components\Map_filter_sql.vue 6 * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
14 <script> 14 <script>
15 import mapboxgl from 'mapbox-gl'; 15 import mapboxgl from 'mapbox-gl';
16 import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl'; 16 import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
17 import MapboxDraw from '@mapbox/mapbox-gl-draw'; 17 // import MapboxDraw from '@mapbox/mapbox-gl-draw';
18 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'; 18 // import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
19 19
20 export default { 20 export default {
21 name: 'HelloWorld', 21 name: 'HelloWorld',
......
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-13 23:53:57
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-13 23:57:11
6 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue
7 -->
8 <template>
9 <a-menu
10 mode="inline"
11 :defaultSelectedKeys="['1']"
12 :defaultOpenKeys="['sub1']"
13 :style="{ height: '100%', borderRight: 0 }">
14 <a-sub-menu key="sub1">
15 <span slot="title"><a-icon type="user" />基本信息</span>
16 <a-menu-item key="1_1"><router-link :to="'/'">地图信息</router-link></a-menu-item>
17 <a-menu-item key="1_2"><router-link :to="'/rastertile'">栅格瓦片</router-link></a-menu-item>
18 <a-menu-item key="1_3"><router-link :to="'/mvt'">矢量瓦片</router-link></a-menu-item>
19 <a-menu-item key="1_4"><router-link :to="'/measure'">地图量测</router-link></a-menu-item>
20 </a-sub-menu>
21 <a-sub-menu key="sub2">
22 <span slot="title"><a-icon type="laptop" />要素查询</span>
23 <a-menu-item key="2_1"><router-link :to="'/feature_bounds'">Bounds查询</router-link></a-menu-item>
24 <a-menu-item key="2_2"><router-link :to="'/feature_buffer'">缓冲区查询</router-link></a-menu-item>
25 <a-menu-item key="2_3"><router-link :to="'/feature_draw'">手工空间查询</router-link></a-menu-item>
26 <a-menu-item key="2_4"><router-link :to="'/feature_geo'">几何空间查询</router-link></a-menu-item>
27 <a-menu-item key="2_5"><router-link :to="'/feature_sql'">SQL查询</router-link></a-menu-item>
28 </a-sub-menu>
29 <a-sub-menu key="sub3">
30 <span slot="title"><a-icon type="notification" />检索</span>
31 <a-menu-item key="3_1"><router-link :to="'/query_bounds'">Bounds检索</router-link></a-menu-item>
32 <a-menu-item key="3_2"><router-link :to="'/query_distance'">距离检索</router-link></a-menu-item>
33 <a-menu-item key="3_3"><router-link :to="'/query_geo'">几何检索</router-link></a-menu-item>
34 <a-menu-item key="3_4"><router-link :to="'/query_sql'">SQL检索</router-link></a-menu-item>
35 </a-sub-menu>
36 <a-sub-menu key="sub4">
37 <span slot="title"><a-icon type="appstore" />空间</span>
38 <a-menu-item key="4_1"><router-link :to="'/spatial_buffer'">构造缓冲区</router-link></a-menu-item>
39 <a-menu-item key="4_2"><router-link :to="'/spatial_heatmap'">热力图</router-link></a-menu-item>
40 </a-sub-menu>
41 <a-sub-menu key="sub5">
42 <span slot="title"><a-icon type="setting" />专题图</span>
43 <a-menu-item key="5_1"><router-link :to="'/theme_dot'">点密度</router-link></a-menu-item>
44 <a-menu-item key="5_2"><router-link :to="'/theme_gra'">分级图</router-link></a-menu-item>
45 <a-menu-item key="5_3"><router-link :to="'/theme_range'">分段渲染</router-link></a-menu-item>
46 <a-menu-item key="5_4"><router-link :to="'/theme_label'">注记图</router-link></a-menu-item>
47 </a-sub-menu>
48 </a-menu>
49 </template>
...\ No newline at end of file ...\ No newline at end of file
1 /*
2 * @Author: jiangbotao
3 * @Date: 2019-12-12 17:40:15
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-13 23:28:46
6 * @FilePath: \supermapvue\src\main.js
7 */
1 // The Vue build version to load with the `import` command 8 // The Vue build version to load with the `import` command
2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 9 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 import Vue from 'vue' 10 import Vue from 'vue'
11 import Antd from 'ant-design-vue'
4 import App from './App' 12 import App from './App'
5 import router from './router' 13 import router from './router'
6 import 'ant-design-vue/dist/antd.css' 14 import 'ant-design-vue/dist/antd.css'
7 15
8 Vue.config.productionTip = false 16 Vue.config.productionTip = false
17 Vue.use(Antd)
9 18
10 /* eslint-disable no-new */ 19 /* eslint-disable no-new */
11 new Vue({ 20 new Vue({
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-12 17:40:15 3 * @Date: 2019-12-12 17:40:15
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-13 11:24:37 5 * @LastEditTime: 2019-12-14 00:05:56
6 * @FilePath: \supermapvue\src\router\index.js 6 * @FilePath: \supermapvue\src\router\index.js
7 */ 7 */
8 import Vue from 'vue' 8 import Vue from 'vue'
...@@ -14,8 +14,98 @@ export default new Router({ ...@@ -14,8 +14,98 @@ export default new Router({
14 routes: [ 14 routes: [
15 { 15 {
16 path: '/', 16 path: '/',
17 name: 'Mapviewer', 17 name: 'MapInfo',
18 component: Mapviewer 18 component: () => import('@/components/basic/Map_info')
19 },
20 {
21 path: '/rastertile',
22 name: 'MapRasterTile',
23 component: () => import('@/components/basic/Map_rastertiles')
24 },
25 {
26 path: '/mvt',
27 name: 'MapMVT',
28 component: () => import('@/components/basic/Map_mvt')
29 },
30 {
31 path: '/measure',
32 name: 'MapMeasure',
33 component: () => import('@/components/basic/Map_measure')
34 },
35 {
36 path: '/feature_bounds',
37 name: 'Feature_Bounds',
38 component: () => import('@/components/features/Map_feature_bounds')
39 },
40 {
41 path: '/feature_buffer',
42 name: 'Feature_Buffer',
43 component: () => import('@/components/features/Map_feature_buffer')
44 },
45 {
46 path: '/feature_draw',
47 name: 'Feature_Draw',
48 component: () => import('@/components/features/Map_feature_draw')
49 },
50 {
51 path: '/feature_geo',
52 name: 'Feature_Geo',
53 component: () => import('@/components/features/Map_feature_geo')
54 },
55 {
56 path: '/feature_sql',
57 name: 'Feature_SQL',
58 component: () => import('@/components/features/Map_feature_sql')
59 },
60 {
61 path: '/query_bounds',
62 name: 'Query_Bounds',
63 component: () => import('@/components/query/Map_query_Bounds')
64 },
65 {
66 path: '/query_distance',
67 name: 'Query_Distance',
68 component: () => import('@/components/query/Map_query_distance')
69 },
70 {
71 path: '/query_geo',
72 name: 'Query_Geo',
73 component: () => import('@/components/query/Map_query_geo')
74 },
75 {
76 path: '/query_sql',
77 name: 'Query_SQL',
78 component: () => import('@/components/query/Map_query_sql')
79 },
80 {
81 path: '/spatial_buffer',
82 name: 'Spatial_Buffer',
83 component: () => import('@/components/spatial/Map_spatial_buffer')
84 },
85 {
86 path: '/spatial_heatmap',
87 name: 'Spatial_Heatmap',
88 component: () => import('@/components/spatial/Map_spatial_heatmap')
89 },
90 {
91 path: '/theme_dot',
92 name: 'Theme_Dot',
93 component: () => import('@/components/theme/Map_theme_dot')
94 },
95 {
96 path: '/theme_gra',
97 name: 'Theme_Gra',
98 component: () => import('@/components/theme/Map_theme_graduated.vue')
99 },
100 {
101 path: '/theme_range',
102 name: 'Theme_Range',
103 component: () => import('@/components/theme/Map_theme_range')
104 },
105 {
106 path: '/theme_label',
107 name: 'Theme_Label',
108 component: () => import('@/components/theme/Map_theme_label')
19 } 109 }
20 ] 110 ]
21 }) 111 })
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.