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