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