diff --git a/README.md b/README.md index 7758dc6..e2b5201 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,61 @@ +<<<<<<< HEAD +# 城管基础资源子系统前端 + +> 城管基础资源子系统WEB前端，系统管理模块基于基础权限管理的基础框架 ，整个系统模块包括资源管理、角色管理、组织结构管理、用户管理、日志管理。 + +> 使用leaflet加载arcgis地图 + + +## 安装前提 + +1. 安装nodejs + +去[nodejs官网](https://nodejs.org/zh-cn/)下载安装包 + + +安装完成之后，在cmd中检查Node.js版本，输出版本号则表示安装成功 +``` +node --version +``` + +## 安装步骤 + +```bash +# 克隆项目 +git clone http://192.168.0.203:8080/gitbucket/root/smartwell_front + +# 安装依赖 +npm install + +# 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# Serve with hot reload at localhost:9528 +npm run dev + +# Build for production with minification +npm run build + +# Build for production and view the bundle analyzer report +npm run build --report +``` + +## 界面 + +![demo](http://192.168.0.203:8080/gitbucket/root/BaseFrontEnd/tree/master/static/images/demo.gif) + +## 浏览器支持情况 + +主流浏览器和IE 10+. + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| --------- | --------- | --------- | --------- | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions + +## License + +Copyright (c) 2019-present WangXiaoying +======= smartcity_map_front =============== @@ -10,3 +68,4 @@ npm install esri-leaflet-renderers npm install leaflet.pm +>>>>>>> 62e2cbd45b21f3b3de9dba282151fdf455d08506 diff --git a/README.md b/README.md index 7758dc6..e2b5201 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,61 @@ +<<<<<<< HEAD +# 城管基础资源子系统前端 + +> 城管基础资源子系统WEB前端，系统管理模块基于基础权限管理的基础框架 ，整个系统模块包括资源管理、角色管理、组织结构管理、用户管理、日志管理。 + +> 使用leaflet加载arcgis地图 + + +## 安装前提 + +1. 安装nodejs + +去[nodejs官网](https://nodejs.org/zh-cn/)下载安装包 + + +安装完成之后，在cmd中检查Node.js版本，输出版本号则表示安装成功 +``` +node --version +``` + +## 安装步骤 + +```bash +# 克隆项目 +git clone http://192.168.0.203:8080/gitbucket/root/smartwell_front + +# 安装依赖 +npm install + +# 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# Serve with hot reload at localhost:9528 +npm run dev + +# Build for production with minification +npm run build + +# Build for production and view the bundle analyzer report +npm run build --report +``` + +## 界面 + +![demo](http://192.168.0.203:8080/gitbucket/root/BaseFrontEnd/tree/master/static/images/demo.gif) + +## 浏览器支持情况 + +主流浏览器和IE 10+. + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| --------- | --------- | --------- | --------- | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions + +## License + +Copyright (c) 2019-present WangXiaoying +======= smartcity_map_front =============== @@ -10,3 +68,4 @@ npm install esri-leaflet-renderers npm install leaflet.pm +>>>>>>> 62e2cbd45b21f3b3de9dba282151fdf455d08506 diff --git a/package.json b/package.json index d3b9d3b..c7871ba 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,10 @@ "babel-polyfill": "^6.26.0", "echarts": "^4.2.1", "element-ui": "2.13.0", + "esri": "0.0.1-security", "esri-leaflet": "^3.0.1", "esri-leaflet-renderers": "^2.1.2", + "esri-loader": "^3.0.0", "event-source-polyfill": "^1.0.5", "js-cookie": "2.2.0", "jsencrypt": "^3.0.0-rc.1", diff --git a/README.md b/README.md index 7758dc6..e2b5201 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,61 @@ +<<<<<<< HEAD +# 城管基础资源子系统前端 + +> 城管基础资源子系统WEB前端，系统管理模块基于基础权限管理的基础框架 ，整个系统模块包括资源管理、角色管理、组织结构管理、用户管理、日志管理。 + +> 使用leaflet加载arcgis地图 + + +## 安装前提 + +1. 安装nodejs + +去[nodejs官网](https://nodejs.org/zh-cn/)下载安装包 + + +安装完成之后，在cmd中检查Node.js版本，输出版本号则表示安装成功 +``` +node --version +``` + +## 安装步骤 + +```bash +# 克隆项目 +git clone http://192.168.0.203:8080/gitbucket/root/smartwell_front + +# 安装依赖 +npm install + +# 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# Serve with hot reload at localhost:9528 +npm run dev + +# Build for production with minification +npm run build + +# Build for production and view the bundle analyzer report +npm run build --report +``` + +## 界面 + +![demo](http://192.168.0.203:8080/gitbucket/root/BaseFrontEnd/tree/master/static/images/demo.gif) + +## 浏览器支持情况 + +主流浏览器和IE 10+. + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| --------- | --------- | --------- | --------- | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions + +## License + +Copyright (c) 2019-present WangXiaoying +======= smartcity_map_front =============== @@ -10,3 +68,4 @@ npm install esri-leaflet-renderers npm install leaflet.pm +>>>>>>> 62e2cbd45b21f3b3de9dba282151fdf455d08506 diff --git a/package.json b/package.json index d3b9d3b..c7871ba 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,10 @@ "babel-polyfill": "^6.26.0", "echarts": "^4.2.1", "element-ui": "2.13.0", + "esri": "0.0.1-security", "esri-leaflet": "^3.0.1", "esri-leaflet-renderers": "^2.1.2", + "esri-loader": "^3.0.0", "event-source-polyfill": "^1.0.5", "js-cookie": "2.2.0", "jsencrypt": "^3.0.0-rc.1", diff --git a/src/router/modules/map.js b/src/router/modules/map.js index 3c5b429..3c6a22c 100644 --- a/src/router/modules/map.js +++ b/src/router/modules/map.js @@ -59,7 +59,7 @@ path: '/mapSearch', name: 'MapSearch', component: () => import('@/views/overview/mapSearch'), - meta: { title: '要素查询', icon: '', permission: ['/mapSearch'], keepAlive: true } + meta: { title: '地图查询', icon: '', permission: ['/mapSearch'], keepAlive: true } } ] }, { diff --git a/README.md b/README.md index 7758dc6..e2b5201 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,61 @@ +<<<<<<< HEAD +# 城管基础资源子系统前端 + +> 城管基础资源子系统WEB前端，系统管理模块基于基础权限管理的基础框架 ，整个系统模块包括资源管理、角色管理、组织结构管理、用户管理、日志管理。 + +> 使用leaflet加载arcgis地图 + + +## 安装前提 + +1. 安装nodejs + +去[nodejs官网](https://nodejs.org/zh-cn/)下载安装包 + + +安装完成之后，在cmd中检查Node.js版本，输出版本号则表示安装成功 +``` +node --version +``` + +## 安装步骤 + +```bash +# 克隆项目 +git clone http://192.168.0.203:8080/gitbucket/root/smartwell_front + +# 安装依赖 +npm install + +# 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# Serve with hot reload at localhost:9528 +npm run dev + +# Build for production with minification +npm run build + +# Build for production and view the bundle analyzer report +npm run build --report +``` + +## 界面 + +![demo](http://192.168.0.203:8080/gitbucket/root/BaseFrontEnd/tree/master/static/images/demo.gif) + +## 浏览器支持情况 + +主流浏览器和IE 10+. + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| --------- | --------- | --------- | --------- | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions + +## License + +Copyright (c) 2019-present WangXiaoying +======= smartcity_map_front =============== @@ -10,3 +68,4 @@ npm install esri-leaflet-renderers npm install leaflet.pm +>>>>>>> 62e2cbd45b21f3b3de9dba282151fdf455d08506 diff --git a/package.json b/package.json index d3b9d3b..c7871ba 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,10 @@ "babel-polyfill": "^6.26.0", "echarts": "^4.2.1", "element-ui": "2.13.0", + "esri": "0.0.1-security", "esri-leaflet": "^3.0.1", "esri-leaflet-renderers": "^2.1.2", + "esri-loader": "^3.0.0", "event-source-polyfill": "^1.0.5", "js-cookie": "2.2.0", "jsencrypt": "^3.0.0-rc.1", diff --git a/src/router/modules/map.js b/src/router/modules/map.js index 3c5b429..3c6a22c 100644 --- a/src/router/modules/map.js +++ b/src/router/modules/map.js @@ -59,7 +59,7 @@ path: '/mapSearch', name: 'MapSearch', component: () => import('@/views/overview/mapSearch'), - meta: { title: '要素查询', icon: '', permission: ['/mapSearch'], keepAlive: true } + meta: { title: '地图查询', icon: '', permission: ['/mapSearch'], keepAlive: true } } ] }, { diff --git a/src/views/overview/mapSearch.vue b/src/views/overview/mapSearch.vue index b051fa1..7f9da84 100644 --- a/src/views/overview/mapSearch.vue +++ b/src/views/overview/mapSearch.vue @@ -18,8 +18,8 @@ 图层 - - {{ parts }} + + {{ parts }}
@@ -38,19 +38,20 @@
{{ scope.$index + 1 }}
- 名称：{{ scope.row.小类名称 }} - 编码：{{ scope.row.编码 }} - 地址：{{ scope.row.编码 }} + 名称：{{ scope.row.properties.小类名称 }} + 编码：{{ scope.row.properties.编码 }} + 地址：{{ scope.row.properties.OBJECTID }} @@ -68,9 +69,9 @@ const sewageHole = [37] const video = [35] const lamp = [1, 3, 4, 22, 25, 34] -const toilet = [12, 13] +const toilet = [12, 13, 41] const garbage = [24] -const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] +const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40, 42, 43, 44, 45] export default { name: 'MapSearch', data() { @@ -80,61 +81,27 @@ offset: 1, btnList: false, listLoading: false, // 加载动画 - TianDiTu: { - Normal: { - Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Satellite: { - Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Terrain: { - Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] - }, + showlist: [], // 列表展示项 + checkboxloading: false, + list: [], // url列表 + searchlist: [], + layerlist: [], map: null, showtable: true, isShow: false, partsOptions: ['网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'], selectParts: ['底图', '网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'], - showlist: [], - searchlist: [ - { 编码: 11111, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 22222, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 3333, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 4444, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 55555, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 666, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 777, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 888, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 999, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 11111, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 2222, 小类名称: '雨水井盖', 地址: '海淀区' }], listQuery: { offset: 1, limit: 15 }, // 筛选条件 - list: [], maps: [], parts: [], baseUrl: '', partsUrl: '', mapUrl: '', multipleSelection: [], // 多选选中项 - iconlist: [], - baselayer: [], - caselist: [], // 路灯（map） - statisticNum: { - work: 0, - todayCase: 0, - allCase: 0, - merchant: 0, - parts: 0 - }, - status: { - register: 0, - dispatch: 0, - disposal: 0, - disposaling: 0 - } + baselayer: [] } }, destroyed() { @@ -151,10 +118,77 @@ this.btnList = false } }, + addPointsToMap(results) { + if (!results.hasOwnProperty('features') || + results.features.length === 0) { + return // no features, something went wrong + } + var features = results.features + console.log(features) + var feature + var items = [] + for (var i = 0; i < features.length; i++) { + var symbol11 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255, 0.35]), 1), new dojo.Color([125, 125, 125, 0.35])) + feature = features[i] + feature.setSymbol(symbol11) + this.map.graphics.add(feature) + items.push(feature.attributes) + } + this.searchlist = items + }, search() { - this.offset = 1 - this.showlist = this.searchlist.slice(0, 5) - this.isShow = true + var that = this + this.searchlist = [] + for (let i = 0; i < this.layerlist.length; i++) { + // var southWest = L.latLng(45.51, -122.70) + // var northEast = L.latLng(45.52, -122.64) + // var bounds = L.latLngBounds(southWest, northEast) + var str = ['编码', '小类名称', '大类名称'] + var query = esri.query({ + url: this.baseUrl + this.partsUrl + '/' + this.layerlist[i].toString() + }) + if (this.keyword === '') { + query.where('1=1') + query.run(function(error, featureCollection, response) { + if (error) { + console.log(error) + return + } + for (let j = featureCollection.features.length - 1; j >= 0; j--) { + that.searchlist.push(featureCollection.features[j]) + } + if (i === that.layerlist.length - 1) { + that.offset = 1 + that.showlist = that.searchlist.slice(0, 5) + that.isShow = true + } + console.log(featureCollection.features) + }) + } else { + for (let j = 0; j < str.length; j++) { + query.where(str[j] + " like '%" + this.keyword + "%'") + query.run(function(error, featureCollection, response) { + if (error) { + console.log(error) + return + } + for (let k = featureCollection.features.length - 1; k >= 0; k--) { + that.searchlist.push(featureCollection.features[k]) + } + console.log(featureCollection.features) + if (i === that.layerlist.length - 1) { + that.offset = 1 + that.showlist = that.searchlist.slice(0, 5) + that.isShow = true + for (let num = 0; num < that.showlist.length; num++) { + + } + } + }) + } + } + // query.within(bounds) + } }, drawDelete() { if (this.drawLayer) { @@ -193,7 +227,7 @@ } }, partsChange(val, item) { - console.log(val, item.target.defaultValue) + this.checkboxloading = true var selectItem switch (item.target.defaultValue) { case '视频监控点': @@ -224,27 +258,31 @@ if (!val) { // 隐藏底图 for (let i = 0; i < selectItem.length; i++) { this.map.removeLayer(this.parts[selectItem[i] - 1]) + for (let j = 0; j < this.layerlist.length; j++) { + if (this.layerlist[j] === selectItem[i]) { + this.layerlist.splice(j, 1) + } + } } - } else { + } else if (val) { for (let i = 0; i < selectItem.length; i++) { this.map.addLayer(this.parts[selectItem[i] - 1]) + var res = -1 + for (let j = 0; j < this.layerlist.length; j++) { + if (this.layerlist[j] === selectItem[i]) { + res = j + } + } + if (res === -1) { + this.layerlist.push(selectItem[i]) + } } } + this.checkboxloading = false }, tableclick() { this.showtable = !this.showtable }, - removemarkers() { - for (var i = 0; i < this.iconlist.length; i++) { - this.map.removeLayer(this.iconlist[i]) - } - var base = this.baselayer - this.map.eachLayer(function(layer) { - if (layer !== base[0] && layer !== base[1]) { - layer.remove() - } - }) - }, setZoom(points) { if (points.length > 0) { var maxLng = points[0][1] @@ -293,14 +331,6 @@ map.doubleClickZoom.disable() this.map = map // data上需要挂载 window.map = map - // this.baselayer.push(L.tileLayer( - // 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - // { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] } - // ).addTo(map)) - // this.baselayer.push(L.tileLayer( - // 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - // { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] } - // ).addTo(map)) var that = this this.map.on('pm:create', e => { if (that.drawLayer) { @@ -325,18 +355,18 @@ this.maps.push(esri.featureLayer(item).addTo(map)) } // 部件 - for (i = 1; i <= 40; i++) { - item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18 } + for (i = 1; i <= 45; i++) { + this.layerlist.push(i) + item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 10 } if (i === 15) { - item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18, + item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 10, style: function(feature) { return { color: '#ff0000', opacity: 0.75, weight: 5 } } } } var layer = esri.featureLayer(item).addTo(map) layer.on('click', function(e) { - console.log(e) - console.log(e.layer.feature.properties) + // console.log(e.layer.feature.properties) var str = '
' + '
' + '
' + e.layer.feature.properties.小类名称 + '
' + @@ -355,7 +385,6 @@ this.map.setZoom(15) }, handleCurrentChange(val) { - console.log(val, this.searchlist) this.offset = val var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val this.showlist = this.searchlist.slice(5 * (val - 1), num) @@ -378,7 +407,7 @@ $tableTitleHeight:35px; .leaflet_container{ width: 100%; - height: 85vh; + height: 84vh; } .search-total{ background-color: white; width: 300px;height: 35px; diff --git a/README.md b/README.md index 7758dc6..e2b5201 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,61 @@ +<<<<<<< HEAD +# 城管基础资源子系统前端 + +> 城管基础资源子系统WEB前端，系统管理模块基于基础权限管理的基础框架 ，整个系统模块包括资源管理、角色管理、组织结构管理、用户管理、日志管理。 + +> 使用leaflet加载arcgis地图 + + +## 安装前提 + +1. 安装nodejs + +去[nodejs官网](https://nodejs.org/zh-cn/)下载安装包 + + +安装完成之后，在cmd中检查Node.js版本，输出版本号则表示安装成功 +``` +node --version +``` + +## 安装步骤 + +```bash +# 克隆项目 +git clone http://192.168.0.203:8080/gitbucket/root/smartwell_front + +# 安装依赖 +npm install + +# 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# Serve with hot reload at localhost:9528 +npm run dev + +# Build for production with minification +npm run build + +# Build for production and view the bundle analyzer report +npm run build --report +``` + +## 界面 + +![demo](http://192.168.0.203:8080/gitbucket/root/BaseFrontEnd/tree/master/static/images/demo.gif) + +## 浏览器支持情况 + +主流浏览器和IE 10+. + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| --------- | --------- | --------- | --------- | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions + +## License + +Copyright (c) 2019-present WangXiaoying +======= smartcity_map_front =============== @@ -10,3 +68,4 @@ npm install esri-leaflet-renderers npm install leaflet.pm +>>>>>>> 62e2cbd45b21f3b3de9dba282151fdf455d08506 diff --git a/package.json b/package.json index d3b9d3b..c7871ba 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,10 @@ "babel-polyfill": "^6.26.0", "echarts": "^4.2.1", "element-ui": "2.13.0", + "esri": "0.0.1-security", "esri-leaflet": "^3.0.1", "esri-leaflet-renderers": "^2.1.2", + "esri-loader": "^3.0.0", "event-source-polyfill": "^1.0.5", "js-cookie": "2.2.0", "jsencrypt": "^3.0.0-rc.1", diff --git a/src/router/modules/map.js b/src/router/modules/map.js index 3c5b429..3c6a22c 100644 --- a/src/router/modules/map.js +++ b/src/router/modules/map.js @@ -59,7 +59,7 @@ path: '/mapSearch', name: 'MapSearch', component: () => import('@/views/overview/mapSearch'), - meta: { title: '要素查询', icon: '', permission: ['/mapSearch'], keepAlive: true } + meta: { title: '地图查询', icon: '', permission: ['/mapSearch'], keepAlive: true } } ] }, { diff --git a/src/views/overview/mapSearch.vue b/src/views/overview/mapSearch.vue index b051fa1..7f9da84 100644 --- a/src/views/overview/mapSearch.vue +++ b/src/views/overview/mapSearch.vue @@ -18,8 +18,8 @@ 图层 - - {{ parts }} + + {{ parts }}
@@ -38,19 +38,20 @@
{{ scope.$index + 1 }}
- 名称：{{ scope.row.小类名称 }} - 编码：{{ scope.row.编码 }} - 地址：{{ scope.row.编码 }} + 名称：{{ scope.row.properties.小类名称 }} + 编码：{{ scope.row.properties.编码 }} + 地址：{{ scope.row.properties.OBJECTID }} @@ -68,9 +69,9 @@ const sewageHole = [37] const video = [35] const lamp = [1, 3, 4, 22, 25, 34] -const toilet = [12, 13] +const toilet = [12, 13, 41] const garbage = [24] -const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] +const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40, 42, 43, 44, 45] export default { name: 'MapSearch', data() { @@ -80,61 +81,27 @@ offset: 1, btnList: false, listLoading: false, // 加载动画 - TianDiTu: { - Normal: { - Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Satellite: { - Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Terrain: { - Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] - }, + showlist: [], // 列表展示项 + checkboxloading: false, + list: [], // url列表 + searchlist: [], + layerlist: [], map: null, showtable: true, isShow: false, partsOptions: ['网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'], selectParts: ['底图', '网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'], - showlist: [], - searchlist: [ - { 编码: 11111, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 22222, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 3333, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 4444, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 55555, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 666, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 777, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 888, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 999, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 11111, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 2222, 小类名称: '雨水井盖', 地址: '海淀区' }], listQuery: { offset: 1, limit: 15 }, // 筛选条件 - list: [], maps: [], parts: [], baseUrl: '', partsUrl: '', mapUrl: '', multipleSelection: [], // 多选选中项 - iconlist: [], - baselayer: [], - caselist: [], // 路灯（map） - statisticNum: { - work: 0, - todayCase: 0, - allCase: 0, - merchant: 0, - parts: 0 - }, - status: { - register: 0, - dispatch: 0, - disposal: 0, - disposaling: 0 - } + baselayer: [] } }, destroyed() { @@ -151,10 +118,77 @@ this.btnList = false } }, + addPointsToMap(results) { + if (!results.hasOwnProperty('features') || + results.features.length === 0) { + return // no features, something went wrong + } + var features = results.features + console.log(features) + var feature + var items = [] + for (var i = 0; i < features.length; i++) { + var symbol11 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255, 0.35]), 1), new dojo.Color([125, 125, 125, 0.35])) + feature = features[i] + feature.setSymbol(symbol11) + this.map.graphics.add(feature) + items.push(feature.attributes) + } + this.searchlist = items + }, search() { - this.offset = 1 - this.showlist = this.searchlist.slice(0, 5) - this.isShow = true + var that = this + this.searchlist = [] + for (let i = 0; i < this.layerlist.length; i++) { + // var southWest = L.latLng(45.51, -122.70) + // var northEast = L.latLng(45.52, -122.64) + // var bounds = L.latLngBounds(southWest, northEast) + var str = ['编码', '小类名称', '大类名称'] + var query = esri.query({ + url: this.baseUrl + this.partsUrl + '/' + this.layerlist[i].toString() + }) + if (this.keyword === '') { + query.where('1=1') + query.run(function(error, featureCollection, response) { + if (error) { + console.log(error) + return + } + for (let j = featureCollection.features.length - 1; j >= 0; j--) { + that.searchlist.push(featureCollection.features[j]) + } + if (i === that.layerlist.length - 1) { + that.offset = 1 + that.showlist = that.searchlist.slice(0, 5) + that.isShow = true + } + console.log(featureCollection.features) + }) + } else { + for (let j = 0; j < str.length; j++) { + query.where(str[j] + " like '%" + this.keyword + "%'") + query.run(function(error, featureCollection, response) { + if (error) { + console.log(error) + return + } + for (let k = featureCollection.features.length - 1; k >= 0; k--) { + that.searchlist.push(featureCollection.features[k]) + } + console.log(featureCollection.features) + if (i === that.layerlist.length - 1) { + that.offset = 1 + that.showlist = that.searchlist.slice(0, 5) + that.isShow = true + for (let num = 0; num < that.showlist.length; num++) { + + } + } + }) + } + } + // query.within(bounds) + } }, drawDelete() { if (this.drawLayer) { @@ -193,7 +227,7 @@ } }, partsChange(val, item) { - console.log(val, item.target.defaultValue) + this.checkboxloading = true var selectItem switch (item.target.defaultValue) { case '视频监控点': @@ -224,27 +258,31 @@ if (!val) { // 隐藏底图 for (let i = 0; i < selectItem.length; i++) { this.map.removeLayer(this.parts[selectItem[i] - 1]) + for (let j = 0; j < this.layerlist.length; j++) { + if (this.layerlist[j] === selectItem[i]) { + this.layerlist.splice(j, 1) + } + } } - } else { + } else if (val) { for (let i = 0; i < selectItem.length; i++) { this.map.addLayer(this.parts[selectItem[i] - 1]) + var res = -1 + for (let j = 0; j < this.layerlist.length; j++) { + if (this.layerlist[j] === selectItem[i]) { + res = j + } + } + if (res === -1) { + this.layerlist.push(selectItem[i]) + } } } + this.checkboxloading = false }, tableclick() { this.showtable = !this.showtable }, - removemarkers() { - for (var i = 0; i < this.iconlist.length; i++) { - this.map.removeLayer(this.iconlist[i]) - } - var base = this.baselayer - this.map.eachLayer(function(layer) { - if (layer !== base[0] && layer !== base[1]) { - layer.remove() - } - }) - }, setZoom(points) { if (points.length > 0) { var maxLng = points[0][1] @@ -293,14 +331,6 @@ map.doubleClickZoom.disable() this.map = map // data上需要挂载 window.map = map - // this.baselayer.push(L.tileLayer( - // 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - // { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] } - // ).addTo(map)) - // this.baselayer.push(L.tileLayer( - // 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - // { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] } - // ).addTo(map)) var that = this this.map.on('pm:create', e => { if (that.drawLayer) { @@ -325,18 +355,18 @@ this.maps.push(esri.featureLayer(item).addTo(map)) } // 部件 - for (i = 1; i <= 40; i++) { - item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18 } + for (i = 1; i <= 45; i++) { + this.layerlist.push(i) + item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 10 } if (i === 15) { - item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18, + item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 10, style: function(feature) { return { color: '#ff0000', opacity: 0.75, weight: 5 } } } } var layer = esri.featureLayer(item).addTo(map) layer.on('click', function(e) { - console.log(e) - console.log(e.layer.feature.properties) + // console.log(e.layer.feature.properties) var str = '
' + '
' + '
' + e.layer.feature.properties.小类名称 + '
' + @@ -355,7 +385,6 @@ this.map.setZoom(15) }, handleCurrentChange(val) { - console.log(val, this.searchlist) this.offset = val var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val this.showlist = this.searchlist.slice(5 * (val - 1), num) @@ -378,7 +407,7 @@ $tableTitleHeight:35px; .leaflet_container{ width: 100%; - height: 85vh; + height: 84vh; } .search-total{ background-color: white; width: 300px;height: 35px; diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue index 7af6e16..d30b509 100644 --- a/src/views/overview/overview.vue +++ b/src/views/overview/overview.vue @@ -19,9 +19,9 @@ const sewageHole = [37] const video = [35] const lamp = [1, 3, 4, 22, 25, 34] -const toilet = [12, 13] +const toilet = [12, 13, 41] const garbage = [24] -const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] +const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40, 42, 43, 44, 45] export default { name: 'Overview', data() { @@ -57,22 +57,7 @@ partsUrl: '', mapUrl: '', multipleSelection: [], // 多选选中项 - iconlist: [], - baselayer: [], - caselist: [], // 路灯（map） - statisticNum: { - work: 0, - todayCase: 0, - allCase: 0, - merchant: 0, - parts: 0 - }, - status: { - register: 0, - dispatch: 0, - disposal: 0, - disposaling: 0 - } + baselayer: [] } }, mounted() { @@ -132,17 +117,6 @@ tableclick() { this.showtable = !this.showtable }, - removemarkers() { - for (var i = 0; i < this.iconlist.length; i++) { - this.map.removeLayer(this.iconlist[i]) - } - var base = this.baselayer - this.map.eachLayer(function(layer) { - if (layer !== base[0] && layer !== base[1]) { - layer.remove() - } - }) - }, setZoom(points) { if (points.length > 0) { var maxLng = points[0][1] @@ -217,7 +191,7 @@ this.maps.push(esri.featureLayer(item).addTo(map)) } // 部件 - for (i = 1; i <= 40; i++) { + for (i = 1; i <= 45; i++) { item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18 } if (i === 15) { item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18, diff --git a/README.md b/README.md index 7758dc6..e2b5201 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,61 @@ +<<<<<<< HEAD +# 城管基础资源子系统前端 + +> 城管基础资源子系统WEB前端，系统管理模块基于基础权限管理的基础框架 ，整个系统模块包括资源管理、角色管理、组织结构管理、用户管理、日志管理。 + +> 使用leaflet加载arcgis地图 + + +## 安装前提 + +1. 安装nodejs + +去[nodejs官网](https://nodejs.org/zh-cn/)下载安装包 + + +安装完成之后，在cmd中检查Node.js版本，输出版本号则表示安装成功 +``` +node --version +``` + +## 安装步骤 + +```bash +# 克隆项目 +git clone http://192.168.0.203:8080/gitbucket/root/smartwell_front + +# 安装依赖 +npm install + +# 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# Serve with hot reload at localhost:9528 +npm run dev + +# Build for production with minification +npm run build + +# Build for production and view the bundle analyzer report +npm run build --report +``` + +## 界面 + +![demo](http://192.168.0.203:8080/gitbucket/root/BaseFrontEnd/tree/master/static/images/demo.gif) + +## 浏览器支持情况 + +主流浏览器和IE 10+. + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| --------- | --------- | --------- | --------- | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions + +## License + +Copyright (c) 2019-present WangXiaoying +======= smartcity_map_front =============== @@ -10,3 +68,4 @@ npm install esri-leaflet-renderers npm install leaflet.pm +>>>>>>> 62e2cbd45b21f3b3de9dba282151fdf455d08506 diff --git a/package.json b/package.json index d3b9d3b..c7871ba 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,10 @@ "babel-polyfill": "^6.26.0", "echarts": "^4.2.1", "element-ui": "2.13.0", + "esri": "0.0.1-security", "esri-leaflet": "^3.0.1", "esri-leaflet-renderers": "^2.1.2", + "esri-loader": "^3.0.0", "event-source-polyfill": "^1.0.5", "js-cookie": "2.2.0", "jsencrypt": "^3.0.0-rc.1", diff --git a/src/router/modules/map.js b/src/router/modules/map.js index 3c5b429..3c6a22c 100644 --- a/src/router/modules/map.js +++ b/src/router/modules/map.js @@ -59,7 +59,7 @@ path: '/mapSearch', name: 'MapSearch', component: () => import('@/views/overview/mapSearch'), - meta: { title: '要素查询', icon: '', permission: ['/mapSearch'], keepAlive: true } + meta: { title: '地图查询', icon: '', permission: ['/mapSearch'], keepAlive: true } } ] }, { diff --git a/src/views/overview/mapSearch.vue b/src/views/overview/mapSearch.vue index b051fa1..7f9da84 100644 --- a/src/views/overview/mapSearch.vue +++ b/src/views/overview/mapSearch.vue @@ -18,8 +18,8 @@ 图层 - - {{ parts }} + + {{ parts }}
@@ -38,19 +38,20 @@
{{ scope.$index + 1 }}
- 名称：{{ scope.row.小类名称 }} - 编码：{{ scope.row.编码 }} - 地址：{{ scope.row.编码 }} + 名称：{{ scope.row.properties.小类名称 }} + 编码：{{ scope.row.properties.编码 }} + 地址：{{ scope.row.properties.OBJECTID }} @@ -68,9 +69,9 @@ const sewageHole = [37] const video = [35] const lamp = [1, 3, 4, 22, 25, 34] -const toilet = [12, 13] +const toilet = [12, 13, 41] const garbage = [24] -const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] +const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40, 42, 43, 44, 45] export default { name: 'MapSearch', data() { @@ -80,61 +81,27 @@ offset: 1, btnList: false, listLoading: false, // 加载动画 - TianDiTu: { - Normal: { - Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Satellite: { - Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Terrain: { - Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8' - }, - Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] - }, + showlist: [], // 列表展示项 + checkboxloading: false, + list: [], // url列表 + searchlist: [], + layerlist: [], map: null, showtable: true, isShow: false, partsOptions: ['网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'], selectParts: ['底图', '网格', '商户', '视频监控点', '路灯杆和灯箱', '雨水井盖', '污水井盖', '公共厕所', '垃圾箱', '其他部件'], - showlist: [], - searchlist: [ - { 编码: 11111, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 22222, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 3333, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 4444, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 55555, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 666, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 777, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 888, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 999, 小类名称: '视频监控点', 地址: '江西省福州市' }, { 编码: 11111, 小类名称: '视频监控点', 地址: '江西省福州市' }, - { 编码: 2222, 小类名称: '雨水井盖', 地址: '海淀区' }], listQuery: { offset: 1, limit: 15 }, // 筛选条件 - list: [], maps: [], parts: [], baseUrl: '', partsUrl: '', mapUrl: '', multipleSelection: [], // 多选选中项 - iconlist: [], - baselayer: [], - caselist: [], // 路灯（map） - statisticNum: { - work: 0, - todayCase: 0, - allCase: 0, - merchant: 0, - parts: 0 - }, - status: { - register: 0, - dispatch: 0, - disposal: 0, - disposaling: 0 - } + baselayer: [] } }, destroyed() { @@ -151,10 +118,77 @@ this.btnList = false } }, + addPointsToMap(results) { + if (!results.hasOwnProperty('features') || + results.features.length === 0) { + return // no features, something went wrong + } + var features = results.features + console.log(features) + var feature + var items = [] + for (var i = 0; i < features.length; i++) { + var symbol11 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255, 0.35]), 1), new dojo.Color([125, 125, 125, 0.35])) + feature = features[i] + feature.setSymbol(symbol11) + this.map.graphics.add(feature) + items.push(feature.attributes) + } + this.searchlist = items + }, search() { - this.offset = 1 - this.showlist = this.searchlist.slice(0, 5) - this.isShow = true + var that = this + this.searchlist = [] + for (let i = 0; i < this.layerlist.length; i++) { + // var southWest = L.latLng(45.51, -122.70) + // var northEast = L.latLng(45.52, -122.64) + // var bounds = L.latLngBounds(southWest, northEast) + var str = ['编码', '小类名称', '大类名称'] + var query = esri.query({ + url: this.baseUrl + this.partsUrl + '/' + this.layerlist[i].toString() + }) + if (this.keyword === '') { + query.where('1=1') + query.run(function(error, featureCollection, response) { + if (error) { + console.log(error) + return + } + for (let j = featureCollection.features.length - 1; j >= 0; j--) { + that.searchlist.push(featureCollection.features[j]) + } + if (i === that.layerlist.length - 1) { + that.offset = 1 + that.showlist = that.searchlist.slice(0, 5) + that.isShow = true + } + console.log(featureCollection.features) + }) + } else { + for (let j = 0; j < str.length; j++) { + query.where(str[j] + " like '%" + this.keyword + "%'") + query.run(function(error, featureCollection, response) { + if (error) { + console.log(error) + return + } + for (let k = featureCollection.features.length - 1; k >= 0; k--) { + that.searchlist.push(featureCollection.features[k]) + } + console.log(featureCollection.features) + if (i === that.layerlist.length - 1) { + that.offset = 1 + that.showlist = that.searchlist.slice(0, 5) + that.isShow = true + for (let num = 0; num < that.showlist.length; num++) { + + } + } + }) + } + } + // query.within(bounds) + } }, drawDelete() { if (this.drawLayer) { @@ -193,7 +227,7 @@ } }, partsChange(val, item) { - console.log(val, item.target.defaultValue) + this.checkboxloading = true var selectItem switch (item.target.defaultValue) { case '视频监控点': @@ -224,27 +258,31 @@ if (!val) { // 隐藏底图 for (let i = 0; i < selectItem.length; i++) { this.map.removeLayer(this.parts[selectItem[i] - 1]) + for (let j = 0; j < this.layerlist.length; j++) { + if (this.layerlist[j] === selectItem[i]) { + this.layerlist.splice(j, 1) + } + } } - } else { + } else if (val) { for (let i = 0; i < selectItem.length; i++) { this.map.addLayer(this.parts[selectItem[i] - 1]) + var res = -1 + for (let j = 0; j < this.layerlist.length; j++) { + if (this.layerlist[j] === selectItem[i]) { + res = j + } + } + if (res === -1) { + this.layerlist.push(selectItem[i]) + } } } + this.checkboxloading = false }, tableclick() { this.showtable = !this.showtable }, - removemarkers() { - for (var i = 0; i < this.iconlist.length; i++) { - this.map.removeLayer(this.iconlist[i]) - } - var base = this.baselayer - this.map.eachLayer(function(layer) { - if (layer !== base[0] && layer !== base[1]) { - layer.remove() - } - }) - }, setZoom(points) { if (points.length > 0) { var maxLng = points[0][1] @@ -293,14 +331,6 @@ map.doubleClickZoom.disable() this.map = map // data上需要挂载 window.map = map - // this.baselayer.push(L.tileLayer( - // 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - // { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] } - // ).addTo(map)) - // this.baselayer.push(L.tileLayer( - // 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8', - // { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] } - // ).addTo(map)) var that = this this.map.on('pm:create', e => { if (that.drawLayer) { @@ -325,18 +355,18 @@ this.maps.push(esri.featureLayer(item).addTo(map)) } // 部件 - for (i = 1; i <= 40; i++) { - item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18 } + for (i = 1; i <= 45; i++) { + this.layerlist.push(i) + item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 10 } if (i === 15) { - item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18, + item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 10, style: function(feature) { return { color: '#ff0000', opacity: 0.75, weight: 5 } } } } var layer = esri.featureLayer(item).addTo(map) layer.on('click', function(e) { - console.log(e) - console.log(e.layer.feature.properties) + // console.log(e.layer.feature.properties) var str = '
' + '
' + '
' + e.layer.feature.properties.小类名称 + '
' + @@ -355,7 +385,6 @@ this.map.setZoom(15) }, handleCurrentChange(val) { - console.log(val, this.searchlist) this.offset = val var num = 5 * val >= this.searchlist.length ? this.searchlist.length : 5 * val this.showlist = this.searchlist.slice(5 * (val - 1), num) @@ -378,7 +407,7 @@ $tableTitleHeight:35px; .leaflet_container{ width: 100%; - height: 85vh; + height: 84vh; } .search-total{ background-color: white; width: 300px;height: 35px; diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue index 7af6e16..d30b509 100644 --- a/src/views/overview/overview.vue +++ b/src/views/overview/overview.vue @@ -19,9 +19,9 @@ const sewageHole = [37] const video = [35] const lamp = [1, 3, 4, 22, 25, 34] -const toilet = [12, 13] +const toilet = [12, 13, 41] const garbage = [24] -const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] +const othersParts = [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40, 42, 43, 44, 45] export default { name: 'Overview', data() { @@ -57,22 +57,7 @@ partsUrl: '', mapUrl: '', multipleSelection: [], // 多选选中项 - iconlist: [], - baselayer: [], - caselist: [], // 路灯（map） - statisticNum: { - work: 0, - todayCase: 0, - allCase: 0, - merchant: 0, - parts: 0 - }, - status: { - register: 0, - dispatch: 0, - disposal: 0, - disposaling: 0 - } + baselayer: [] } }, mounted() { @@ -132,17 +117,6 @@ tableclick() { this.showtable = !this.showtable }, - removemarkers() { - for (var i = 0; i < this.iconlist.length; i++) { - this.map.removeLayer(this.iconlist[i]) - } - var base = this.baselayer - this.map.eachLayer(function(layer) { - if (layer !== base[0] && layer !== base[1]) { - layer.remove() - } - }) - }, setZoom(points) { if (points.length > 0) { var maxLng = points[0][1] @@ -217,7 +191,7 @@ this.maps.push(esri.featureLayer(item).addTo(map)) } // 部件 - for (i = 1; i <= 40; i++) { + for (i = 1; i <= 45; i++) { item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18 } if (i === 15) { item = { url: this.baseUrl + this.partsUrl + '/' + i.toString(), minZoom: 18, diff --git a/static/project.config.json b/static/project.config.json index cb1eb78..8d25c63 100644 --- a/static/project.config.json +++ b/static/project.config.json @@ -1,5 +1,5 @@ { - "title": "基础资源系统", + "title": "基础资源子系统", "baseUrl": "http://111.198.10.15:11409/", "mainPage": "http://111.198.10.15:11404/dcms/", "singleSys": true,