update 优化地图工具方法,调整地图样式
This commit is contained in:
+40
-28
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user