333 lines
11 KiB
Vue
333 lines
11 KiB
Vue
<template>
|
||
<div style="display: flex">
|
||
<a-form-item-rest>
|
||
<div class="rightBox">
|
||
<div class="inputArea">
|
||
<div style="margin-right: 10px">经度</div>
|
||
<div class="lng">
|
||
<ns-input
|
||
v-model:value="lng"
|
||
type="number"
|
||
class="input"
|
||
placeholder="请输入经度"
|
||
@change="inputChange('lng', $event)" /> </div
|
||
><div style="margin: 0 10px">纬度</div>
|
||
<div class="lat">
|
||
<ns-input
|
||
v-model:value="lat"
|
||
type="number"
|
||
class="input"
|
||
placeholder="请输入纬度"
|
||
@change="inputChange('lat', $event)" />
|
||
</div>
|
||
</div>
|
||
<div class="inputSearch" style="margin: 15px 0 15px 0">
|
||
<label style="margin-right: 10px">地址</label>
|
||
<ns-input v-model:value="address" class="inputAdress" placeholder="请输入地址" />
|
||
<ns-button type="primary" @click="onSearch">查询</ns-button>
|
||
</div>
|
||
<div class="mapArea">
|
||
<div id="map-container" style="width: 600px"></div>
|
||
</div>
|
||
<div id="resultDiv" class="result" v-if="resultList.length">
|
||
<div class="title">搜索结果:</div>
|
||
<ul>
|
||
<li v-for="(item, index) in resultList" :key="index">
|
||
<a @click="clickItem(item)">{{ index + 1 + '-' + item.name }}</a>
|
||
</li>
|
||
</ul>
|
||
<a-pagination
|
||
size="small"
|
||
:total="total"
|
||
@change="changeHandle"
|
||
:show-total="(total) => ` 共 ${total} 个搜索结果`" />
|
||
</div>
|
||
</div>
|
||
</a-form-item-rest>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent } from 'vue';
|
||
import { Pagination } from 'ant-design-vue';
|
||
import pointTransfer from './transfer';
|
||
|
||
export default defineComponent({
|
||
name: 'NsSuperMap',
|
||
components: {
|
||
'a-pagination': Pagination,
|
||
},
|
||
props: {
|
||
// 中心点坐标
|
||
centerPoint: {
|
||
type: Array,
|
||
},
|
||
// 纬度
|
||
longitude: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
// 经度
|
||
latitude: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
defaultAddress: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
toPoint: {
|
||
type: String,
|
||
default: 'WGS84',
|
||
},
|
||
fromPoint: {
|
||
type: String,
|
||
default: 'GCJ02',
|
||
},
|
||
},
|
||
emits: ['change'],
|
||
data() {
|
||
return {
|
||
T: '',
|
||
zoom: 12,
|
||
lng: 0,
|
||
lat: 0,
|
||
address: '',
|
||
resultList: [],
|
||
total: 0,
|
||
page: 1,
|
||
};
|
||
},
|
||
watch: {
|
||
// longitude: {
|
||
// handler(val) {
|
||
// if (this.longitude && this.latitude) {
|
||
// let point = pointTransfer(
|
||
// [this.longitude, this.latitude],
|
||
// this.fromPoint,
|
||
// this.toPoint,
|
||
// );
|
||
// this.lng = point[0];
|
||
// this.lat = point[1];
|
||
// this.$nextTick(() => {
|
||
// this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
|
||
// let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
|
||
// this.map.addOverLay(marker);
|
||
// this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
|
||
// this.$emit('change', [this.latitude, this.longitude, this.address]);
|
||
// });
|
||
// }
|
||
// },
|
||
// immediate: true,
|
||
// deep: true,
|
||
// },
|
||
// latitude: {
|
||
// handler(val) {
|
||
// if (this.longitude && this.latitude) {
|
||
// let point = pointTransfer(
|
||
// [this.longitude, this.latitude],
|
||
// this.fromPoint,
|
||
// this.toPoint,
|
||
// );
|
||
// this.lng = point[0];
|
||
// this.lat = point[1];
|
||
// this.$nextTick(() => {
|
||
// this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
|
||
// let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
|
||
// this.map.addOverLay(marker);
|
||
// this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
|
||
// this.$emit('change', [this.latitude, this.longitude, this.address]);
|
||
// });
|
||
// }
|
||
// },
|
||
// immediate: true,
|
||
// deep: true,
|
||
// },
|
||
// defaultAddress: {
|
||
// handler(val) {
|
||
// if (this.longitude && this.latitude) {
|
||
// let point = pointTransfer(
|
||
// [this.longitude, this.latitude],
|
||
// this.fromPoint,
|
||
// this.toPoint,
|
||
// );
|
||
// this.lng = point[0].toFixed(8);
|
||
// this.lat = point[1].toFixed(8);
|
||
// this.$nextTick(() => {
|
||
// this.address = this.getAddress(this.T.LngLat(this.lng, this.lat));
|
||
// let marker = new this.T.Marker(new this.T.LngLat(this.lng, this.lat));
|
||
// this.map.addOverLay(marker);
|
||
// this.map.centerAndZoom(new this.T.LngLat(this.lng, this.lat), 16);
|
||
// this.$emit('change', [this.latitude, this.longitude, this.address]);
|
||
// });
|
||
// }
|
||
// },
|
||
// immediate: true,
|
||
// deep: true,
|
||
// },
|
||
address: {
|
||
handler(val) {
|
||
console.log(val);
|
||
},
|
||
immediate: true,
|
||
deep: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
// this.map = new this.T.Map('map-container');
|
||
let supMap = window.L;
|
||
var url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';
|
||
|
||
this.map = supMap.map('map-container', {
|
||
// crs: supMap.CRS.EPSG4326,
|
||
center: [35.25, 102.55],
|
||
zoom: 14,
|
||
maxZoom: 18,
|
||
});
|
||
let supermapCloud = new window.L.supermap.CloudTileLayer();
|
||
// let vectorLayer = new supMap.supermap.TiledMapLayer(url, {
|
||
// cacheEnabled: true,
|
||
// returnAttributes: true,
|
||
// attribution: 'Tile Data©SuperMap iServer with©SuperMap iClient',
|
||
// }).addTo(this.map);
|
||
this.map.addLayer(supermapCloud);
|
||
// this.map.panTo(supMap.latLng(118.433065, 31.352625));
|
||
//矢量瓦片图层添加点击事件，设置默认风格
|
||
// vectorLayer.on('click', function (evt) {
|
||
// var id = evt.layer.properties.id;
|
||
// var layerName = evt.layer.layerName;
|
||
// // 设置矢量瓦片图层样式
|
||
// var selectStyle = {
|
||
// fillColor: '#800026',
|
||
// fillOpacity: 0.5,
|
||
// stroke: true,
|
||
// fill: true,
|
||
// color: 'red',
|
||
// opacity: 1,
|
||
// weight: 2,
|
||
// };
|
||
// vectorLayer.setFeatureStyle(id, layerName, selectStyle);
|
||
// });
|
||
// if (this.centerPoint) {
|
||
// this.map.centerAndZoom(new this.T.LngLat(this.centerPoint.join()), this.zoom);
|
||
// } else {
|
||
// this.map.centerAndZoom(new this.T.LngLat(118.433065, 31.352625), this.zoom);
|
||
// }
|
||
// let cp = new this.T.CoordinatePickup(this.map, { callback: this.getLngLat });
|
||
// cp.addEvent();
|
||
},
|
||
methods: {
|
||
init() {
|
||
// if (typeof window.T !== 'undefined') {
|
||
// console.log('初始化资源成功');
|
||
// this.T = window.T;
|
||
// } else {
|
||
// console.log('初始化资源失败，查看项目index.html是否引用天地图');
|
||
// }
|
||
},
|
||
getLngLat(lnglat) {
|
||
let that = this;
|
||
that.lng = lnglat.lng;
|
||
that.lat = lnglat.lat;
|
||
this.getAddress(lnglat);
|
||
that.map.clearOverLays();
|
||
let marker = new that.T.Marker(new that.T.LngLat(that.lng, that.lat));
|
||
that.map.addOverLay(marker);
|
||
that.map.centerAndZoom(new that.T.LngLat(that.lng, that.lat), 16);
|
||
let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
|
||
this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
|
||
},
|
||
getAddress(lnglat) {
|
||
let that = this;
|
||
that.geocode = new that.T.Geocoder();
|
||
that.geocode.getLocation(lnglat, function (result) {
|
||
that.address = result.getAddress();
|
||
});
|
||
},
|
||
onSearch() {
|
||
this.map.clearOverLays();
|
||
let config = {
|
||
// pageCapacity: 10,
|
||
onSearchComplete: this.loaclSearchResult,
|
||
};
|
||
this.localsearch = new this.T.LocalSearch(this.map, config);
|
||
this.localsearch.search(this.address);
|
||
},
|
||
loaclSearchResult(result) {
|
||
let that = this;
|
||
that.resultList = result.getPois();
|
||
that.total = result.getCount();
|
||
if (that.resultList.length > 0) {
|
||
let first = that.resultList[0];
|
||
let lonlat = first.lonlat.split(' ');
|
||
this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
|
||
for (let i = 0; i < that.resultList.length; i++) {
|
||
const item = that.resultList[i];
|
||
let lonlat = item.lonlat.split(' ');
|
||
let marker = new that.T.Marker(new that.T.LngLat(lonlat[0], lonlat[1]));
|
||
marker.addEventListener('click', function (e) {
|
||
that.lng = e.lnglat.lng;
|
||
that.lat = e.lnglat.lat;
|
||
that.getAddress(e.lnglat);
|
||
that.map.centerAndZoom(new that.T.LngLat(e.lnglat.lng, e.lnglat.lat), 16);
|
||
let point = pointTransfer([that.lng, that.lat], that.toPoint, that.fromPoint);
|
||
this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
|
||
});
|
||
that.map.addOverLay(marker);
|
||
}
|
||
}
|
||
},
|
||
changeHandle(page) {
|
||
this.map.clearOverLays();
|
||
if (this.page < page) {
|
||
this.localsearch.nextPage();
|
||
} else {
|
||
this.localsearch.previousPage();
|
||
}
|
||
this.page = page;
|
||
},
|
||
clickItem(item) {
|
||
let lonlat = item.lonlat.split(' ');
|
||
this.lng = lonlat[0];
|
||
this.lat = lonlat[1];
|
||
this.address = item.address;
|
||
this.map.centerAndZoom(new this.T.LngLat(lonlat[0], lonlat[1]), 16);
|
||
let point = pointTransfer([this.lng, this.lat], this.toPoint, this.fromPoint);
|
||
this.$emit('change', [point[1].toFixed(8), point[0].toFixed(8), this.address]);
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
input::-webkit-outer-spin-button,
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
}
|
||
#map-container {
|
||
width: 600px;
|
||
height: 400px;
|
||
}
|
||
.leftBox,
|
||
.rightBox {
|
||
flex: 1;
|
||
}
|
||
.inputArea {
|
||
display: flex;
|
||
line-height: 30px;
|
||
}
|
||
.inputSearch {
|
||
.inputAdress {
|
||
width: 344px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
#resultDiv {
|
||
width: 100%;
|
||
ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
</style>
|