@vuemap/vue-amap
Version:
高德地图vue3版本封装
223 lines (220 loc) • 7.43 kB
JavaScript
import { defineComponent, openBlock, createElementBlock } from 'vue';
import '../../../mixins/index.mjs';
import { buildProps } from '../../../utils/buildHelper.mjs';
import { useRegister } from '../../../mixins/useRegister.mjs';
var script = /* @__PURE__ */ defineComponent({
...{
name: "ElAmapMouseTool",
inheritAttrs: false
},
__name: "MouseTool",
props: buildProps({
type: {
type: String,
required: true,
default: "marker",
validator: (value) => {
return ["marker", "circle", "rectangle", "polyline", "polygon", "measureArea", "rule", "rectZoomIn", "rectZoomOut"].includes(value);
}
},
// 类型
drawOptions: {
type: Object,
default: () => null
},
// 绘制图层的属性
autoClear: {
type: Boolean,
default: true
},
// 是否绘制结束后自动清空图层
showTooltip: {
type: Boolean,
default: true
},
// 是否显示提示信息
tooltipTextMap: {
type: Object,
default: () => null
},
// 提示信息的map
textOptions: {
type: Object,
default: () => null
},
drawCursor: {
type: String,
default: "crosshair"
}
}),
emits: ["init", "draw"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
let $amapComponent;
let preMapCursor = "";
const tipTexts = {
marker: "\u5355\u51FB\u5730\u56FE\u9009\u62E9\u70B9\u4F4D",
circle: "\u6309\u4F4F\u9F20\u6807\u5DE6\u952E\u62D6\u62FD\u7ED8\u5236\u5706",
rectangle: "\u6309\u4F4F\u9F20\u6807\u5DE6\u952E\u62D6\u62FD\u7ED8\u5236\u77E9\u5F62",
polyline: "\u5355\u51FB\u5730\u56FE\u9009\u62E9\u62D0\u70B9\uFF0C\u53CC\u51FB\u5730\u56FE\u5B8C\u6210\u6298\u7EBF\u7ED8\u5236",
polygon: "\u5355\u51FB\u5730\u56FE\u9009\u62E9\u62D0\u70B9\uFF0C\u53CC\u51FB\u5730\u56FE\u5B8C\u6210\u591A\u8FB9\u5F62\u7ED8\u5236",
measureArea: "\u5355\u51FB\u5730\u56FE\u9009\u62E9\u62D0\u70B9\uFF0C\u53CC\u51FB\u5730\u56FE\u5B8C\u6210\u7ED8\u5236\u5E76\u8BA1\u7B97\u9762\u79EF",
rule: "\u5355\u51FB\u5730\u56FE\u9009\u62E9\u62D0\u70B9\uFF0C\u53F3\u51FB\u5730\u56FE\u5B8C\u6210\u7ED8\u5236\u5E76\u8BA1\u7B97\u8DDD\u79BB",
rectZoomIn: "\u6309\u4F4F\u9F20\u6807\u5DE6\u952E\u62D6\u62FD\u7ED8\u5236\u77E9\u5F62\uFF0C\u677E\u5F00\u5DE6\u952E\u653E\u5927\u5730\u56FE",
rectZoomOut: "\u6309\u4F4F\u9F20\u6807\u5DE6\u952E\u62D6\u62FD\u7ED8\u5236\u77E9\u5F62\uFF0C\u677E\u5F00\u5DE6\u952E\u653E\u5927\u5730\u56FE"
};
let isDrawing = true;
const __type = () => {
if (!isDrawing) {
return;
}
const type = props.type;
if ($amapComponent[type]) {
const options = props.drawOptions || {};
$amapComponent[type](options);
setText(tipTexts[type]);
}
};
const { $$getInstance, parentInstance } = useRegister((options, parentComponent) => {
return new Promise((resolve) => {
AMap.plugin(["AMap.MouseTool"], () => {
if (props.tooltipTextMap) {
Object.assign(tipTexts, props.tooltipTextMap);
}
$amapComponent = new AMap.MouseTool(parentComponent);
preMapCursor = parentComponent.getDefaultCursor();
createTooltip();
__type();
bindEvent();
changeMapCursor();
resolve($amapComponent);
});
});
}, {
emits,
watchRedirectFn: {
__type
},
destroyComponent() {
if ($amapComponent && (parentInstance == null ? void 0 : parentInstance.$amapComponent)) {
if (!(parentInstance == null ? void 0 : parentInstance.isDestroy)) {
$amapComponent.close(true);
revertMapCursor();
if ($text) {
parentInstance.$amapComponent.off("mousemove", getMousePosition);
parentInstance.$amapComponent.remove($text);
$text = null;
}
}
$amapComponent = null;
}
}
});
let $text;
const createTooltip = () => {
if (props.showTooltip) {
const textOptions = props.textOptions || {};
textOptions.anchor = "top-left";
textOptions.clickable = false;
textOptions.bubble = true;
textOptions.offset = [10, 10];
$text = new AMap.Text(textOptions);
parentInstance == null ? void 0 : parentInstance.$amapComponent.add($text);
parentInstance == null ? void 0 : parentInstance.$amapComponent.on("mousemove", getMousePosition);
}
};
const getMousePosition = (e) => {
const lnglat = e.lnglat;
$text.setPosition([lnglat.lng, lnglat.lat]);
};
const setText = (content) => {
if ($text) {
$text.setText(content);
}
};
const bindEvent = () => {
$amapComponent.on("draw", (e) => {
const type = props.type;
let emitData;
if (type === "marker") {
emitData = e.obj.getPosition().toArray();
} else if (type === "circle") {
emitData = {
center: e.obj.getCenter().toArray(),
radius: e.obj.getRadius()
};
} else if (type === "rectangle") {
const bounds = e.obj.getBounds();
const southWest = bounds.getSouthWest();
const northEast = bounds.getNorthEast();
emitData = [southWest.toArray(), northEast.toArray()];
} else if (type === "polyline") {
const path = e.obj.getPath();
emitData = path.map((v) => v.toArray());
} else if (type === "polygon") {
const path = e.obj.getPath();
emitData = path.map((v) => v.toArray());
} else if (type === "measureArea") {
const path = e.obj.getPath().map((v) => v.toArray());
emitData = AMap.GeometryUtil.ringArea(path);
} else if (type === "rule") {
const path = e.obj.getPath().map((v) => v.toArray());
emitData = AMap.GeometryUtil.distanceOfLine(path);
} else if (type === "rectZoomIn") {
emitData = true;
} else if (type === "rectZoomOut") {
emitData = true;
}
emits("draw", emitData, e.obj);
if (props.autoClear) {
$$clear();
__type();
}
});
};
const _close = (ifClear = true) => {
$amapComponent.close(ifClear);
};
const $$close = (ifClear = true) => {
isDrawing = false;
if ($amapComponent) {
_close(ifClear);
revertMapCursor();
if ($text) {
$text.hide();
}
}
};
const $$open = () => {
isDrawing = true;
changeMapCursor();
__type();
if ($text) {
$text.show();
}
};
const $$clear = () => {
_close(true);
};
const changeMapCursor = () => {
parentInstance == null ? void 0 : parentInstance.$amapComponent.setDefaultCursor(props.drawCursor);
};
const revertMapCursor = () => {
if (preMapCursor) {
parentInstance == null ? void 0 : parentInstance.$amapComponent.setDefaultCursor(preMapCursor);
}
};
__expose({
$$getInstance,
$$open,
$$close,
$$clear
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div");
};
}
});
export { script as default };
//# sourceMappingURL=MouseTool.vue2.mjs.map