update 优化地图工具方法,调整地图样式

This commit is contained in:
zk
2024-06-14 18:11:09 +08:00
parent 83f768a4a0
commit 14c50baeed
24 changed files with 1312 additions and 178 deletions
+40 -28
View File
@@ -23,8 +23,10 @@ export const Map = {
* @desc 地图舒适化
* @param el dom元素 id选择器
* @param option 地图配置
* @param innerLineOption 内轨迹线配置
* @param outlineOption 外轨迹线配置
*/
initMap({ el, option }: InitMap) {
initMap({ el, option, innerLineOption, outerLineOption }: InitMap) {
return new Promise((resolve) => {
AMapLoader.load({
key: mapKey, // 申请好的Web端开发者Key,首次调用 load 时必填
@@ -43,27 +45,41 @@ export const Map = {
});
// 异步同时加载多个插件
new AMap.plugin(mapPlugin, () => {
this.drawInnerLine();
this.drawOutLine();
if (outerLineOption) {
this.drawInnerLine(innerLineOption);
this.drawOutLine(outerLineOption);
} else {
this.drawInnerLine();
this.drawOutLine();
}
});
resolve();
});
});
} /**
},
/**
*#desc 获取地图中心点
*/
getMapCenter() {
return this.map.getCenter();
},
/**
* @desc 中国外层边界线
*/,
drawOutLine() {
*/
drawOutLine(outerLineOption = {}) {
let line = {
strokeColor: '#2384dd',
strokeWeight: 3,
isOutline: false,
};
let geoJson = new AMap.GeoJSON({
geoJSON: china,
getPolygon: function (geoJson: string, lngLats: any) {
return new AMap.Polyline({
path: lngLats[0],
strokeColor: '#2384dd',
strokeWeight: 3,
// lineJoin: 'round', //折线拐点的绘制样式
isOutline: false,
// borderWeight: 2,
// outlineColor: '#6ccffe',
...line,
...outerLineOption,
});
},
});
@@ -71,24 +87,19 @@ export const Map = {
} /**
* @desc 中国内层边界线
*/,
drawInnerLine() {
drawInnerLine(innerLineOption = {}) {
let line = {
isOutline: true,
outlineColor: '#2692fc',
borderWeight: 1,
strokeColor: '#88b9f8',
strokeWeight: 1,
strokeOpacity: 0.8,
};
let geoJson = new AMap.GeoJSON({
geoJSON: chinaInner,
getPolygon: function (geoJson: string, lngLats: any) {
return new AMap.Polyline({
path: lngLats[0],
// strokeColor: '#57b2f8',
// strokeColor: '#2BA5FF',
// strokeColor: '#3d6eff',
// strokeWeight: 2,
// zIndex: 10,
isOutline: true,
outlineColor: '#2692fc',
borderWeight: 1,
strokeColor: '#88b9f8',
strokeWeight: 1,
strokeOpacity: 0.8,
});
return new AMap.Polyline({ path: lngLats[0], ...line, ...innerLineOption });
},
});
this.map.add(geoJson);
@@ -448,7 +459,8 @@ export const Map = {
return new Promise((resolve, reject) => {
geocoder.getAddress(lnglat, (status, result) => {
if (status === 'complete' && result.regeocode) {
return resolve(result.regeocode.formattedAddress);
console.log('xx', result);
return resolve(result.regeocode.formattedAddress, result.regeocode);
}
return reject(result);
});