|
@@ -1,8 +1,6 @@
|
|
|
<template>
|
|
|
<div class="map-control">
|
|
|
- <el-autocomplete ref="autocomplete" class="inline-input input-with-select" v-model="inputInfo" :fetch-suggestions="querySearch"
|
|
|
- :placeholder="placeholder" :trigger-on-focus="false" @select="handleSelect" clearable @clear="clearInput"
|
|
|
- :popper-append-to-body="false" :popper-class="suggestionClass">
|
|
|
+ <el-autocomplete ref="autocomplete" class="inline-input input-with-select" v-model="inputInfo" :fetch-suggestions="querySearch" :placeholder="placeholder" :trigger-on-focus="false" @select="handleSelect" clearable @clear="clearInput" :popper-append-to-body="false" :popper-class="suggestionClass">
|
|
|
<el-select v-model="selectType" slot="prepend" class="select-type" @change="changeSelect">
|
|
|
<el-option label="地名搜索" value="address"></el-option>
|
|
|
<el-option label="坐标定位" value="coord"></el-option>
|
|
@@ -17,16 +15,20 @@
|
|
|
|
|
|
<script>
|
|
|
import { Feature, Overlay } from 'ol'
|
|
|
-import { Vector as VectorSource } from 'ol/source';
|
|
|
-import { Vector as VectorLayer } from 'ol/layer';
|
|
|
-import Point from 'ol/geom/Point';
|
|
|
-import { Style, Stroke, Icon } from 'ol/style';
|
|
|
-import { GeoJSON } from 'ol/format';
|
|
|
-import { Select } from "ol/interaction";
|
|
|
-import Intersects from 'ol/format/filter/Intersects';
|
|
|
-import { mapConfig } from '../map.config';
|
|
|
-import * as olExtent from 'ol/extent';
|
|
|
-import { SuperMap, TileSuperMapRest, FeatureService } from '@supermap/iclient-ol';
|
|
|
+import { Vector as VectorSource } from 'ol/source'
|
|
|
+import { Vector as VectorLayer } from 'ol/layer'
|
|
|
+import Point from 'ol/geom/Point'
|
|
|
+import { Style, Stroke, Icon } from 'ol/style'
|
|
|
+import { GeoJSON } from 'ol/format'
|
|
|
+import { Select } from 'ol/interaction'
|
|
|
+import Intersects from 'ol/format/filter/Intersects'
|
|
|
+import { mapConfig } from '../map.config'
|
|
|
+import * as olExtent from 'ol/extent'
|
|
|
+import {
|
|
|
+ SuperMap,
|
|
|
+ TileSuperMapRest,
|
|
|
+ FeatureService
|
|
|
+} from '@supermap/iclient-ol'
|
|
|
export default {
|
|
|
props: ['map'],
|
|
|
data() {
|
|
@@ -41,17 +43,16 @@ export default {
|
|
|
markDiv: null, // 提示弹窗
|
|
|
txtSpan: null, // 提示文字
|
|
|
suggestionClass: ''
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
/**
|
|
|
* @description 选择查询的类型
|
|
|
*/
|
|
|
changeSelect(val) {
|
|
|
switch (val) {
|
|
|
case 'address':
|
|
|
- this.placeholder = '请输入地名';
|
|
|
+ this.placeholder = '请输入地名'
|
|
|
this.suggestionClass = ''
|
|
|
break
|
|
|
case 'coord':
|
|
@@ -61,11 +62,10 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
querySearch(queryString, cb) {
|
|
|
- this.sqlQueryu(queryString);
|
|
|
+ this.sqlQueryu(queryString)
|
|
|
setTimeout(() => {
|
|
|
cb(this.featuresRes.features)
|
|
|
- }, 500);
|
|
|
-
|
|
|
+ }, 500)
|
|
|
},
|
|
|
/**
|
|
|
*@description 点击提示事件
|
|
@@ -85,7 +85,7 @@ export default {
|
|
|
center: option.geometry.coordinates,
|
|
|
duration: 600
|
|
|
})
|
|
|
- }, 200);
|
|
|
+ }, 200)
|
|
|
},
|
|
|
/**
|
|
|
*@description 清除显示图层
|
|
@@ -94,7 +94,7 @@ export default {
|
|
|
if (this.vecLayer) {
|
|
|
this.vecLayer.getSource().clear()
|
|
|
this.map.removeLayer(this.vecLayer)
|
|
|
- this.map.removeOverlay(this.map.getOverlayById("markOverlay")) // 移除提示框
|
|
|
+ this.map.removeOverlay(this.map.getOverlayById('markOverlay')) // 移除提示框
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
@@ -110,23 +110,26 @@ export default {
|
|
|
if (this.selectType == 'address') {
|
|
|
this.clearLayer()
|
|
|
// 显示模糊匹配的所有结果
|
|
|
- this.showResult(new GeoJSON().readFeatures(JSON.stringify(this.featuresRes)))
|
|
|
- this.map.getView().fit(this.vecLayer.getSource().getExtent(), this.map.getSize(), { duration: 1000 })
|
|
|
- }
|
|
|
- else if (this.selectType == 'coord') {
|
|
|
- let coordInfo = this.checkCoord(this.inputInfo);
|
|
|
+ this.showResult(
|
|
|
+ new GeoJSON().readFeatures(JSON.stringify(this.featuresRes))
|
|
|
+ )
|
|
|
+ this.map
|
|
|
+ .getView()
|
|
|
+ .fit(this.vecLayer.getSource().getExtent(), this.map.getSize(), {
|
|
|
+ duration: 1000
|
|
|
+ })
|
|
|
+ } else if (this.selectType == 'coord') {
|
|
|
+ let coordInfo = this.checkCoord(this.inputInfo)
|
|
|
if (coordInfo[0] == true) {
|
|
|
let _feature = new Feature({
|
|
|
//几何信息
|
|
|
geometry: new Point(coordInfo[1]),
|
|
|
NAME: '坐标:' + this.inputInfo
|
|
|
- });
|
|
|
+ })
|
|
|
this.showResult([_feature])
|
|
|
- let view = this.map.getView();
|
|
|
- view.setZoom(16);
|
|
|
- view.setCenter(
|
|
|
- olExtent.getCenter(_feature.getGeometry().getExtent())
|
|
|
- );
|
|
|
+ let view = this.map.getView()
|
|
|
+ view.setZoom(16)
|
|
|
+ view.setCenter(olExtent.getCenter(_feature.getGeometry().getExtent()))
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -140,8 +143,10 @@ export default {
|
|
|
let datasetNames = []
|
|
|
// 指定查询的数据集
|
|
|
mapConfig.iServerUrl.basicGISDataServer.dataSet.forEach(item => {
|
|
|
- datasetNames.push(mapConfig.iServerUrl.basicGISDataServer.dataSource + ":" + item)
|
|
|
- });
|
|
|
+ datasetNames.push(
|
|
|
+ mapConfig.iServerUrl.basicGISDataServer.dataSource + ':' + item
|
|
|
+ )
|
|
|
+ })
|
|
|
//指定SQL查询服务参数
|
|
|
let sqlParam = new SuperMap.GetFeaturesBySQLParameters({
|
|
|
queryParameter: {
|
|
@@ -149,14 +154,14 @@ export default {
|
|
|
attributeFilter: "name like '%" + str + "%'"
|
|
|
},
|
|
|
datasetNames: datasetNames
|
|
|
- });
|
|
|
+ })
|
|
|
//向服务器发送请求,并对返回的结果进行处理
|
|
|
new FeatureService(url).getFeaturesBySQL(sqlParam, serviceResult => {
|
|
|
//获取返回的features数据
|
|
|
- let features = serviceResult.result.features;
|
|
|
+ let features = serviceResult.result.features
|
|
|
// console.log("查询结果::::", features)
|
|
|
this.featuresRes = features
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
/**
|
|
|
* 设置点图标样式
|
|
@@ -179,22 +184,26 @@ export default {
|
|
|
*/
|
|
|
showMark(coordinates, txt) {
|
|
|
if (this.markDiv == null) {
|
|
|
- this.markDiv = document.createElement('div');
|
|
|
- this.markDiv.style = "min-width:100px;max-width:140px;padding:10px 10px;box-shadow:0 2px 12px 0 rgba(0,0,0,0.3);text-align:center;font-size:12px;color:#4c4c4c;background-color:#fff;position:relative;top:-40px;font-weight:600;line-height:1.5em;"
|
|
|
- this.txtSpan = document.createElement('span');
|
|
|
+ this.markDiv = document.createElement('div')
|
|
|
+ this.markDiv.className = 'markDiv'
|
|
|
+ this.txtSpan = document.createElement('span')
|
|
|
this.markDiv.appendChild(this.txtSpan)
|
|
|
let corner = document.createElement('div')
|
|
|
- corner.style = "border-style: solid;border-width: 10px 10px 10px 10px;border-color: #fff transparent transparent transparent;width: 0px;height: 0px;position: absolute; bottom: -20px;left: 50%;transform: translate(-50%, 0);"
|
|
|
+ corner.className = 'corner'
|
|
|
this.markDiv.appendChild(corner)
|
|
|
}
|
|
|
- this.txtSpan.innerHTML = txt
|
|
|
+ this.txtSpan.innerHTML = `
|
|
|
+ <h3>${txt}</h3>
|
|
|
+ <p>地址:四川省绵阳市涪城区涪城路14号</p>
|
|
|
+ <p>电话:(0816)2224469</p>
|
|
|
+ `
|
|
|
let overlay = new Overlay({
|
|
|
element: this.markDiv,
|
|
|
autoPan: false,
|
|
|
- positioning: "bottom-center",
|
|
|
+ positioning: 'bottom-center',
|
|
|
id: 'markOverlay',
|
|
|
stopEvent: false
|
|
|
- });
|
|
|
+ })
|
|
|
this.map.addOverlay(overlay)
|
|
|
overlay.setPosition(coordinates)
|
|
|
},
|
|
@@ -206,7 +215,9 @@ export default {
|
|
|
if (this.vecLayer == null) {
|
|
|
this.vecLayer = new VectorLayer({
|
|
|
source: new VectorSource(),
|
|
|
- style: this.setPointStyle(require('../../../../public/images/kxc/gkdm.png'))
|
|
|
+ style: this.setPointStyle(
|
|
|
+ require('../../../../public/images/kxc/gkdm.png')
|
|
|
+ )
|
|
|
})
|
|
|
}
|
|
|
this.vecLayer.getSource().addFeatures(featuresArray)
|
|
@@ -218,14 +229,19 @@ export default {
|
|
|
if (this.select == null) {
|
|
|
this.select = new Select({
|
|
|
layers: [this.vecLayer],
|
|
|
- style: this.setPointStyle(require('../../../../public/images/kxc/gkdm2.png'))
|
|
|
+ style: this.setPointStyle(
|
|
|
+ require('../../../../public/images/kxc/gkdm2.png')
|
|
|
+ )
|
|
|
})
|
|
|
this.map.addInteraction(this.select)
|
|
|
}
|
|
|
// 要素选择事件
|
|
|
this.select.on('select', feature => {
|
|
|
if (feature.selected.length > 0) {
|
|
|
- this.showMark(feature.selected[0].getGeometry().getCoordinates(), feature.selected[0].get('NAME'))
|
|
|
+ this.showMark(
|
|
|
+ feature.selected[0].getGeometry().getCoordinates(),
|
|
|
+ feature.selected[0].get('NAME')
|
|
|
+ )
|
|
|
// 地图动画,,,异步
|
|
|
setTimeout(() => {
|
|
|
this.map.getView().setZoom(15)
|
|
@@ -233,10 +249,9 @@ export default {
|
|
|
center: feature.selected[0].getGeometry().getCoordinates(),
|
|
|
duration: 600
|
|
|
})
|
|
|
- }, 200);
|
|
|
- }
|
|
|
- else {
|
|
|
- this.map.removeOverlay(this.map.getOverlayById("markOverlay"))
|
|
|
+ }, 200)
|
|
|
+ } else {
|
|
|
+ this.map.removeOverlay(this.map.getOverlayById('markOverlay'))
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -245,12 +260,12 @@ export default {
|
|
|
* @description 输入的经纬度判断是否合法
|
|
|
*/
|
|
|
checkCoord(lonlat) {
|
|
|
- let flag;
|
|
|
+ let flag
|
|
|
// let lonScope = [97.3661, 108.5329]; // 四川经度范围
|
|
|
// let latScope = [26.0661, 34.3203]; // 四川纬度范围
|
|
|
- let lonScope = [-180, 180]; // 经度范围
|
|
|
- let latScope = [-90, 90]; // 纬度范围
|
|
|
- let strRes = lonlat.split(',');
|
|
|
+ let lonScope = [-180, 180] // 经度范围
|
|
|
+ let latScope = [-90, 90] // 纬度范围
|
|
|
+ let strRes = lonlat.split(',')
|
|
|
if (strRes.length == 2) {
|
|
|
if (
|
|
|
parseFloat(strRes[0]) >= lonScope[0] &&
|
|
@@ -260,32 +275,32 @@ export default {
|
|
|
parseFloat(strRes[1]) >= latScope[0] &&
|
|
|
parseFloat(strRes[1]) <= latScope[1]
|
|
|
) {
|
|
|
- flag = true;
|
|
|
+ flag = true
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: '纬度范围为-90-90!',
|
|
|
type: 'warning'
|
|
|
- });
|
|
|
- flag = false;
|
|
|
+ })
|
|
|
+ flag = false
|
|
|
}
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: '经度范围为-180-180!',
|
|
|
type: 'warning'
|
|
|
- });
|
|
|
- flag = false;
|
|
|
+ })
|
|
|
+ flag = false
|
|
|
}
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: '经纬度坐标格式错误!',
|
|
|
type: 'warning'
|
|
|
- });
|
|
|
- flag = false;
|
|
|
+ })
|
|
|
+ flag = false
|
|
|
}
|
|
|
- return [flag, [parseFloat(strRes[0]), parseFloat(strRes[1])]];
|
|
|
+ return [flag, [parseFloat(strRes[0]), parseFloat(strRes[1])]]
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|