import nextTick from "dai-js/tools/nextTick"; import { requestGet } from "@/js/dai/request"; export const mapType = typeof window.TMap !== "undefined" ? "qq" : typeof window.T !== "undefined" ? "td" : "tdzw"; const urlSdtdt = (() => { if (window.SITE_CONFIG["nodeEnv"] == "dev_sdtdt") { return { search: "https://service.sdmap.gov.cn/search", geo: "https://service.sdmap.gov.cn/geodecode", }; } else { return { search: "http://172.20.46.177/map_search_proxy/search", geo: "http://172.20.46.177/epmet-map-proxy/GeoDecodeService.ashx", }; } })(); export const QQMap = window.TMap; export const TDMap = window.T; export function searchNearby(map, keyword) { if (mapType == "qq") { return new Promise((reslove) => { const search = new QQMap.service.Search(map, { pageSize: 10 }); search .searchNearby({ keyword, radius: 1000, autoExtend: true, center: map.getCenter(), }) .then((result) => { let { data } = result; if (Array.isArray(data) && data.length > 0) { const { location: { lat, lng }, address, } = data[0]; reslove({ msg: "success", data: { lng, lat, address, resultList: data.map((item) => { item.lonlat = lng + " " + lat; item.name = item.name || ""; return item; }), }, }); } else { reslove({ msg: "failed", error: "未检索到相关位置坐标", }); } }) .catch((error) => { reslove({ msg: "failed", error, }); }); }); } else if (mapType == "td") { return new Promise(async (reslove) => { const search = new TDMap.LocalSearch(map, { pageCapacity: 10 }); search.setQueryType(1); search.searchNearby(keyword, map.getCenter(), 1000000000); await nextTick(1000); const result = search.getResults(); const data = result ? result.getPois() : null; console.log("检索结果", data); if (Array.isArray(data) && data.length > 0) { const { lonlat, address, name } = data[0]; const lng = lonlat.split(" ")[0]; const lat = lonlat.split(" ")[1]; reslove({ msg: "success", data: { lng, lat, address: address + name, resultList: data, }, }); } else { reslove({ msg: "failed", error: "未检索到相关位置坐标", }); } }); } else if (mapType == "tdzw") { return new Promise(async (reslove) => { const center = map.getCenter(); const url = urlSdtdt.search; const { status, result } = await requestGet(url, { area: `CIRCLE(${center.lon} ${center.lat} 1000000)`, words: keyword, city: "烟台", uid: "navinfo", st: "LocalSearch", tk: "e758167d5b90c351b70a979c0820840c", }); if ( status == "ok" && result && Array.isArray(result.features) && result.features.length > 0 ) { const { lng, lat, address, name } = result.features[0]; reslove({ msg: "success", data: { lng, lat, address: address + name, resultList: result.features.map((item) => { item.lonlat = lng + " " + lat; item.name = item.name || ""; return item; }), }, }); } else { reslove({ msg: "failed", error: "未检索到相关位置坐标", }); } }); } } // 封装了地图相关函数,兼容天地图、腾讯地图常用api export default function init(ele, position, params) { this.mapType = mapType; this.map = null; this.marker = null; this.markers = null; this.getCenter = function () { return { lat: 0, lng: 0, }; }; this.setCenter = function (lat, lng) {}; this.setMarker = function (lat, lng, title) {}; this.getAddress = async function (lat, lng) {}; this.on = function (eventType, fn) {}; let { latitude, longitude } = position; if (!latitude || latitude == "" || latitude == "0") { latitude = 39.9088810666821; longitude = 116.39743841556731; } if (mapType != "qq") { if (typeof ele == "string") { ele = document.getElementById("app"); } let width = ele.offsetWidth; let height = ele.offsetHeight; if (height == 0) { ele.style.height = width * 0.5 + "px"; } } if (mapType == "qq") { let center = new QQMap.LatLng(latitude, longitude); this.map = new QQMap.Map(ele, { center, ...params, }); this.markers = new QQMap.MultiMarker({ map: this.map, geometries: [], }); this.getCenter = function () { const center = this.map.getCenter(); const lat = center.getLat(); const lng = center.getLng(); return { lat, lng }; }; this.setCenter = function (lat, lng) { this.map.setCenter(new QQMap.LatLng(lat, lng)); }; this.setMarker = function (lat, lng, title = "位置") { this.markers.setGeometries([]); this.markers.add([ { id: "4", styleId: "marker", position: new QQMap.LatLng(lat, lng), properties: { title, }, }, ]); }; this.geocoder = new QQMap.service.Geocoder(); // 新建一个正逆地址解析类 this.getAddress = async function (lat, lng) { return new Promise((reslove) => { this.geocoder .getAddress({ location: new QQMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 .then((result) => { reslove({ msg: "success", data: { address: result.result.address, }, }); }) .catch((error) => { reslove({ msg: "failed", error, }); }); }); }; this.on = function (eventType, fn) { if (eventType == "dragend") { this.map.on("moveend", (e) => { console.log("dragend", e); if (e && e.originalEvent) { fn(e); } }); } else { this.map.on(eventType, fn); } }; } else if (mapType == "td") { let center = new TDMap.LngLat(longitude, latitude); this.map = new TDMap.Map(ele, { center, ...params, }); this.getCenter = function () { const center = this.map.getCenter(); const lat = center.getLat(); const lng = center.getLng(); return { lat, lng }; }; this.setCenter = function (lat, lng) { this.map.panTo(new TDMap.LngLat(lng, lat)); }; this.setMarker = function (lat, lng, title = "位置") { let lnglat = new TDMap.LngLat(lng, lat); if (!this.marker) { this.marker = new TDMap.Marker(lnglat, { title, }); this.map.addOverLay(this.marker); } else { this.marker.setLngLat(lnglat); } }; this.geocoder = new TDMap.Geocoder(); // 新建一个正逆地址解析类 this.getAddress = async function (lat, lng) { return new Promise((reslove) => { this.geocoder.getLocation(new TDMap.LngLat(lng, lat), (result) => { if (result) { console.log("this.geocoder.getLocation", result); let status = result.getStatus(); reslove({ msg: "success", data: { address: result.getAddress(), }, }); } else { reslove({ msg: "failed", error: "解析失败", }); } }); }); }; this.on = function (eventType, fn) { if (eventType == "dragend") { this.map.on("dragend", (e) => { console.log("dragend", e); fn(e); }); } else { this.map.on(eventType, fn); } }; } else if (mapType == "tdzw") { this.map = new OpenLayers.Map(ele, { allOverlays: true, numZoomLevels: 19, displayProjection: "EPSG:4490", controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.ArgParser(), new OpenLayers.Control.Attribution(), ], }); this.map.addLayer(new SDTDTLayer()); this.getCenter = function () { const center = this.map.getCenter(); const lat = center.lat; const lng = center.lon; return { lat, lng }; }; this.setCenter = function (lat, lng) { lat = parseFloat(lat); lng = parseFloat(lng); this.map.setCenter(new OpenLayers.LonLat(lng, lat), 16); }; this.setCenter(latitude, longitude); this.setMarker = function (lat, lng, title = "位置") { lat = parseFloat(lat); lng = parseFloat(lng); const style = { externalGraphic: require("@/assets/img/common/map-poi.png"), graphicWidth: 32, graphicHeight: 32, }; if (!this.marker) { //创建矢量图层 this.markerLayer = new OpenLayers.Layer.Vector("graphicLayer", { style: OpenLayers.Util.extend( {}, OpenLayers.Feature.Vector.style["default"] ), }); this.map.addLayer(this.markerLayer); this.marker = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lng, lat), null, style ); this.markerLayer.addFeatures([this.marker]); } else { console.log("this marker", this.marker); this.marker.geometry.x = 0; this.marker.geometry.y = 0; this.marker.geometry.destroy(); this.markerLayer.removeFeatures([this.marker]); this.marker = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lng, lat), null, style ); // this.markerLayer.addFeatures([this.marker]); this.markerLayer.redraw(); console.log("redraw", this.marker); } }; this.getAddress = async function (lat, lng) { return new Promise(async (reslove) => { const url = urlSdtdt.geo; const { status, result } = await requestGet(url, { point: lng + "," + lat, type: "11", st: "Rgc2", output: "json", // tk: "e758167d5b90c351b70a979c0820840c", }); if (status == "ok" && result.address) { reslove({ msg: "success", data: { address: result.address, }, }); } else { reslove({ msg: "failed", error: "解析失败", }); } }); }; this.on = function (eventType, fn) { if (eventType == "dragend") { this.map.events.register("moveend", null, (e) => { console.log("dragend", e); fn(e); }); } else { this.map.events.register(eventType, null, moveendHandler); } }; } this.searchNearby = async function (keyword) { const ret = await searchNearby(this.map, keyword); return ret; }; return this; }