diff --git a/public/index.html b/public/index.html index c6e160b..72805ba 100644 --- a/public/index.html +++ b/public/index.html @@ -37,16 +37,23 @@ document.getElementsByTagName('head')[0].appendChild(js); } - if (SITE_CONFIG['nodeEnv'] == 'dev_tdt') { - toLoadJs('http://api.tianditu.gov.cn/api?v=4.0&tk=c4dc987b442bd141a887d8d4a5d07926') - } else if (SITE_CONFIG['nodeEnv'] == 'dev_sdtdt') { - toLoadJs('http://www.sdmap.gov.cn/api/olapi/ol/openlayers.js') - } else if (SITE_CONFIG['nodeEnv'] == 'yantai_zhengwu_prod') { - toLoadJs('http://59.206.203.34/api/olapi/ol/openlayers.js') - } else { + + toLoadJs('https://api.tianditu.gov.cn/api?v=4.0&tk=c4dc987b442bd141a887d8d4a5d07926') toLoadJs('https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO') toLoadJs('https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77') - } + + // if (SITE_CONFIG['nodeEnv'] == 'dev_tdt') { + // toLoadJs('http://api.tianditu.gov.cn/api?v=4.0&tk=c4dc987b442bd141a887d8d4a5d07926') + // } else if (SITE_CONFIG['nodeEnv'] == 'dev_sdtdt') { + // toLoadJs('http://www.sdmap.gov.cn/api/olapi/ol/openlayers.js') + // } else if (SITE_CONFIG['nodeEnv'] == 'prod') { + // toLoadJs('http://api.tianditu.gov.cn/api?v=4.0&tk=c4dc987b442bd141a887d8d4a5d07926') + // toLoadJs('https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO') + // toLoadJs('https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77') + // } else { + // toLoadJs('https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO') + // toLoadJs('https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77') + // } console.log('============调试版本:1.0.3') console.log('nodeEnv', window.SITE_CONFIG['nodeEnv']) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 51da6ae..6f000dc 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -1,438 +1,443 @@ 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"; +// export const mapType = +// typeof window.TMap !== "undefined" +// ? "qq" +// : typeof window.T !== "undefined" +// ? "td" +// : "tdzw"; + +export const mapType = "qq"; 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", - }; - } + 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, index) => { - const { - location: { lat, lng }, - } = item; - item.lonlat = lng + " " + lat; - item.name = item.name || ""; - item.hotPointID = "hotPointID" + index; - 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.map((item, index) => { - item.hotPointID = "hotPointID" + index; - return item; - }), - }, - }); - } 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, index) => { - const { lng, lat } = item; - item.lonlat = lng + " " + lat; - item.name = item.name || ""; - item.hotPointID = "hotPointID" + index; - return item; - }), - }, - }); - } else { - reslove({ - msg: "failed", - error: "未检索到相关位置坐标", - }); - } - }); - } + 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, index) => { + const { + location: { lat, lng }, + } = item; + item.lonlat = lng + " " + lat; + item.name = item.name || ""; + item.hotPointID = "hotPointID" + index; + 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.map((item, index) => { + item.hotPointID = "hotPointID" + index; + return item; + }), + }, + }); + } 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, index) => { + const { lng, lat } = item; + item.lonlat = lng + " " + lat; + item.name = item.name || ""; + item.hotPointID = "hotPointID" + index; + 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; + 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; } diff --git a/src/utils/dai-map2.js b/src/utils/dai-map2.js new file mode 100644 index 0000000..f185923 --- /dev/null +++ b/src/utils/dai-map2.js @@ -0,0 +1,472 @@ +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"; + +export const mapType = "td"; + +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, index) => { + const { + location: { lat, lng }, + } = item; + item.lonlat = lng + " " + lat; + item.name = item.name || ""; + item.hotPointID = "hotPointID" + index; + 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.map((item, index) => { + item.hotPointID = "hotPointID" + index; + return item; + }), + }, + }); + } 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, index) => { + const { lng, lat } = item; + item.lonlat = lng + " " + lat; + item.name = item.name || ""; + item.hotPointID = "hotPointID" + index; + 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; + } + latitude = parseFloat(latitude); + longitude = parseFloat(longitude); + + 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) { + // 加载天地图底图 + var imageTileLayer = new QQMap.ImageTileLayer({ + getTileUrl: function (x, y, z) { + return `http://t4.tianditu.com/DataServer?T=img_w&tk=8a08c117ab9ee45d508686b01cc8d397&x=${x}&y=${y}&l=${z}`; + }, + tileSize: 256, //瓦片像素尺寸 + minZoom: 6, //显示自定义瓦片的最小级别 + maxZoom: 18, //显示自定义瓦片的最大级别 + visible: true, //是否可见 + zIndex: 5000, //层级高度(z轴) + opacity: 0.95, //图层透明度:1不透明,0为全透明 + map: this.map, //设置图层显示到哪个地图实例中 + }); + + 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") { + var imageURL = + "http://t5.tianditu.gov.cn/img_w/wmts?" + + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=8a08c117ab9ee45d508686b01cc8d397"; + var imageURL2 = + "http://t6.tianditu.gov.cn/cia_w/wmts?" + + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=8a08c117ab9ee45d508686b01cc8d397"; + //创建自定义图层对象 + let lay = new TDMap.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 }); + let lay2 = new TDMap.TileLayer(imageURL2, { minZoom: 1, maxZoom: 18 }); + + let center = new TDMap.LngLat(longitude, latitude); + this.map = new TDMap.Map(ele, { + center, + ...params, + layers: [lay, lay2], + }); + + 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; +} diff --git a/src/views/modules/base/community/buildTable.vue b/src/views/modules/base/community/buildTable.vue index b8d5eca..cf79199 100644 --- a/src/views/modules/base/community/buildTable.vue +++ b/src/views/modules/base/community/buildTable.vue @@ -391,7 +391,7 @@ export default { item.sort = parseInt(item.sort) || 0; item.sort = item.sort.toFixed(2) item.isChange = false - if (item.agencyId === this.staffAgencyId) { + if (true || item.agencyId === this.staffAgencyId) { item.showBtn = true this.validTableDataNum++ } else { diff --git a/src/views/modules/base/community/communityTable.vue b/src/views/modules/base/community/communityTable.vue index b7e916e..f9b52b6 100644 --- a/src/views/modules/base/community/communityTable.vue +++ b/src/views/modules/base/community/communityTable.vue @@ -387,7 +387,7 @@ export default { this.validTableDataNum = 0 this.total = data.total data.list.forEach(item => { - if (item.agencyId === this.staffAgencyId) { + if (true || item.agencyId === this.staffAgencyId) { item.showBtn = true this.validTableDataNum++ } else { diff --git a/src/views/modules/base/community/roomForm.vue b/src/views/modules/base/community/roomForm.vue index 496095f..31e63f7 100644 --- a/src/views/modules/base/community/roomForm.vue +++ b/src/views/modules/base/community/roomForm.vue @@ -1,81 +1,114 @@ - diff --git a/src/views/modules/base/community/roomTable.vue b/src/views/modules/base/community/roomTable.vue index 200139c..64aa24f 100644 --- a/src/views/modules/base/community/roomTable.vue +++ b/src/views/modules/base/community/roomTable.vue @@ -189,6 +189,7 @@ width="900px" top="5vh" class="dialog-h" + v-if="formShow" @closed="diaClose">