Skip to content

V
vue2-arcgis
Commit dbae82a7 authored by zengyilun's avatar zengyilun
Browse files
Options

add

parents
Show whitespace changes
Inline Side-by-side
Showing with 1474 additions and 0 deletions
README.md 0 → 100644
View file @ dbae82a7
# svi-cli vue-arcgis Template
> 一个简单的vue + arcgis的初始模板，提供给svi-cli脚手架获取.
> 专门提供内部用Vuejs+arcgis开发页面的初始模板
```
1、包含vue, arcgis, eslint初始配置 打包静态文件修正
2、也包含了test e2e测试
3、定好了目录结构
```
## Usage / 用法
``` bash
$ npm install -g svi-cli
$ svi init vue-arcgis my-project
$ cd my-project
$ npm install
$ npm run serve
```
meta.js 0 → 100644
View file @ dbae82a7
module.exports = {
renderFiles: [
'package.json'
],
filters: {
},
prompts: {
name: {
type: 'string',
required: true,
message: 'Project name'
},
description: {
type: 'string',
required: false,
message: 'Project description',
default: 'A vuejs project',
},
author: {
type: 'string',
message: 'Author'
}
}
}
\ No newline at end of file
package.json 0 → 100644
View file @ dbae82a7
{
"name": "vue-arcgis-template",
"version": "0.0.1",
"description": "a svi CLI vue-arcgis template.",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"template"
],
"author": "PolanZ",
"license": "MIT"
}
template/.browserslistrc 0 → 100644
View file @ dbae82a7
> 1%
last 2 versions
template/.editorconfig 0 → 100644
View file @ dbae82a7
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
template/.eslintrc.js 0 → 100644
View file @ dbae82a7
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
"comma-dangle": ["error", {
"arrays": "never",
"objects": "ignore",
"imports": "ignore",
"exports": "ignore",
"functions": "ignore"
}],
'generator-star-spacing': 'off',
"space-before-function-paren": ["error", {
"anonymous": "always",
"named": "never",
"asyncArrow": "always"
}],
'template-curly-spacing': 'off',
'no-multi-spaces': ['error', {
'ignoreEOLComments': true
}],
'no-trailing-spaces': 'off',
'no-useless-escape': 'error',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
template/.gitignore 0 → 100644
View file @ dbae82a7
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
template/README.md 0 → 100644
View file @ dbae82a7
# vue + acrgis
```
vue + acrgis 模板
```
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
template/babel.config.js 0 → 100644
View file @ dbae82a7
module.exports = {
presets: [
'@vue/app'
]
}
template/package.json 0 → 100644
View file @ dbae82a7
{
"name": "{{ name }}",
"description": "{{ description }}",
"version": "0.1.0",
"author": "{{ author }}",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"core-js": "^2.6.5",
"esri-loader": "^2.9.2",
"normalize.css": "^8.0.1",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-plugin-unit-mocha": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"chai": "^4.1.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.18.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.21"
}
}
template/postcss.config.js 0 → 100644
View file @ dbae82a7
module.exports = {
plugins: {
autoprefixer: {}
}
}
template/public/index.html 0 → 100644
View file @ dbae82a7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Arcgis模板</title>
</head>
<body>
<noscript>
<strong>We're sorry but integrated doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
template/src/App.vue 0 → 100644
View file @ dbae82a7
<template>
<div id="app">
<router-view/>
</div>
</template>
template/src/components/Map.vue 0 → 100644
View file @ dbae82a7
<template>
<div>
<div id="viewDiv"></div>
<map-zoom :value="zoomDefLevel" :min="zoomMin" :max="zoomMax" @change="zoomChangeHandler"></map-zoom>
</div>
</template>
<script>
import { arcgisApiUrl } from '@/config/http.config'
import * as esriLoader from 'esri-loader'
import { gaodeLayer } from './map/amap'
import MapZoom from './map/MapZoom'
esriLoader.loadCss(`${arcgisApiUrl}/esri/css/esri.css`)
export default {
name: 'Map',
components: {
MapZoom
},
data() {
return {
map: null,
zoomDefLevel: 8, // 地图默认放大级别
zoomMin: 0, // 地图缩放最小级别
zoomMax: 18, // 地图缩放最大级别
}
},
mounted() {
const options = { url: `${arcgisApiUrl}/init.js` }
this.createMap(options)
},
methods: {
createMap(options) {
console.log('---- create map -----')
esriLoader.loadModules(['esri/map'], options)
.then(([Map]) => {
// create map with the given options at a DOM node w/ id 'viewDiv'
this.map = new Map('viewDiv', {
center: [112, 23.5],
// basemap: 'streets',
slider: false,
logo: false,
zoom: this.zoomDefLevel,
minZoom: this.zoomMin,
maxZoom: this.zoomMax,
showAttribution: false,
})
gaodeLayer.create(this.map)
// console.log(this.map)
this.$store.dispatch('setMap', this.map)
this.map.on('load', (event) => {
this.$emit('mapLoad')
this.zoomDefLevel = this.map.getZoom()
})
this.map.on('click', (event) => {
// console.log(JSON.stringify(event.mapPoint))
})
this.map.on('extent-change', (event) => {
if (event.levelChange) {
this.zoomDefLevel = this.map.getZoom()
}
})
})
.catch(err => {
// handle any script or module loading errors
console.error(err)
})
},
zoomChangeHandler(val) {
this.map && this.map.setZoom(val)
},
}
}
</script>
<style scoped>
#viewDiv {
width: 100%;
height: 100%;
}
</style>
template/src/components/iframe/index.js 0 → 100644
View file @ dbae82a7
import Frame from './src/Frame.vue'
/* istanbul ignore next */
Frame.install = function (Vue) {
Vue.component(Frame.name, Frame)
}
export default Frame
template/src/components/iframe/src/Frame.vue 0 → 100644
View file @ dbae82a7
<template>
<iframe :src="url" frameborder="0" width="100%" height="100%" @load="handleLoad"></iframe>
</template>
<script>
export default {
name: 'SmIframe',
props: {
url: String
},
methods: {
handleLoad() {
this.$emit('load')
}
}
}
</script>
template/src/components/map/MapZoom.vue 0 → 100644
View file @ dbae82a7
<template>
<div class="mapSlider">
<div class="btn enlarge">
<el-button type="primary" size="mini" @click="handleZoom('enlarge')">+</el-button>
</div>
<el-slider
class="map-elSlider"
v-model="valueMod"
vertical
height="140px"
:max="max"
:min="min"
:step="step"
show-stops
@change="changeHandler"
>
</el-slider>
<div class="btn narrow">
<el-button type="primary" size="mini" @click="handleZoom('narrow')">-</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
value: Number,
max: {
type: Number,
default: 10
},
min: {
type: Number,
default: 0
},
step: {
type: Number,
default: 1
}
},
data() {
return {
valueMod: 0
}
},
watch: {
value(newVal) {
this.valueMod = newVal
}
},
mounted() {
this.valueMod = this.value
},
methods: {
changeHandler(val) {
this.$emit('change', val)
},
handleZoom(type) {
if (type === 'narrow') {
this.valueMod--
this.changeHandler(this.valueMod)
} else if (type === 'enlarge') {
this.valueMod++
this.changeHandler(this.valueMod)
}
}
}
}
</script>
<style scoped lang="scss">
.mapSlider {
display: block;
position: absolute;
right: 20px ;
top: 20px;
/*width: 16px;*/
z-index: 30;
.btn {
text-align: center;
.el-button {
margin: 0 auto;
font-size: 12px;
width: 19px;
height: 19px;
border: 1px solid #fff;
&.el-button--mini {
border-radius: 2px;
padding: 0 4px;
}
}
&:first-child {
.el-button {
margin-bottom: 5px;
}
}
&:last-child {
.el-button {
margin-top: 5px;
}
}
}
}
</style>
template/src/components/map/amap.js 0 → 100644
View file @ dbae82a7
import { loadModules } from 'esri-loader'
export const gaodeLayer = {}
/**
* 创建高德地图
* @param {Object} map 地图实例
* @param {Object} args 配置参数，比如{layertype: 'road'}
*/
gaodeLayer.create = function (map, args) {
loadModules([
'dojo/_base/declare',
'esri/geometry/Extent',
'esri/SpatialReference',
'esri/geometry/Point',
'esri/layers/TileInfo',
'esri/layers/TiledMapServiceLayer'])
.then(([declare, Extent, SpatialReference, Point, TileInfo, TiledMapServiceLayer]) => {
declare('GaoDeLayer', TiledMapServiceLayer, {
name: 'GaoDeLayer',
layertype: 'road', // 图层类型
// 构造函数
constructor() {
// 这里使用坐标系为投影坐标系WGS_1984_Web_Mercator_Auxiliary_Sphere（wkid: 3857）
this.spatialReference = new SpatialReference({
wkid: 3857
})
declare.safeMixin(this, args)
// 图层提供的起始显示范围和整个图层的地理范围
this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference)
this.initialExtent = this.fullExtent
this.tileInfo = new TileInfo({
'cols': 256,
'rows': 256,
'compressionQuality': 0,
'origin': new Point(-20037508.342787, 20037508.342787, this.spatialReference),
'spatialReference': this.spatialReference,
'lods': [
{ 'level': 0, 'resolution': 156543.033928, 'scale': 591657527.591555 },
{ 'level': 1, 'resolution': 78271.5169639999, 'scale': 295828763.795777 },
{ 'level': 2, 'resolution': 39135.7584820001, 'scale': 147914381.897889 },
{ 'level': 3, 'resolution': 19567.8792409999, 'scale': 73957190.948944 },
{ 'level': 4, 'resolution': 9783.93962049996, 'scale': 36978595.474472 },
{ 'level': 5, 'resolution': 4891.96981024998, 'scale': 18489297.737236 },
{ 'level': 6, 'resolution': 2445.98490512499, 'scale': 9244648.868618 },
{ 'level': 7, 'resolution': 1222.99245256249, 'scale': 4622324.434309 },
{ 'level': 8, 'resolution': 611.49622628138, 'scale': 2311162.217155 },
{ 'level': 9, 'resolution': 305.748113140558, 'scale': 1155581.108577 },
{ 'level': 10, 'resolution': 152.874056570411, 'scale': 577790.554289 },
{ 'level': 11, 'resolution': 76.4370282850732, 'scale': 288895.277144 },
{ 'level': 12, 'resolution': 38.2185141425366, 'scale': 144447.638572 },
{ 'level': 13, 'resolution': 19.1092570712683, 'scale': 72223.819286 },
{ 'level': 14, 'resolution': 9.55462853563415, 'scale': 36111.909643 },
{ 'level': 15, 'resolution': 4.77731426794937, 'scale': 18055.954822 },
{ 'level': 16, 'resolution': 2.38865713397468, 'scale': 9027.977411 },
{ 'level': 17, 'resolution': 1.19432856685505, 'scale': 4513.988705 },
{ 'level': 18, 'resolution': 0.597164283559817, 'scale': 2256.994353 }
]
})
// 设置图层的loaded属性，并触发onLoad事件
this.loaded = true
this.onLoad(this)
},
/**
* 根据不同的layType返回不同的图层
* @param level
* @param row
* @param col
* @returns {string}
*/
getTileUrl(level, row, col) {
/* let url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level
return url */
let url = ''
switch (this.layertype) {
case 'road':
url = 'https://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level
break
case 'st':
url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level
break
case 'label':
url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level
break
default:
url = 'https://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level
break
}
return url
}
})
function loadLayer(map) {
/* eslint-disable */
let gaoLayer = new GaoDeLayer()
map.addLayer(gaoLayer)
}
loadLayer(map)
})
}
template/src/components/map/bdmap.js 0 → 100644
View file @ dbae82a7
import { loadModules } from 'esri-loader'
export const bdLayer = {}
/**
* 创建百度地图图层
* @param {Object} map 地图实例
* @param {Object} args 配置参数，比如{layertype: 'road'}
*/
bdLayer.create = function (map, args) {
loadModules(['dojo/_base/declare', 'esri/layers/tiled', 'esri/layers/TileInfo', 'esri/layers/TiledMapServiceLayer', 'esri/SpatialReference', 'esri/geometry/Extent'])
.then(([declare, tiled, TileInfo, TiledMapServiceLayer, SpatialReference, Extent]) => {
declare('BDLayer', TiledMapServiceLayer, {
name: 'BDLayer',
layertype: 'ano',
constructor: function () {
this.spatialReference = new SpatialReference({
wkid: 102100
})
declare.safeMixin(this, args)
this.initialExtent = (this.fullExtent = new Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference))
this.scale = [591657527.591555, 295828763.795777, 147914381.897889, 73957190.948944, 36978595.474472, 18489297.737236, 9244648.868618,
4622324.434309, 2311162.217155, 1155581.108577, 577790.554289, 288895.277144, 144447.638572, 72223.819286,
36111.9096437, 18055.9548224, 9027.977411, 4513.988705, 2256.994353, 1128.497176
]
this.resolution = [156543.033928, 78271.5169639999, 39135.7584820001, 19567.8792409999, 9783.93962049996, 4891.96981024998, 2445.98490512499,
1222.99245256249, 611.49622628138, 305.748113140558, 152.874056570411, 76.4370282850732, 38.2185141425366, 19.1092570712683, 9.55462853563415,
4.77731426794937, 2.38865713397468, 1.19432856685505, 0.597164283559817, 0.298582141647617
]
this.tileInfo = new TileInfo({
'rows': 256,
'cols': 256,
'compressionQuality': 90,
'origin': {
'x': -20037508.3427892,
'y': 20037508.3427892
},
'spatialReference': this.spatialReference,
'lods': [
{
'level': 0,
'resolution': this.resolution[0],
'scale': this.scale[0]
},
{
'level': 1,
'resolution': this.resolution[1],
'scale': this.scale[1]
},
{
'level': 2,
'resolution': this.resolution[2],
'scale': this.scale[2]
},
{
'level': 3,
'resolution': this.resolution[3],
'scale': this.scale[3]
},
{
'level': 4,
'resolution': this.resolution[4],
'scale': this.scale[4]
},
{
'level': 5,
'resolution': this.resolution[5],
'scale': this.scale[5]
},
{
'level': 6,
'resolution': this.resolution[6],
'scale': this.scale[6]
},
{
'level': 7,
'resolution': this.resolution[7],
'scale': this.scale[7]
},
{
'level': 8,
'resolution': this.resolution[8],
'scale': this.scale[8]
},
{
'level': 9,
'resolution': this.resolution[9],
'scale': this.scale[9]
},
{
'level': 10,
'resolution': this.resolution[10],
'scale': this.scale[10]
},
{
'level': 11,
'resolution': this.resolution[11],
'scale': this.scale[11]
},
{
'level': 12,
'resolution': this.resolution[12],
'scale': this.scale[12]
},
{
'level': 13,
'resolution': this.resolution[13],
'scale': this.scale[13]
},
{
'level': 14,
'resolution': this.resolution[14],
'scale': this.scale[14]
},
{
'level': 15,
'resolution': this.resolution[15],
'scale': this.scale[15]
},
{
'level': 16,
'resolution': this.resolution[16],
'scale': this.scale[16]
},
{
'level': 17,
'resolution': this.resolution[17],
'scale': this.scale[17]
},
{
'level': 18,
'resolution': this.resolution[18],
'scale': this.scale[18]
},
{
'level': 19,
'resolution': this.resolution[19],
'scale': this.scale[19]
}
]
})
this.loaded = true
this.onLoad(this)
},
getTileUrl: function (level, row, col) {
var zoom = level - 1
var offsetX = parseInt(Math.pow(2, zoom))
var offsetY = offsetX - 1
var numX = col - offsetX
var numY = (-row) + offsetY
var num = (col + row) % 8 + 1
let url = ''
switch (this.layertype) {
case 'ano':
url = 'http://online' + num + '.map.bdimg.com/tile/?qt=tile&x=' + numX + '&y=' + numY + '&z=' + level + '&styles=sl&udt=20141015'
break
case 'vec':
url = 'http://online' + num + '.map.bdimg.com/tile/?qt=tile&x=' + numX + '&y=' + numY + '&z=' + level + '&styles=pl&scaler=1&udt=20141103'
break
default:
url = 'http://online' + num + '.map.bdimg.com/tile/?qt=tile&x=' + numX + '&y=' + numY + '&z=' + level + '&styles=sl&udt=20141015'
}
return url
}
})
function loadLayer(map) {
/* eslint-disable */
const layer = new BDLayer()
map.addLayer(layer)
}
loadLayer(map)
})
}
\ No newline at end of file
template/src/components/map/tdmap.js 0 → 100644
View file @ dbae82a7
import { loadModules } from 'esri-loader'
export const tdLayer = {}
/**
* 创建天地图图层
* @param {Object} map 地图实例
* @param {Object} args 配置参数，比如{layertype: 'road'}
*/
tdLayer.create = function (map, args) {
loadModules(['dojo/_base/declare', 'esri/layers/tiled', 'esri/layers/TileInfo', 'esri/layers/TiledMapServiceLayer', 'esri/SpatialReference', 'esri/geometry/Extent'])
.then(([declare, tiled, TileInfo, TiledMapServiceLayer, SpatialReference, Extent]) => {
declare('TDLayer', TiledMapServiceLayer, {
name: 'TDLayer',
layertype: 'vec',
constructor: function () {
this.spatialReference = new SpatialReference({
wkid: 4326
})
declare.safeMixin(this, args)
this.initialExtent = (this.fullExtent = new Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference))
this.tileInfo = new TileInfo({
'rows': 256,
'cols': 256,
'compressionQuality': 0,
'origin': {
'x': -180,
'y': 90
},
'spatialReference': {
'wkid': 4326
},
'lods': [
{
'level': 2,
'resolution': 0.3515625,
'scale': 147748796.52937502
},
{
'level': 3,
'resolution': 0.17578125,
'scale': 73874398.264687508
},
{
'level': 4,
'resolution': 0.087890625,
'scale': 36937199.132343754
},
{
'level': 5,
'resolution': 0.0439453125,
'scale': 18468599.566171877
},
{
'level': 6,
'resolution': 0.02197265625,
'scale': 9234299.7830859385
},
{
'level': 7,
'resolution': 0.010986328125,
'scale': 4617149.8915429693
},
{
'level': 8,
'resolution': 0.0054931640625,
'scale': 2308574.9457714846
},
{
'level': 9,
'resolution': 0.00274658203125,
'scale': 1154287.4728857423
},
{
'level': 10,
'resolution': 0.001373291015625,
'scale': 577143.73644287116
},
{
'level': 11,
'resolution': 0.0006866455078125,
'scale': 288571.86822143558
},
{
'level': 12,
'resolution': 0.00034332275390625,
'scale': 144285.93411071779
},
{
'level': 13,
'resolution': 0.000171661376953125,
'scale': 72142.967055358895
},
{
'level': 14,
'resolution': 8.58306884765625e-005,
'scale': 36071.483527679447
},
{
'level': 15,
'resolution': 4.291534423828125e-005,
'scale': 18035.741763839724
},
{
'level': 16,
'resolution': 2.1457672119140625e-005,
'scale': 9017.8708819198619
},
{
'level': 17,
'resolution': 1.0728836059570313e-005,
'scale': 4508.9354409599309
},
{
'level': 18,
'resolution': 5.3644180297851563e-006,
'scale': 2254.4677204799655
}
]
})
this.loaded = true
this.onLoad(this)
},
getTileUrl: function (level, row, col) {
let url = ''
switch (this.layertype) {
case 'ano':
url = 'http://t' + row % 8 + '.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +
level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles&&tk=3d77887860beea2308c835a583431b3f'
break
case 'vec':
url = 'http://t' + row % 8 + '.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +
level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles&tk=3d77887860beea2308c835a583431b3f'
break
case 'img':
url = 'http://t' + row % 8 + '.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +
level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles&tk=3d77887860beea2308c835a583431b3f'
break
default:
url = 'http://t' + row % 8 + '.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +
level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles&tk=3d77887860beea2308c835a583431b3f'
break
}
return url
}
})
function loadLayer(map) {
/* eslint-disable */
let layer = new TDLayer()
map.addLayer(layer)
}
loadLayer(map)
})
}
template/src/components/registComponents.js 0 → 100644
View file @ dbae82a7
import Vue from 'vue'
import smIframe from '@/components/iframe'
/**
* 注册加载组件
*/
export const registComponents = {
smIframe,
}
Object.keys(registComponents).map(key => {
if (registComponents[key].type === 'prototype') {
Object.keys(registComponents[key]).map(item => {
Vue.prototype[item] = registComponents[key][item]
})
} else {
Vue.use(registComponents[key])
}
})
template/src/config/http.config.js 0 → 100644
View file @ dbae82a7
// 接口主机
let host =
process.env.NODE_ENV === 'development'
? '172.16.122.84:8092'
: process.env.NODE_ENV === 'release'
? 'www.south-smart.com/smartwebservice'
: '172.16.122.84:8092'
let baseUrl = `http://` + host
/* eslint-disable */
const arcgisApiUrl = process.env.NODE_ENV === 'release'
? 'http://www.south-smart.com/arcgis_js_api/library/3.28/3.28'
: 'http://172.16.10.132:3169/arcgis_js_api/library/3.28/3.28'
export {
host,
baseUrl,
arcgisApiUrl
}
template/src/main.js 0 → 100644
View file @ dbae82a7
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/components/registComponents'
import './styles/index.scss'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
template/src/router/index.js 0 → 100644
View file @ dbae82a7
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
template/src/store/index.js 0 → 100644
View file @ dbae82a7
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
map: null
},
mutations: {
setMap(state, payload) {
state.map = payload
}
},
actions: {
setMap({ commit }, payload) {
commit('setMap', payload)
}
}
})
template/src/styles/index.scss 0 → 100644
View file @ dbae82a7
@import '~normalize.css';
@import './mixins/mixins.scss';
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,iframe,input,legend,li,ol,p,pre,td,textarea,th,ul{
margin:0;
padding:0;
}
%placeholder {
width: 100%;
height: 100%;
}
* {
scrollbar-base-color: #eee;
scrollbar-3dlight-color: #eee;
scrollbar-highlight-color: #eee;
scrollbar-track-color: #f1f1f1;
scrollbar-arrow-color: #000;
scrollbar-shadow-color: #eee;
box-sizing: border-box;
}
*::-webkit-scrollbar {
width: 8px;
height: 10px;
}
*::-webkit-scrollbar-button {
display: none;
}
*::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0, .2);
}
*::-webkit-scrollbar-track-piece {
background-color: #e4e4e4;
}
*::-webkit-scrollbar-thumb {
background-color: #a1a1a1;
outline: #707070 solid 1px;
}
/* common css set */
.fl {
float: left;
}
.flr {
float: right;
}
.clearfix {
clear: both;
&::after {
content: '';
display: block;
width: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
.align-center {
text-align: center;
}
/* common css set end */
html, body, #app {
@extend %placeholder;
}
body {
min-width: 1024px;
min-height: 536px;
overflow: auto;
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
color: $--color-text-regular;
}
@include b(app-main) {
@extend %placeholder;
display: flex;
flex-direction: column;
}
@include b(app-header) {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 12px;
height: 46px;
background-color: $--color-primary;
color: $--color-white;
.logo {
margin-right: 20px;
display: flex;
flex-direction: row;
height: 36px;
line-height: 36px;
}
.logo-img {
height: 100%;
margin-right: 6px;
}
}
@include b(app-map) {
position: relative;
flex: 1;
overflow: hidden;
}
\ No newline at end of file
template/src/styles/mixins/config.scss 0 → 100644
View file @ dbae82a7
$namespace: '';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';
template/src/styles/mixins/function.scss 0 → 100644
View file @ dbae82a7
@import "config";
/* BEM support Func
-------------------------- */
@function selectorToString($selector) {
$selector: inspect($selector);
$selector: str-slice($selector, 2, -2);
@return $selector;
}
@function containsModifier($selector) {
$selector: selectorToString($selector);
@if str-index($selector, $modifier-separator) {
@return true;
} @else {
@return false;
}
}
@function containWhenFlag($selector) {
$selector: selectorToString($selector);
@if str-index($selector, '.' + $state-prefix) {
@return true
} @else {
@return false
}
}
@function containPseudoClass($selector) {
$selector: selectorToString($selector);
@if str-index($selector, ':') {
@return true
} @else {
@return false
}
}
@function hitAllSpecialNestRule($selector) {
@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}
template/src/styles/mixins/mixins.scss 0 → 100644
View file @ dbae82a7
@import "function";
/* BEM
-------------------------- */
@mixin b($block) {
$B: $block !global;
.#{$B} {
@content;
}
}
@mixin e($element) {
$E: $element !global;
$selector: &;
$currentSelector: "";
@each $unit in $element {
$currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
}
@if hitAllSpecialNestRule($selector) {
@at-root {
#{$selector} {
#{$currentSelector} {
@content;
}
}
}
} @else {
@at-root {
#{$currentSelector} {
@content;
}
}
}
}
@mixin m($modifier) {
$selector: &;
$currentSelector: "";
@each $unit in $modifier {
$currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
}
@at-root {
#{$currentSelector} {
@content;
}
}
}
@mixin configurable-m($modifier, $E-flag: false) {
$selector: &;
$interpolation: '';
@if $E-flag {
$interpolation: $element-separator + $E-flag;
}
@at-root {
#{$selector} {
.#{$B+$interpolation+$modifier-separator+$modifier} {
@content;
}
}
}
}
@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
$modifierCombo: '';
@if $modifier {
$modifierCombo: $modifier-separator + $modifier;
}
@at-root {
#{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
@content
}
}
}
@mixin meb($modifier: false, $element: $E, $block: $B) {
$selector: &;
$modifierCombo: '';
@if $modifier {
$modifierCombo: $modifier-separator + $modifier;
}
@at-root {
#{$selector} {
.#{$block+$element-separator+$element+$modifierCombo} {
@content
}
}
}
}
@mixin when($state) {
@at-root {
&.#{$state-prefix + $state} {
@content;
}
}
}
@mixin extend-rule($name) {
@extend #{'%shared-'+$name};
}
@mixin share-rule($name) {
$rule-name: '%shared-'+$name;
@at-root #{$rule-name} {
@content
}
}
\ No newline at end of file
template/src/styles/mixins/utils.scss 0 → 100644
View file @ dbae82a7
@mixin utils-user-select($value) {
-moz-user-select: $value;
-webkit-user-select: $value;
-ms-user-select: $value;
}
@mixin utils-clearfix {
$selector: &;
@at-root {
#{$selector}::before,
#{$selector}::after {
display: table;
content: "";
}
#{$selector}::after {
clear: both
}
}
}
@mixin utils-vertical-center {
$selector: &;
@at-root {
#{$selector}::after {
display: inline-block;
content: "";
height: 100%;
vertical-align: middle
}
}
}
@mixin utils-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
\ No newline at end of file
template/src/styles/var.scss 0 → 100644
View file @ dbae82a7
// color var
$--color-white: #fff !default;
$--color-black: #000 !default;
$--color-primary: #15c7c7 !default;
$--color-success: #16db41 !default;
$--color-danger: #e93333 !default;
$--color-info: #909399 !default;
$--color-header: #4e6280 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
$--color-primary-weight-1: mix($--color-black, $--color-primary, 10%) !default; /* #283848 */
$--color-primary-weight-2: mix($--color-black, $--color-primary, 20%) !default; /* #233240 */
$--color-primary-weight-5: mix($--color-black, $--color-primary, 50%) !default; /* #161f28 */
$--color-text: #404c5a !default;
$--color-text-light: mix($--color-white, $--color-text, 20%) !default; /* #d5d9dd */
$--color-text-weight: mix($--color-black, $--color-text, 20%) !default; /* #a2a6aa */
$--color-text-weight-5: mix($--color-black, $--color-text, 50%) !default; /* #66686a */
$--color-text-white: $--color-white;
$--color-text-white-weight-1: mix($--color-black, $--color-text-white, 5%) !default;
$--color-line-light: #e2e9ee !default;
$--color-line-weight: #a6b1bb !default;
$--color-text-primary: #303133 !default;
$--color-text-regular: #606266 !default;
$--color-text-secondary: #909399 !default;
$--color-text-placeholder: #c0c4cc !default;
/* Border
-------------------------- */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-base: #dcdfe6 !default;
$--border-color-light: #e4e7ed !default;
$--border-color-lighter: #ebeef5 !default;
$--border-color-extra-light: #f2f6fc !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
$--border-radius-base: 4px !default;
$--border-radius-small: 2px !default;
$--border-radius-circle: 100% !default;
/* header */
$--header-height: 61px !default;
template/src/views/Header.vue 0 → 100644
View file @ dbae82a7
<template>
<header class="app-header">
<div class="logo">
<img class="logo-img" src="" alt="logo">
<h4>VUE Arcgis系统</h4>
</div>
</header>
</template>
<script>
export default {
name: 'AppHeader'
}
</script>
template/src/views/Home.vue 0 → 100644
View file @ dbae82a7
<template>
<div class="app-main">
<app-header></app-header>
<app-map class="app-map"></app-map>
</div>
</template>
<script>
import AppHeader from './Header'
import AppMap from '@/components/Map'
export default {
name: 'home',
components: {
AppHeader,
AppMap
}
}
</script>
template/tests/unit/.eslintrc.js 0 → 100644
View file @ dbae82a7
module.exports = {
env: {
mocha: true
}
}
template/tests/unit/example.spec.js 0 → 100644
View file @ dbae82a7
import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
template/vue.config.js 0 → 100644
View file @ dbae82a7
const path = require('path')
const webpack = require('webpack')
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/var.scss')
]
})
}
module.exports = {
publicPath: './',
assetsDir: '',
runtimeCompiler: true,
lintOnSave: 'error',
devServer: {
host: '0.0.0.0',
port: '8080'
},
productionSourceMap: false,
css: {
// extract: true
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
let configs = {}
configs.optimization = {
splitChunks: {
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // 只打包初始时依赖的第三方
},
elementUI: {
name: 'element-ui', // 单独将 elementUI 拆包
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
test: /[\\/]node_modules[\\/]element-ui[\\/]/
}/* ,
commons: {
name: 'chunk-comomns',
test: resolve('src/components'), // 可自定义拓展你的规则
minChunks: 2, // 最小共用次数
priority: 5,
reuseExistingChunk: true
} */
}
}
}
if (process.env.npm_config_report) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configs.plugins = [
new BundleAnalyzerPlugin()
]
}
return configs
}
},
chainWebpack: config => {
// 修复HMR
// config.resolve.symlinks(true)
config.plugin('ignore')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
}
}
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