dai
2 years ago
7 changed files with 1570 additions and 884 deletions
@ -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; |
||||
|
} |
||||
Loading…
Reference in new issue