You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
11 KiB
333 lines
11 KiB
4 months ago
|
<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>
|