diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 156963f64..dd608e902 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -2,6 +2,85 @@ import nextTick from "dai-js/tools/nextTick"; export const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; +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, + data, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }) + .catch((error) => { + reslove({ + msg: "failed", + error, + }); + }); + }); + } else { + 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, + data, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }); + } +} + // 封装了地图相关函数，兼容天地图、腾讯地图常用api export default function init(ele, position, params) { this.mapType = mapType; @@ -17,12 +96,8 @@ export default function init(ele, position, params) { this.setCenter = function (lat, lng) {}; this.setMarker = function (lat, lng, title) {}; this.getAddress = async function (lat, lng) {}; - this.searchNearby = async function (keyword) {}; this.on = function (eventType, fn) {}; - const QQMap = window.TMap; - const TDMap = window.T; - let { latitude, longitude } = position; if (!latitude || latitude == "" || latitude == "0") { latitude = 39.9088810666821; @@ -88,46 +163,6 @@ export default function init(ele, position, params) { }); }; - this.search = new QQMap.service.Search(this.map, { pageSize: 10 }); - this.searchNearby = async function (keyword) { - return new Promise((reslove) => { - this.search - .searchNearby({ - keyword, - radius: 1000, - autoExtend: true, - center: this.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, - }, - }); - } else { - reslove({ - msg: "failed", - error: "未检索到相关位置坐标", - }); - } - }) - .catch((error) => { - reslove({ - msg: "failed", - error, - }); - }); - }); - }; - this.on = function (eventType, fn) { if (eventType == "dragend") { this.map.on("moveend", (e) => { @@ -202,42 +237,6 @@ export default function init(ele, position, params) { }); }; - this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 }); - this.searchNearby = async function (keyword) { - return new Promise(async (reslove) => { - this.search.setQueryType(1); - this.search.searchNearby(keyword, this.map.getCenter(), 1000000000); - - await nextTick(1000); - - const result = this.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]; - this.setCenter(lat, lng); - this.setMarker(lat, lng); - reslove({ - msg: "success", - data: { - lng, - lat, - address: address + name, - }, - }); - } else { - reslove({ - msg: "failed", - error: "未检索到相关位置坐标", - }); - } - }); - }; - this.on = function (eventType, fn) { if (eventType == "dragend") { this.map.on("dragend", (e) => { @@ -250,5 +249,11 @@ export default function init(ele, position, params) { }; } + this.searchNearby = async function (keyword) { + const ret = await searchNearby(this.map, keyword); + + return ret; + }; + return this; } diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue index e49ce08f1..453832394 100644 --- a/src/views/modules/visual/command/cpts/map.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -31,9 +31,11 @@ import { PointLayer, Marker, Popup, + RasterLayer, } from "@antv/l7"; import { GaodeMap, Map } from "@antv/l7-maps"; import { spliceIntoChunks } from "@/utils/index"; +import { mapType, searchNearby } from "@/utils/dai-map"; let myMap; let scene; @@ -327,23 +329,32 @@ export default { styleConfig = lightStyle; } - myMap = new GaodeMap({ - pitch: this.pitch, - style: styleConfig.style, - center: [ - srcGridData.longitude || - this.$store.state.user.longitude || - 116.39743841556731, - srcGridData.latitude || - this.$store.state.user.latitude || - 39.9088810666821, - ], - token: "fc14b42e0ca18387866d68ebd4f150c1", - zoom: 18, - isHotspot: false, - resizeEnable: true, - doubleClickZoom: false, - }); + const iniCenter = [ + srcGridData.longitude || + this.$store.state.user.longitude || + 116.39743841556731, + srcGridData.latitude || + this.$store.state.user.latitude || + 39.9088810666821, + ]; + + if (mapType == "td") { + myMap = new Map({ + center: iniCenter, + zoom: 18, + }); + } else { + myMap = new GaodeMap({ + pitch: this.pitch, + style: styleConfig.style, + center: iniCenter, + token: "fc14b42e0ca18387866d68ebd4f150c1", + zoom: 18, + isHotspot: false, + resizeEnable: true, + doubleClickZoom: false, + }); + } scene = new Scene({ id: "map", @@ -352,6 +363,10 @@ export default { }); scene.on("loaded", async () => { + if (mapType == "td") { + this.iniMapBase(scene); + } + this.iniMapGrid(scene); this.iniMapDot(scene); this.iniMapDot2(scene); @@ -360,6 +375,46 @@ export default { }); }, + // 初始化底图 + iniMapBase(scene) { + // 底图服务 + const baseLayer = new RasterLayer({ + zIndex: 1, + }); + baseLayer.source( + "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ); + + // 注记服务 + const annotionLayer = new RasterLayer({ + zIndex: 2, + }); + annotionLayer.source( + "https://t4.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=8a08c117ab9ee45d508686b01cc8d397", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ); + + scene.addLayer(baseLayer); + scene.addLayer(annotionLayer); + }, + iniMapGrid(scene) { const { darkStyle, lightStyle, polygonData, polygonDotData } = this; @@ -806,20 +861,25 @@ export default { }, searchPos(name) { - return new Promise((reslove) => { - window.AMap.plugin("AMap.PlaceSearch", () => { - const city = this.$store.state.user.areaCodePath[1] || "全国"; - console.log("搜索区域", city); - // 实例化Autocomplete - let autoOptions = { - //city 限定城市，默认全国 - city, - }; - let autoComplete = new window.AMap.PlaceSearch(autoOptions); - autoComplete.search(name, function (status, result) { - reslove(result); + console.log("=----------------------=searchPos", name); + return new Promise(async (reslove) => { + if (mapType == "td") { + reslove([]); + } else { + window.AMap.plugin("AMap.PlaceSearch", () => { + const city = this.$store.state.user.areaCodePath[1] || "全国"; + console.log("搜索区域", city); + // 实例化Autocomplete + let autoOptions = { + //city 限定城市，默认全国 + city, + }; + let autoComplete = new window.AMap.PlaceSearch(autoOptions); + autoComplete.search(name, function (status, result) { + reslove(result); + }); }); - }); + } }); }, },