<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>