bri-components 1.5.13 → 1.5.15

package/src/components/controls/base/DshCoordinates.vue

@@ -1,577 +1,577 @@
-<template>
-    <!-- 单选模式 编辑 -->
-    <div
-        v-if="!multipleMode && canEdit"
-        class="DshCoordinates"
-    >
-        <bri-tooltip
-            :content="showVal"
-            :transfer="true"
-        >
-            <!-- 编辑 -->
-            <dsh-control-input
-                :class="commonClass"
-                :value="curVal"
-                :disabled="disabled"
-                :propsObj="selfPropsObj"
-                @clear="clickClear"
-                @click.native="clickInput"
-            ></dsh-control-input>
-        </bri-tooltip>
-
-        <!-- 模态框 -->
-        <Modal
-            class="DshCoordinates-modal"
-            v-model="showModal"
-            :styles="modalStyles"
-            :footer-hide="true"
-        >
-            <!-- 顶部 -->
-            <div
-                slot="header"
-                class="DshCoordinates-modal-header"
-            >
-                <!-- 可编辑 -->
-                <Row
-                    v-if="!disabled"
-                    class="header-edit"
-                    type="flex"
-                    justify="center"
-                    align="bottom"
-                >
-                    <i-col span="8">
-                        <radio-group v-model="formData.kind">
-                            <Radio label="keyword">按关键字搜索</Radio>
-                            <Radio label="coordinate">按坐标搜索</Radio>
-                        </radio-group>
-
-                        <Row class="header-edit-row">
-                            <i-col span="16">
-                                <Input
-                                    v-model="formData.searchText"
-                                    placeholder="请输入..."
-                                    :clearable="true"
-                                    @on-enter="clickSearch"
-                                />
-                                <span class="header-edit-message">{{ searchMessage }}</span>
-                            </i-col>
-
-                            <i-col span="8">
-                                <Button
-                                    type="primary"
-                                    @click="clickSearch"
-                                >搜索</Button>
-                            </i-col>
-                        </Row>
-                    </i-col>
-
-                    <i-col span="8">
-                        <div class="header-edit-text">坐标获取结果</div>
-                        <Row class="header-edit-row">
-                            <i-col span="16">
-                                <Input
-                                    :value="newVal.name"
-                                    :readonly="true"
-                                    :clearable="true"
-                                    @on-clear="clickModalClear"
-                                    @click.native="clickMapFitView"
-                                />
-                            </i-col>
-
-                            <i-col span="8">
-                                <Button
-                                    type="primary"
-                                    @click="clickConfirm"
-                                >确认</Button>
-                            </i-col>
-                        </Row>
-                    </i-col>
-                </Row>
-
-                <!-- 不可编辑 -->
-                <Row
-                    v-else
-                    class="header-show"
-                >
-                    <i-col
-                        span="6"
-                        class="header-show-text"
-                    >
-                        当前位置：
-                    </i-col>
-
-                    <i-col span="12">
-                        <Input
-                            :value="newVal.name"
-                            :readonly="true"
-                            @click.native="clickMapFitView"
-                        />
-                    </i-col>
-
-                    <i-col span="6"></i-col>
-                </Row>
-            </div>
-
-            <!-- 地图 -->
-            <transition>
-                <div
-                    v-if="showModal"
-                    id="DshCoordinatesMap"
-                    class="DshCoordinates-modal-map"
-                ></div>
-            </transition>
-
-            <!-- 实时坐标 -->
-            <div
-                ref="lnglatRef"
-                class="DshCoordinates-modal-lnglat"
-            ></div>
-        </Modal>
-    </div>
-
-    <!-- 单选模式 查看 -->
-    <div
-        v-else-if="!multipleMode && !canEdit"
-        class="DshCoordinates-show"
-    >
-        <!-- 有值 -->
-        <template v-if="!$isEmptyData(curVal)">
-            <!-- 高度自由时 -->
-            <div
-                v-if="isHeightAuto"
-                :class="{
-                    ...commonClass,
-                    'DshCoordinates-show-auto': true
-                }"
-            >
-                {{ showVal }}
-            </div>
-
-            <!-- 高度不自由（不换行） -->
-            <bri-tooltip
-                v-else
-                :content="showVal"
-                :transfer="true"
-            >
-                <div :class="{
-                    ...commonClass,
-                    'DshCoordinates-show-ellipsis': true
-                }">
-                    {{ showVal }}
-                </div>
-            </bri-tooltip>
-        </template>
-
-        <!-- 无值 -->
-        <div
-            v-else
-            :class="commonClass"
-        >
-            {{ emptyShowVal }}
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../mixins/controlMixin.js";
-
-    const plotStrokeColor = "#4575EF";
-    const plotFillColor = "#4575EF";
-    let polygonOpt = {
-        fillColor: plotFillColor,
-        fillOpacity: 0.4,
-        strokeColor: plotStrokeColor,
-        strokeWeight: 5
-    };
-    let lineOpt = {
-        strokeColor: plotStrokeColor,
-        strokeWeight: 5
-    };
-    let markerOpt = {};
-
-    export default {
-        name: "DshCoordinates",
-        mixins: [
-            controlMixin
-        ],
-        data () {
-            return {
-                showModal: false,
-                newVal: {
-                    name: "",
-                    lnglat: []
-                },
-                modalStyles: {
-                    height: document.body.clientHeight * 0.96 + "px",
-                    width: document.body.clientWidth * 0.96 + "px",
-                    top: "2%"
-                },
-                formData: {
-                    kind: "keyword",
-                    searchText: ""
-                },
-
-                // 地图相应控件
-                map: null,
-                placeSearch: null,
-                mouseTool: null,
-                marker: null, // 标记点
-                plot: null, // 标记图形
-                searchMessage: "" // 提示信息
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    _mapType: "2D", // "2D", "3D"
-                    _showType: "marker", // "marker", "multipleMarker", "polyline", "polygon", "rectangle"
-                    _icon: "ios-map-outline",
-
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            },
-            subType () {
-                return this.selfPropsObj._mapType;
-            },
-            showMode () {
-                return this.selfPropsObj._showType;
-            },
-
-            curVal: {
-                get () {
-                    return this.value[this.controlKey] || {
-                        name: "",
-                        lnglat: []
-                    };
-                },
-                set (val) {
-                    this.value[this.controlKey] = val;
-                    this.change();
-                }
-            },
-            showVal () {
-                return this.$isEmptyData(this.curVal)
-                    ? this.emptyShowVal
-                    : this.curVal.name;
-            }
-        },
-        created () {},
-        methods: {
-            // 打开窗体
-            clickInput () {
-                if (this.canEdit) {
-                    this.showModal = true;
-                    this.newVal = this.$deepCopy(this.curVal);
-                    this.getMap();
-                }
-            },
-            // 点击确认
-            clickConfirm () {
-                this.showModal = false;
-                this.curVal = this.newVal;
-            },
-            // 清除已选内容
-            clickModalClear () {
-                this.newVal = {
-                    name: "",
-                    lnglat: []
-                }; // 清除当前标记
-                this.handleRmoveMarker("default"); // 清除地图内标记
-                this.handleOpenDraw(); // 打开绘图功能
-            },
-            // 点击搜索
-            clickSearch () {
-                if (!this.formData.searchText) {
-                    this.searchMessage = "请输入搜索内容！";
-                    return;
-                }
-                if (this.formData.kind === "coordinate") {
-                    let lnglat = this.formData.searchText.split(",");
-                    let lng = Number(lnglat[0]);
-                    let lat = Number(lnglat[1]);
-                    if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-                        this.searchMessage = "请输入正确的经纬度坐标！";
-                    } else {
-                        lnglat = new AMap.LngLat(lng, lat);
-                        this.searchMessage = "";
-                        this.handleAddMarker([lnglat.lng, lnglat.lat], true, "default");
-                    }
-                } else {
-                    this.placeSearch.search(this.formData.searchText, this.handlePlaceSearchCallback);
-                }
-            },
-            // 地图自适应点
-            clickMapFitView (view = this.plot) {
-                this.map.setFitView(view);
-            },
-            getMap () {
-                this.$nextTick(() => {
-                    let lnglatRef = this.$refs.lnglatRef;
-                    this.map = new AMap.Map("DshCoordinatesMap", {
-                        rotateEnable: true,
-                        pitchEnable: true,
-                        zoom: this.propsObj._zoom || 12,
-                        pitch: 50,
-                        viewMode: this.subType,
-                        center: this.propsObj._center && this.propsObj._center.split(",").map(i => Number(i)) || undefined
-                    });
-
-                    // 滑动显示坐标点
-                    this.map.on("mouseover", function (e) {
-                        lnglatRef.style.display = "block";
-                    });
-                    this.map.on("mousemove", function (e) {
-                        lnglatRef.innerHTML = e.lnglat.toString();
-                        lnglatRef.style.top = (e.pixel.y + 120) + "px";
-                        lnglatRef.style.left = (e.pixel.x + 6) + "px";
-                    });
-                    this.map.on("mouseout", function (e) {
-                        lnglatRef.style.display = "none";
-                    });
-
-                    // 集成插件
-                    AMap.plugin(["AMap.PlaceSearch", "AMap.Scale", "AMap.ControlBar", "AMap.MouseTool"], this.handlePluginCallback);
-
-                });
-            },
-            handlePluginCallback () {
-                // 构造地点查询类
-                this.placeSearch = new AMap.PlaceSearch();
-                this.placeSearch.on("complete", this.handlePlaceSearchCallback);
-                this.placeSearch.on("error", this.handlePlaceSearchCallback);
-
-                // 加载集成工具
-                this.map.addControl(new AMap.Scale());
-                this.map.addControl(new AMap.ControlBar());
-                // this.map.addControl(new AMap.ToolBar());
-
-                // 监听draw事件可获取画好的覆盖物
-                this.mouseTool = new AMap.MouseTool(this.map);
-                this.mouseTool.on("draw", this.handleMouseToolCallback);
-                // 设置默认坐标
-                if (!this.$isEmptyData(this.newVal)) {
-                    this.handleAddMarker(this.newVal.lnglat, true);
-
-                    if (this.showMode === "multipleMarker") { // 多选打开绘图功能
-                        !this.disabled && this.handleOpenDraw();
-                    }
-                } else {
-                    !this.disabled && this.handleOpenDraw();
-                }
-            },
-            handleMouseToolCallback (e) {
-                if (e.obj.CLASS_NAME === "AMap.Marker") {
-                    if (this.showMode === "marker") {
-                        this.plot = e.obj;
-                        this.handleCloseDraw();
-                    } else if (this.showMode === "multipleMarker") {
-                        if (this.plot) {
-                            this.plot.push(e.obj);
-                        } else {
-                            this.plot = [e.obj];
-                        }
-                    }
-                    // 设置坐标
-                    let lnglat = e.obj.getPosition();
-                    this.newVal.lnglat.push([lnglat.lng, lnglat.lat]);
-                    this.getRegeoCode();
-
-                } else {
-                    this.plot = e.obj;
-                    // 设置坐标
-                    this.newVal.lnglat.push(...e.obj.getPath().map(lnglat => [lnglat.lng, lnglat.lat]));
-                    this.getRegeoCode();
-                    this.handleCloseDraw();
-                }
-            },
-            handlePlaceSearchCallback (result) {
-                if (result == "complete") {
-                    return;
-                }
-                if (result.poiList && result.poiList.pois && result.poiList.pois.length) {
-                    this.searchMessage = "";
-                    let poi = result.poiList.pois[0];
-                    this.handleAddMarker([poi.location.lng, poi.location.lat], true, "default");
-                    this.marker.setTitle([poi.name, poi.address].join(poi.name && poi.address ? "\n" : ""));
-                } else {
-                    this.searchMessage = "没有搜索到结果！";
-                }
-            },
-            // 打开绘图
-            handleOpenDraw (type = this.showMode) {
-                switch (type) {
-                case "marker": {
-                    this.mouseTool.marker(markerOpt);
-                    break;
-                }
-                case "multipleMarker": {
-                    this.mouseTool.marker(markerOpt);
-                    break;
-                }
-                case "polyline": {
-                    this.mouseTool.polyline(lineOpt);
-                    break;
-                }
-                case "polygon": {
-                    this.mouseTool.polygon(polygonOpt);
-                    break;
-                }
-                case "rectangle": {
-                    this.mouseTool.rectangle(polygonOpt);
-                    break;
-                }
-                case "circle": {
-                    this.mouseTool.circle(polygonOpt);
-                    break;
-                }
-                }
-            },
-            // 关闭绘图
-            handleCloseDraw () {
-                this.mouseTool.close();
-            },
-            // 添加图形
-            handleAddMarker (location, centerView = true, type = this.showMode) {
-                location = JSON.parse(JSON.stringify(location));
-                // 分类型添加
-                if (["polygon", "rectangle", "circle"].includes(type)) {
-                    // 图形类
-                    this.plot = new AMap.Polygon({
-                        ...polygonOpt,
-                        path: location
-                    });
-                    this.map.add(this.plot);
-                    centerView && this.map.setFitView(this.plot);// 视口自适应
-                } else if (["default"].includes(type)) {
-                    !this.marker && (this.marker = new AMap.Marker());
-                    this.marker.setPosition(location);
-                    this.marker.setMap(this.map);
-                    if (this.showMode === "marker") {
-                        this.handleRmoveMarker();
-                        this.handleCloseDraw();
-                        this.newVal.lnglat = [location];
-                        this.getRegeoCode();
-                    } else if (this.showMode === "multipleMarker") {
-                        this.newVal.lnglat.push(location);
-                        this.getRegeoCode();
-                    }
-                    centerView && this.map.setFitView(this.marker);
-                } else if (["polyline"].includes(type)) {
-                    this.plot = new AMap.Polyline({
-                        ...polygonOpt,
-                        path: location
-                    });
-                    this.map.add(this.plot);
-                    centerView && this.map.setFitView(this.plot);// 视口自适应
-                } else if (["multipleMarker", "marker"].includes(type)) {
-                    this.plot = location.map(position => {
-                        return new AMap.Marker({
-                            map: this.map,
-                            position: position
-                        });
-                    });
-                    centerView && this.map.setFitView(this.plot);
-                }
-            },
-            // 移除图形
-            handleRmoveMarker (type = this.showMode) {
-                if (["default"].includes(type)) {
-                    this.marker && this.map.remove(this.marker);
-                    this.plot && this.map.remove(this.plot);
-                } else {
-                    this.plot && this.map.remove(this.plot);
-                }
-            },
-            // 获取逆地理编码
-            getRegeoCode (value, scuessFun) {
-                let params = {
-                    key: window.config.amapKey,
-                    location: this.newVal.lnglat[0],
-                    radius: 1000,
-                    extensions: "base",
-                    batch: false,
-                    roadlevel: 1
-                };
-
-                let paramStr = "";
-                for (let attr in params) {
-                    paramStr += attr + "=" + params[attr] + "&";
-                }
-
-                fetch("http://restapi.amap.com/v3/geocode/regeo?" + paramStr)
-                    .then(res => res.json())
-                    .then(response => {
-                        if (response.status === "1" && response.regeocode) {
-                            let address = response.regeocode.formatted_address;
-                            this.newVal.name = address;
-                        }
-                });
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    @import url("../control.less");
-
-    .DshCoordinates {
-        #control-show();
-
-        &-modal {
-            &-header {
-                padding: 5px 0px;
-
-                .header {
-                    &-edit {
-                        &-message {
-                            position: absolute;
-                            color: red;
-                            font-size: 12px;
-                            bottom: -16px;
-                            left: 0px;
-                        }
-
-                        &-text {
-                            font-size: @textSize;
-                            line-height: 18px;
-                        }
-
-                        &-row {
-                            margin-top: 5px;
-                        }
-                    }
-
-                    &-show {
-                        &-text {
-                            text-align: right;
-                            .dsh-padding-top10();
-                        }
-                    }
-                }
-            }
-
-            &-map {
-                width: 100%;
-                height: 100%;
-            }
-
-            &-lnglat {
-                padding: 5px 10px;
-                background:#fff;
-                display: none;
-                position:absolute;
-            }
-
-            .ivu-modal-content {
-                overflow: hidden;
-                height: 100%;
-
-                .ivu-modal-body {
-                    padding: 0px;
-                    height: 100%;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <!-- 单选模式 编辑 -->
+    <div
+        v-if="!multipleMode && canEdit"
+        class="DshCoordinates"
+    >
+        <bri-tooltip
+            :content="showVal"
+            :transfer="true"
+        >
+            <!-- 编辑 -->
+            <dsh-control-input
+                :class="commonClass"
+                :value="curVal"
+                :disabled="disabled"
+                :propsObj="selfPropsObj"
+                @clear="clickClear"
+                @click.native="clickInput"
+            ></dsh-control-input>
+        </bri-tooltip>
+
+        <!-- 模态框 -->
+        <Modal
+            class="DshCoordinates-modal"
+            v-model="showModal"
+            :styles="modalStyles"
+            :footer-hide="true"
+        >
+            <!-- 顶部 -->
+            <div
+                slot="header"
+                class="DshCoordinates-modal-header"
+            >
+                <!-- 可编辑 -->
+                <Row
+                    v-if="!disabled"
+                    class="header-edit"
+                    type="flex"
+                    justify="center"
+                    align="bottom"
+                >
+                    <i-col span="8">
+                        <radio-group v-model="formData.kind">
+                            <Radio label="keyword">按关键字搜索</Radio>
+                            <Radio label="coordinate">按坐标搜索</Radio>
+                        </radio-group>
+
+                        <Row class="header-edit-row">
+                            <i-col span="16">
+                                <Input
+                                    v-model="formData.searchText"
+                                    placeholder="请输入..."
+                                    :clearable="true"
+                                    @on-enter="clickSearch"
+                                />
+                                <span class="header-edit-message">{{ searchMessage }}</span>
+                            </i-col>
+
+                            <i-col span="8">
+                                <Button
+                                    type="primary"
+                                    @click="clickSearch"
+                                >搜索</Button>
+                            </i-col>
+                        </Row>
+                    </i-col>
+
+                    <i-col span="8">
+                        <div class="header-edit-text">坐标获取结果</div>
+                        <Row class="header-edit-row">
+                            <i-col span="16">
+                                <Input
+                                    :value="newVal.name"
+                                    :readonly="true"
+                                    :clearable="true"
+                                    @on-clear="clickModalClear"
+                                    @click.native="clickMapFitView"
+                                />
+                            </i-col>
+
+                            <i-col span="8">
+                                <Button
+                                    type="primary"
+                                    @click="clickConfirm"
+                                >确认</Button>
+                            </i-col>
+                        </Row>
+                    </i-col>
+                </Row>
+
+                <!-- 不可编辑 -->
+                <Row
+                    v-else
+                    class="header-show"
+                >
+                    <i-col
+                        span="6"
+                        class="header-show-text"
+                    >
+                        当前位置：
+                    </i-col>
+
+                    <i-col span="12">
+                        <Input
+                            :value="newVal.name"
+                            :readonly="true"
+                            @click.native="clickMapFitView"
+                        />
+                    </i-col>
+
+                    <i-col span="6"></i-col>
+                </Row>
+            </div>
+
+            <!-- 地图 -->
+            <transition>
+                <div
+                    v-if="showModal"
+                    id="DshCoordinatesMap"
+                    class="DshCoordinates-modal-map"
+                ></div>
+            </transition>
+
+            <!-- 实时坐标 -->
+            <div
+                ref="lnglatRef"
+                class="DshCoordinates-modal-lnglat"
+            ></div>
+        </Modal>
+    </div>
+
+    <!-- 单选模式 查看 -->
+    <div
+        v-else-if="!multipleMode && !canEdit"
+        class="DshCoordinates-show"
+    >
+        <!-- 有值 -->
+        <template v-if="!$isEmptyData(curVal)">
+            <!-- 高度自由时 -->
+            <div
+                v-if="isHeightAuto"
+                :class="{
+                    ...commonClass,
+                    'DshCoordinates-show-auto': true
+                }"
+            >
+                {{ showVal }}
+            </div>
+
+            <!-- 高度不自由（不换行） -->
+            <bri-tooltip
+                v-else
+                :content="showVal"
+                :transfer="true"
+            >
+                <div :class="{
+                    ...commonClass,
+                    'DshCoordinates-show-ellipsis': true
+                }">
+                    {{ showVal }}
+                </div>
+            </bri-tooltip>
+        </template>
+
+        <!-- 无值 -->
+        <div
+            v-else
+            :class="commonClass"
+        >
+            {{ emptyShowVal }}
+        </div>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../mixins/controlMixin.js";
+
+    const plotStrokeColor = "#4575EF";
+    const plotFillColor = "#4575EF";
+    let polygonOpt = {
+        fillColor: plotFillColor,
+        fillOpacity: 0.4,
+        strokeColor: plotStrokeColor,
+        strokeWeight: 5
+    };
+    let lineOpt = {
+        strokeColor: plotStrokeColor,
+        strokeWeight: 5
+    };
+    let markerOpt = {};
+
+    export default {
+        name: "DshCoordinates",
+        mixins: [
+            controlMixin
+        ],
+        data () {
+            return {
+                showModal: false,
+                newVal: {
+                    name: "",
+                    lnglat: []
+                },
+                modalStyles: {
+                    height: document.body.clientHeight * 0.96 + "px",
+                    width: document.body.clientWidth * 0.96 + "px",
+                    top: "2%"
+                },
+                formData: {
+                    kind: "keyword",
+                    searchText: ""
+                },
+
+                // 地图相应控件
+                map: null,
+                placeSearch: null,
+                mouseTool: null,
+                marker: null, // 标记点
+                plot: null, // 标记图形
+                searchMessage: "" // 提示信息
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _mapType: "2D", // "2D", "3D"
+                    _showType: "marker", // "marker", "multipleMarker", "polyline", "polygon", "rectangle"
+                    _icon: "ios-map-outline",
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            subType () {
+                return this.selfPropsObj._mapType;
+            },
+            showMode () {
+                return this.selfPropsObj._showType;
+            },
+
+            curVal: {
+                get () {
+                    return this.value[this.controlKey] || {
+                        name: "",
+                        lnglat: []
+                    };
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
+                    this.change();
+                }
+            },
+            showVal () {
+                return this.$isEmptyData(this.curVal)
+                    ? this.emptyShowVal
+                    : this.curVal.name;
+            }
+        },
+        created () {},
+        methods: {
+            // 打开窗体
+            clickInput () {
+                if (this.canEdit) {
+                    this.showModal = true;
+                    this.newVal = this.$deepCopy(this.curVal);
+                    this.getMap();
+                }
+            },
+            // 点击确认
+            clickConfirm () {
+                this.showModal = false;
+                this.curVal = this.newVal;
+            },
+            // 清除已选内容
+            clickModalClear () {
+                this.newVal = {
+                    name: "",
+                    lnglat: []
+                }; // 清除当前标记
+                this.handleRmoveMarker("default"); // 清除地图内标记
+                this.handleOpenDraw(); // 打开绘图功能
+            },
+            // 点击搜索
+            clickSearch () {
+                if (!this.formData.searchText) {
+                    this.searchMessage = "请输入搜索内容！";
+                    return;
+                }
+                if (this.formData.kind === "coordinate") {
+                    let lnglat = this.formData.searchText.split(",");
+                    let lng = Number(lnglat[0]);
+                    let lat = Number(lnglat[1]);
+                    if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+                        this.searchMessage = "请输入正确的经纬度坐标！";
+                    } else {
+                        lnglat = new AMap.LngLat(lng, lat);
+                        this.searchMessage = "";
+                        this.handleAddMarker([lnglat.lng, lnglat.lat], true, "default");
+                    }
+                } else {
+                    this.placeSearch.search(this.formData.searchText, this.handlePlaceSearchCallback);
+                }
+            },
+            // 地图自适应点
+            clickMapFitView (view = this.plot) {
+                this.map.setFitView(view);
+            },
+            getMap () {
+                this.$nextTick(() => {
+                    let lnglatRef = this.$refs.lnglatRef;
+                    this.map = new AMap.Map("DshCoordinatesMap", {
+                        rotateEnable: true,
+                        pitchEnable: true,
+                        zoom: this.propsObj._zoom || 12,
+                        pitch: 50,
+                        viewMode: this.subType,
+                        center: this.propsObj._center && this.propsObj._center.split(",").map(i => Number(i)) || undefined
+                    });
+
+                    // 滑动显示坐标点
+                    this.map.on("mouseover", function (e) {
+                        lnglatRef.style.display = "block";
+                    });
+                    this.map.on("mousemove", function (e) {
+                        lnglatRef.innerHTML = e.lnglat.toString();
+                        lnglatRef.style.top = (e.pixel.y + 120) + "px";
+                        lnglatRef.style.left = (e.pixel.x + 6) + "px";
+                    });
+                    this.map.on("mouseout", function (e) {
+                        lnglatRef.style.display = "none";
+                    });
+
+                    // 集成插件
+                    AMap.plugin(["AMap.PlaceSearch", "AMap.Scale", "AMap.ControlBar", "AMap.MouseTool"], this.handlePluginCallback);
+
+                });
+            },
+            handlePluginCallback () {
+                // 构造地点查询类
+                this.placeSearch = new AMap.PlaceSearch();
+                this.placeSearch.on("complete", this.handlePlaceSearchCallback);
+                this.placeSearch.on("error", this.handlePlaceSearchCallback);
+
+                // 加载集成工具
+                this.map.addControl(new AMap.Scale());
+                this.map.addControl(new AMap.ControlBar());
+                // this.map.addControl(new AMap.ToolBar());
+
+                // 监听draw事件可获取画好的覆盖物
+                this.mouseTool = new AMap.MouseTool(this.map);
+                this.mouseTool.on("draw", this.handleMouseToolCallback);
+                // 设置默认坐标
+                if (!this.$isEmptyData(this.newVal)) {
+                    this.handleAddMarker(this.newVal.lnglat, true);
+
+                    if (this.showMode === "multipleMarker") { // 多选打开绘图功能
+                        !this.disabled && this.handleOpenDraw();
+                    }
+                } else {
+                    !this.disabled && this.handleOpenDraw();
+                }
+            },
+            handleMouseToolCallback (e) {
+                if (e.obj.CLASS_NAME === "AMap.Marker") {
+                    if (this.showMode === "marker") {
+                        this.plot = e.obj;
+                        this.handleCloseDraw();
+                    } else if (this.showMode === "multipleMarker") {
+                        if (this.plot) {
+                            this.plot.push(e.obj);
+                        } else {
+                            this.plot = [e.obj];
+                        }
+                    }
+                    // 设置坐标
+                    let lnglat = e.obj.getPosition();
+                    this.newVal.lnglat.push([lnglat.lng, lnglat.lat]);
+                    this.getRegeoCode();
+
+                } else {
+                    this.plot = e.obj;
+                    // 设置坐标
+                    this.newVal.lnglat.push(...e.obj.getPath().map(lnglat => [lnglat.lng, lnglat.lat]));
+                    this.getRegeoCode();
+                    this.handleCloseDraw();
+                }
+            },
+            handlePlaceSearchCallback (result) {
+                if (result == "complete") {
+                    return;
+                }
+                if (result.poiList && result.poiList.pois && result.poiList.pois.length) {
+                    this.searchMessage = "";
+                    let poi = result.poiList.pois[0];
+                    this.handleAddMarker([poi.location.lng, poi.location.lat], true, "default");
+                    this.marker.setTitle([poi.name, poi.address].join(poi.name && poi.address ? "\n" : ""));
+                } else {
+                    this.searchMessage = "没有搜索到结果！";
+                }
+            },
+            // 打开绘图
+            handleOpenDraw (type = this.showMode) {
+                switch (type) {
+                case "marker": {
+                    this.mouseTool.marker(markerOpt);
+                    break;
+                }
+                case "multipleMarker": {
+                    this.mouseTool.marker(markerOpt);
+                    break;
+                }
+                case "polyline": {
+                    this.mouseTool.polyline(lineOpt);
+                    break;
+                }
+                case "polygon": {
+                    this.mouseTool.polygon(polygonOpt);
+                    break;
+                }
+                case "rectangle": {
+                    this.mouseTool.rectangle(polygonOpt);
+                    break;
+                }
+                case "circle": {
+                    this.mouseTool.circle(polygonOpt);
+                    break;
+                }
+                }
+            },
+            // 关闭绘图
+            handleCloseDraw () {
+                this.mouseTool.close();
+            },
+            // 添加图形
+            handleAddMarker (location, centerView = true, type = this.showMode) {
+                location = JSON.parse(JSON.stringify(location));
+                // 分类型添加
+                if (["polygon", "rectangle", "circle"].includes(type)) {
+                    // 图形类
+                    this.plot = new AMap.Polygon({
+                        ...polygonOpt,
+                        path: location
+                    });
+                    this.map.add(this.plot);
+                    centerView && this.map.setFitView(this.plot);// 视口自适应
+                } else if (["default"].includes(type)) {
+                    !this.marker && (this.marker = new AMap.Marker());
+                    this.marker.setPosition(location);
+                    this.marker.setMap(this.map);
+                    if (this.showMode === "marker") {
+                        this.handleRmoveMarker();
+                        this.handleCloseDraw();
+                        this.newVal.lnglat = [location];
+                        this.getRegeoCode();
+                    } else if (this.showMode === "multipleMarker") {
+                        this.newVal.lnglat.push(location);
+                        this.getRegeoCode();
+                    }
+                    centerView && this.map.setFitView(this.marker);
+                } else if (["polyline"].includes(type)) {
+                    this.plot = new AMap.Polyline({
+                        ...polygonOpt,
+                        path: location
+                    });
+                    this.map.add(this.plot);
+                    centerView && this.map.setFitView(this.plot);// 视口自适应
+                } else if (["multipleMarker", "marker"].includes(type)) {
+                    this.plot = location.map(position => {
+                        return new AMap.Marker({
+                            map: this.map,
+                            position: position
+                        });
+                    });
+                    centerView && this.map.setFitView(this.plot);
+                }
+            },
+            // 移除图形
+            handleRmoveMarker (type = this.showMode) {
+                if (["default"].includes(type)) {
+                    this.marker && this.map.remove(this.marker);
+                    this.plot && this.map.remove(this.plot);
+                } else {
+                    this.plot && this.map.remove(this.plot);
+                }
+            },
+            // 获取逆地理编码
+            getRegeoCode (value, scuessFun) {
+                let params = {
+                    key: window.config.amapKey,
+                    location: this.newVal.lnglat[0],
+                    radius: 1000,
+                    extensions: "base",
+                    batch: false,
+                    roadlevel: 1
+                };
+
+                let paramStr = "";
+                for (let attr in params) {
+                    paramStr += attr + "=" + params[attr] + "&";
+                }
+
+                fetch("http://restapi.amap.com/v3/geocode/regeo?" + paramStr)
+                    .then(res => res.json())
+                    .then(response => {
+                        if (response.status === "1" && response.regeocode) {
+                            let address = response.regeocode.formatted_address;
+                            this.newVal.name = address;
+                        }
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    @import url("../control.less");
+
+    .DshCoordinates {
+        #control-show();
+
+        &-modal {
+            &-header {
+                padding: 5px 0px;
+
+                .header {
+                    &-edit {
+                        &-message {
+                            position: absolute;
+                            color: red;
+                            font-size: 12px;
+                            bottom: -16px;
+                            left: 0px;
+                        }
+
+                        &-text {
+                            font-size: @textSize;
+                            line-height: 18px;
+                        }
+
+                        &-row {
+                            margin-top: 5px;
+                        }
+                    }
+
+                    &-show {
+                        &-text {
+                            text-align: right;
+                            .dsh-padding-top10();
+                        }
+                    }
+                }
+            }
+
+            &-map {
+                width: 100%;
+                height: 100%;
+            }
+
+            &-lnglat {
+                padding: 5px 10px;
+                background:#fff;
+                display: none;
+                position:absolute;
+            }
+
+            .ivu-modal-content {
+                overflow: hidden;
+                height: 100%;
+
+                .ivu-modal-body {
+                    padding: 0px;
+                    height: 100%;
+                }
+            }
+        }
+    }
+</style>