bri-components 1.6.18 → 1.6.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.6.18",
+    "version": "1.6.19",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -30,11 +30,16 @@
         "lib:prod": "webpack --config build/webpack.lib.prod.config.js"
     },
     "dependencies": {
+        "@turf/turf": "^7.4.0",
         "ali-oss": "^6.13.1",
         "axios": "^0.23.0",
-        "bri-datas": "^1.5.4",
+        "bri-datas": "^1.5.22",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
+        "leaflet": "^1.9.4",
+        "mars2d": "^3.4.2",
+        "mars3d": "^3.11.5",
+        "mars3d-cesium": "^1.143.0",
         "minio": "7.1.0",
         "stream": "^0.0.2",
         "video.js": "^8.23.3",

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

@@ -1,44 +1,18 @@
 <template>
     <!-- 单选模式 编辑 -->
-    <div
-        v-if="!multipleMode && canEdit && propsObj._enterType !== 'calculate'"
-        class="DshCoordinates"
-    >
-        <bri-tooltip
-            :content="showVal"
-            :transfer="true"
-        >
+    <div v-if="!multipleMode && canEdit && propsObj._enterType !== 'calculate'" 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>
+            <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"
-        >
+        <Modal class="DshCoordinates-modal" v-model="showModal" :styles="modalStyles" :footer-hide="true">
             <!-- 顶部 -->
-            <div
-                slot="header"
-                class="DshCoordinates-modal-header"
-            >
+            <div slot="header" class="DshCoordinates-modal-header">
                 <!-- 可编辑 -->
-                <Row
-                    v-if="!disabled"
-                    class="header-edit"
-                    type="flex"
-                    justify="center"
-                    align="bottom"
-                >
+                <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>
@@ -47,20 +21,13 @@
 
                         <Row class="header-edit-row">
                             <i-col span="16">
-                                <Input
-                                    v-model="formData.searchText"
-                                    placeholder="请输入..."
-                                    :clearable="true"
-                                    @on-enter="clickSearch"
-                                />
+                                <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>
+                                <Button type="primary" @click="clickSearch">搜索</Button>
                             </i-col>
                         </Row>
                     </i-col>
@@ -69,43 +36,25 @@
                         <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"
-                                />
+                                <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>
+                                <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"
-                    >
+                <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"
-                        />
+                        <Input :value="newVal.name" :readonly="true" @click.native="clickMapFitView" />
                     </i-col>
 
                     <i-col span="6"></i-col>
@@ -114,45 +63,28 @@
 
             <!-- 地图 -->
             <transition>
-                <div
-                    v-if="showModal"
-                    id="DshCoordinatesMap"
-                    class="DshCoordinates-modal-map"
-                ></div>
+                <div v-if="showModal" id="DshCoordinatesMap" class="DshCoordinates-modal-map"></div>
             </transition>
 
             <!-- 实时坐标 -->
-            <div
-                ref="lnglatRef"
-                class="DshCoordinates-modal-lnglat"
-            ></div>
+            <div ref="lnglatRef" class="DshCoordinates-modal-lnglat"></div>
         </Modal>
     </div>
 
     <!-- 单选模式 查看 -->
-    <div
-        v-else-if="!multipleMode && !canEdit"
-        class="DshCoordinates-show"
-    >
+    <div v-else-if="!multipleMode && !canEdit" class="DshCoordinates-show">
         <!-- 有值 -->
         <template v-if="!$isEmptyData(curVal)">
             <!-- 高度自由时 -->
-            <div
-                v-if="isHeightAuto"
-                :class="{
-                    ...commonClass,
-                    'DshCoordinates-show-auto': true
-                }"
-            >
+            <div v-if="isHeightAuto" :class="{
+                ...commonClass,
+                'DshCoordinates-show-auto': true
+            }">
                 {{ showVal }}
             </div>
 
             <!-- 高度不自由（不换行） -->
-            <bri-tooltip
-                v-else
-                :content="showVal"
-                :transfer="true"
-            >
+            <bri-tooltip v-else :content="showVal" :transfer="true">
                 <div :class="{
                     ...commonClass,
                     'DshCoordinates-show-ellipsis': true
@@ -163,38 +95,57 @@
         </template>
 
         <!-- 无值 -->
-        <div
-            v-else
-            :class="commonClass"
-        >
+        <div v-else :class="commonClass">
             {{ emptyShowVal }}
         </div>
     </div>
 
-    <div
-        v-else-if="propsObj._enterType === 'calculate'"
-        class="DshCoordinates-show"
-    >
-        <span :class="{'nodata': !showVal}">{{ showVal || '暂无内容' }}</span>
+    <div v-else-if="propsObj._enterType === 'calculate'" class="DshCoordinates-show">
+        <span :class="{ 'nodata': !showVal }">{{ showVal || '暂无内容' }}</span>
     </div>
 </template>
 
 <script>
+    import axios from "axios";
     import controlMixin from "../mixins/controlMixin.js";
-
-    const plotStrokeColor = "#4575EF";
-    const plotFillColor = "#4575EF";
-    let polygonOpt = {
-        fillColor: plotFillColor,
+    import "leaflet/dist/leaflet.css";
+    import "mars2d/mars2d.css";
+    import * as mars2d from "mars2d";
+    import "mars3d/mars3d.css";
+    import * as mars3d from "mars3d";
+
+    const plotColor = "#4575EF";
+    const polygonStyle = {
+        fillColor: plotColor,
         fillOpacity: 0.4,
-        strokeColor: plotStrokeColor,
-        strokeWeight: 5
+        outlineColor: plotColor,
+        outlineWidth: 5
+    };
+    const polygonStyle3d = {
+        color: plotColor,
+        opacity: 0.4,
+        outline: true,
+        outlineColor: plotColor,
+        outlineWidth: 5
+    };
+    const polylineStyle = {
+        color: plotColor,
+        width: 5
     };
-    let lineOpt = {
-        strokeColor: plotStrokeColor,
-        strokeWeight: 5
+    const markerStyle = {
+        image: require("./mark_bs.png"),
+        width: 19,
+        height: 32,
+        horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
+        verticalOrigin: mars2d.VerticalOrigin.BOTTOM
+    };
+    const markerStyle3d = {
+        image: require("./mark_bs.png"),
+        width: 19,
+        height: 32,
+        horizontalOrigin: mars3d.Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM
     };
-    let markerOpt = {};
 
     export default {
         name: "DshCoordinates",
@@ -220,10 +171,11 @@
 
                 // 地图相应控件
                 map: null,
-                placeSearch: null,
-                mouseTool: null,
+                mapResizeObserver: null, // 3D地图：监听容器尺寸变化，同步 Cesium canvas 尺寸
+                queryPOI: null, // POI查询/逆地理编码工具
                 marker: null, // 标记点
                 plot: null, // 标记图形
+                suppressDrawCreated: false, // 主动调用 stopDraw 期间，屏蔽 mars2d 内部可能重放的 drawCreated 事件
                 searchMessage: "" // 提示信息
             };
         },
@@ -244,6 +196,12 @@
             showMode () {
                 return this.selfPropsObj._showType;
             },
+            is3d () {
+                return this.subType === "3D";
+            },
+            mapEngine () {
+                return this.is3d ? mars3d : mars2d;
+            },
 
             curVal: {
                 get () {
@@ -276,7 +234,9 @@
             // 点击确认
             clickConfirm () {
                 this.showModal = false;
-                this.curVal = this.newVal;
+                // 标记坐标系：getMap 里 mars2d.Map/mars3d.Map 均未显式配置 chinaCRS，默认按WGS84运作，
+                // 高德瓦片只是被自动纠偏对齐到这个WGS84坐标网格上显示，这里选点产出的坐标实际是WGS84
+                this.curVal = { ...this.newVal, crs: "WGS84" };
             },
             // 清除已选内容
             clickModalClear () {
@@ -284,7 +244,7 @@
                     name: "",
                     lnglat: []
                 }; // 清除当前标记
-                this.handleRmoveMarker("default"); // 清除地图内标记
+                this.handleRemoveMarker(); // 清除地图内标记
                 this.handleOpenDraw(); // 打开绘图功能
             },
             // 点击搜索
@@ -300,288 +260,510 @@
                     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");
+                        this.handleAddMarker(lnglat);
                     }
                 } else {
-                    this.placeSearch.search(this.formData.searchText, this.handlePlaceSearchCallback);
+                    this.queryPOI.queryText({ text: this.formData.searchText }).then(result => {
+                        if (result && result.list && result.list.length) {
+                            this.searchMessage = "";
+                            let poi = result.list[0];
+                            this.handleAddMarker([poi.lng, poi.lat], true, poi.name);
+                        } else {
+                            this.searchMessage = "没有搜索到结果！";
+                        }
+                    }).catch((err) => {
+                        console.log(err);
+                        this.searchMessage = "搜索失败，请稍后重试！";
+                    });
                 }
             },
             // 地图自适应点
-            clickMapFitView (view = this.plot) {
-                this.map.setFitView(view);
+            clickMapFitView () {
+                if (!this.map.graphicLayer.getGraphics().length) {
+                    return;
+                }
+                // 绘制中还没落点的预览图形也算在 graphicLayer 里，所以这个按钮点到时绘制会话往往还是打开的；
+                // flyTo 平移地图期间如果绘制会话还在监听鼠标位置，结束时可能把和当前鼠标位置无关的过期预览
+                // 当成一次真实落点重放出来，多绘制出一个没点过的点位。这里借用 graphicLayer 上已有的
+                // isDrawing 状态，flyTo 前先用验证过安全的 handleCloseDraw 暂停绘制，动画结束后再按原状态恢复
+                let wasDrawing = this.map.graphicLayer.isDrawing;
+                if (wasDrawing) {
+                    this.handleCloseDraw();
+                }
+                // rectangle 需要落两个角点才算绘制完成，若只落了一个角就点了这个按钮，handleCloseDraw
+                // 会把这个还没被标记为"已落点"的预览图形当无效图形清掉（见 handleDrawCreated 里的说明），
+                // 图层因此变空。对空图层调用 graphicLayer.flyTo() 找不到定位目标，会飞向一个固定的
+                // 兜底坐标，表现为视角划过地球背面——这里直接跳过定位
+                if (!this.map.graphicLayer.getGraphics().length) {
+                    if (wasDrawing) {
+                        this.$nextTick(() => {
+                            !this.disabled && this.handleOpenDraw();
+                        });
+                    }
+                    return;
+                }
+                if (this.is3d && this.showMode === "rectangle" && this.newVal.lnglat.length > 1) {
+                    let lngs = this.newVal.lnglat.map(position => position[0]);
+                    let lats = this.newVal.lnglat.map(position => position[1]);
+                    this.map.flyToExtent({
+                        xmin: Math.min(...lngs),
+                        xmax: Math.max(...lngs),
+                        ymin: Math.min(...lats),
+                        ymax: Math.max(...lats)
+                    });
+                } else {
+                    this.map.graphicLayer.flyTo();
+                }
+                if (wasDrawing) {
+                    this.$nextTick(() => {
+                        !this.disabled && this.handleOpenDraw();
+                    });
+                }
             },
             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
+                    // modal 每次打开都会重新走这里创建地图，mars2d(Leaflet)实例很轻，销毁重建没有代价；
+                    // mars3d(Cesium)实例持有 WebGL 上下文，浏览器对同时存活的上下文数量有上限（约16个），
+                    // 不主动销毁旧实例会导致反复打开关闭该弹窗后 3D 地图渲染失效
+                    if (this.map) {
+                        this.map.destroy && this.map.destroy();
+                        this.map = null;
+                    }
+                    if (this.mapResizeObserver) {
+                        this.mapResizeObserver.disconnect();
+                        this.mapResizeObserver = null;
+                    }
+
+                    // Modal 内部弹窗主体用的是 v-show（配合过渡动画），不是 v-if：DshCoordinates 一挂载，
+                    // .ivu-modal-header/.ivu-modal-body 就已经创建好了，只是 display:none 隐藏着；只有第一次
+                    // 打开时，它们才第一次真正从隐藏切到可见，浏览器要为这一整块内容做首次布局+绘制+合成，
+                    // 而地图容器是我们自己用 v-if 现建的，恰好在同一帧一起创建、开始绘制瓦片，容易撞上这个
+                    // "外层容器刚显示、绘制还没稳定"的时机，表现为地图瓦片的合成图层盖住了 header（header 自身
+                    // 布局和交互都正常，只是绘制没跟上）。关闭重开时 .ivu-modal-content 并未被销毁，浏览器早已
+                    // 对它做过一次布局绘制，只是简单切换 display，不会再撞上这个时机。这里用两次
+                    // requestAnimationFrame，等浏览器至少完成一次真实的显示帧之后再创建地图，避开这个绘制竞态
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                            if (!this.showModal) {
+                                return;
+                            }
+                            this.createMap();
+                        });
+                    });
+                });
+            },
+            // 实际创建地图实例（详见 getMap 里等待首帧绘制稳定的说明）
+            createMap () {
+                let lnglatRef = this.$refs.lnglatRef;
+                let center = this.propsObj._center && this.propsObj._center.split(",").map(i => Number(i)) || [];
+                let lng = center[0] || 116.396852;
+                let lat = center[1] || 39.914748;
+
+                if (this.is3d) {
+                    this.map = new mars3d.Map("DshCoordinatesMap", {
+                        scene: {
+                            // mars3d 没有 zoom 层级概念，用相机高度(alt)表现，这里按 Web墨卡托瓦片金字塔的
+                            // 层级-分辨率换算关系，把 2D 的 zoom 近似转换成一个可用的相机高度
+                            center: {
+                                lng,
+                                lat,
+                                alt: 591657550.5 / Math.pow(2, (this.propsObj._zoom || 12) - 1)
+                            }
+                        },
+                        basemaps: [{ name: "高德地图", type: "gaode", layer: "vec", show: true }],
+                        control: {
+                            compass: { style: { top: "10px", left: "5px" } }
+                        }
                     });
 
-                    // 滑动显示坐标点
-                    this.map.on("mouseover", function (e) {
+                    // 滑动显示实时坐标：不用 mars3d 的 mouseMove 事件（负载字段未有文档确认），
+                    // 也不用 Cesium 原生 screenSpaceEventHandler（会覆盖 mars3d 内部绘制预览用的鼠标监听），
+                    // 改用原生 DOM 事件 + 标准 Cesium 拾取 API 换算经纬度，不影响绘制交互
+                    this.map.scene.canvas.addEventListener("mousemove", e => {
+                        let windowPosition = new mars3d.Cesium.Cartesian2(e.offsetX, e.offsetY);
+                        let cartesian = this.map.scene.pickPosition(windowPosition) ||
+                            this.map.scene.camera.pickEllipsoid(windowPosition, this.map.scene.globe.ellipsoid);
+                        if (!cartesian) {
+                            lnglatRef.style.display = "none";
+                            return;
+                        }
+                        let [mLng, mLat] = mars3d.PointTrans.cartesian2lonlat(cartesian, true);
                         lnglatRef.style.display = "block";
+                        lnglatRef.innerHTML = mLng.toFixed(6) + ", " + mLat.toFixed(6);
+                        lnglatRef.style.top = (e.offsetY + 20) + "px";
+                        lnglatRef.style.left = (e.offsetX + 6) + "px";
+                    });
+                    this.map.scene.canvas.addEventListener("mouseout", () => {
+                        lnglatRef.style.display = "none";
+                    });
+
+                    // Cesium 只在创建时按容器当时的尺寸初始化 canvas，之后仅监听 window resize 事件自动重算；
+                    // 弹窗展开动画期间容器尺寸变化不会触发 window resize，导致 canvas 一直停留在创建时的
+                    // 初始尺寸（未布局完成时退化为浏览器 canvas 默认的 300x150）。用 ResizeObserver 监听
+                    // 容器本身的尺寸变化，让 canvas 尺寸始终跟随 #DshCoordinatesMap 容器
+                    this.mapResizeObserver = new ResizeObserver(() => {
+                        if (!this.map) {
+                            return;
+                        }
+                        this.map.viewer.resize();
+                        this.map.scene.requestRender();
+                    });
+                    this.mapResizeObserver.observe(this.map.container);
+                } else {
+                    this.map = new mars2d.Map("DshCoordinatesMap", {
+                        zoom: this.propsObj._zoom || 12, // 地图层级
+                        center: { lng, lat },
+                        basemaps: [{ name: "高德地图", type: "gaode", layer: "vec", show: true }]
                     });
+
+                    // 滑动显示实时坐标
                     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";
+                        lnglatRef.style.display = "block";
+                        lnglatRef.innerHTML = e.latlng.lng.toFixed(6) + ", " + e.latlng.lat.toFixed(6);
+                        lnglatRef.style.top = (e.containerPoint.y + 20) + "px";
+                        lnglatRef.style.left = (e.containerPoint.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);
+                    // Leaflet 同样只在创建时按容器当时的尺寸初始化地图，之后不会自动感知容器尺寸变化；
+                    // 弹窗打开的过渡/transfer 到 body 等过程可能让 header 实际高度晚于地图初始化才稳定，
+                    // 地图会按当时（header 尚未占位）的容器尺寸铺满，覆盖到 header 区域。用 ResizeObserver
+                    // 监听容器尺寸变化，调用 invalidateSize 让地图尺寸始终跟随 #DshCoordinatesMap 容器
+                    this.mapResizeObserver = new ResizeObserver(() => {
+                        if (!this.map) {
+                            return;
+                        }
+                        this.map.invalidateSize();
+                    });
+                    this.mapResizeObserver.observe(this.map.container);
+                }
 
+                // 构造POI查询/逆地理编码工具
+                this.queryPOI = new this.mapEngine.query.QueryPOI({
+                    service: "tdt",
+                    key: "0050eb1a5c837128f694a9022055fa54"
                 });
-            },
-            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();
-                    }
+                // 设置默认坐标 / 打开绘图功能
+                if (!this.$isEmptyData(this.newVal)) {
+                    this.handleRestoreValue();
                 } 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();
-
+            // 还原已保存的坐标/图形数据
+            handleRestoreValue () {
+                // 老数据未标记crs时按GCJ02处理并转换：地图本身按WGS84运作（见clickConfirm里的说明），
+                // 不转换会导致高德选点产生的老数据回显时出现同城市内小范围、方向固定的偏移
+                let lnglat = this.newVal.lnglat.map(position => this.toWgs84(position, this.newVal.crs));
+                if (this.showMode === "multipleMarker") {
+                    this.plot = lnglat.map(position => {
+                        let marker = this.createGraphic("marker", [position]);
+                        this.map.graphicLayer.addGraphic(marker);
+                        return marker;
+                    });
+                    !this.disabled && this.handleOpenDraw();
                 } 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;
+                    // rectangle 只存了对角两个点，不能当多边形顶点还原，要用 Rectangle 按 bounds 还原；
+                    // circle 也统一以多边形还原展示
+                    this.plot = this.createGraphic(this.showMode, lnglat);
+                    this.map.graphicLayer.addGraphic(this.plot);
                 }
-                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" : ""));
+
+                // 3D下 multipleMarker 是若干个独立的billboard点，图标刚创建时还没异步加载完成，
+                // Cesium 计算这些entity的包围球会是pending状态，graphicLayer.flyTo()内部据此判定
+                // "当前无法定位到目标"而静默不飞行，相机停在地图初始默认视角，看起来就像直接显示了
+                // 整个地球。这里已经有还原用的经纬度数组，不依赖graphic是否加载完成，直接算出矩形
+                // 范围飞过去
+                if (this.is3d && this.showMode === "multipleMarker" && lnglat.length > 1) {
+                    let lngs = lnglat.map(position => position[0]);
+                    let lats = lnglat.map(position => position[1]);
+                    this.map.flyToExtent({
+                        xmin: Math.min(...lngs),
+                        xmax: Math.max(...lngs),
+                        ymin: Math.min(...lats),
+                        ymax: Math.max(...lats)
+                    });
                 } else {
-                    this.searchMessage = "没有搜索到结果！";
+                    this.map.graphicLayer.flyTo();
                 }
             },
-            // 打开绘图
-            handleOpenDraw (type = this.showMode) {
-                switch (type) {
-                case "marker": {
-                    this.mouseTool.marker(markerOpt);
-                    break;
+            // 根据绘制类型创建对应引擎的矢量图形
+            createGraphic (type, lnglat) {
+                let style = this.getDrawStyle(type);
+                if (this.is3d) {
+                    if (type === "marker" || type === "multipleMarker") {
+                        return new mars3d.graphic.BillboardEntity({ position: lnglat[0], style });
+                    }
+                    if (type === "polyline") {
+                        return new mars3d.graphic.PolylineEntity({ positions: lnglat, style });
+                    }
+                    if (type === "rectangle") {
+                        return new mars3d.graphic.RectangleEntity({ positions: lnglat, style });
+                    }
+                    // polygon、circle 统一以多边形还原展示
+                    return new mars3d.graphic.PolygonEntity({ positions: lnglat, style });
                 }
-                case "multipleMarker": {
-                    this.mouseTool.marker(markerOpt);
-                    break;
+                if (type === "marker" || type === "multipleMarker") {
+                    return new mars2d.graphic.Marker({ latlng: [lnglat[0][1], lnglat[0][0]], style });
                 }
-                case "polyline": {
-                    this.mouseTool.polyline(lineOpt);
-                    break;
+                let latlngs = lnglat.map(item => [item[1], item[0]]);
+                if (type === "polyline") {
+                    return new mars2d.graphic.Polyline({ latlngs, style });
                 }
-                case "polygon": {
-                    this.mouseTool.polygon(polygonOpt);
-                    break;
+                if (type === "rectangle") {
+                    return new mars2d.graphic.Rectangle({ latlngs, style });
                 }
-                case "rectangle": {
-                    this.mouseTool.rectangle(polygonOpt);
-                    break;
+                return new mars2d.graphic.Polygon({ latlngs, style });
+            },
+            // 根据绘制类型获取对应的矢量数据样式
+            getDrawStyle (type) {
+                if (["polygon", "rectangle", "circle"].includes(type)) {
+                    return this.is3d ? polygonStyle3d : polygonStyle;
                 }
-                case "circle": {
-                    this.mouseTool.circle(polygonOpt);
-                    break;
+                if (type === "polyline") {
+                    return polylineStyle;
                 }
+                return this.is3d ? markerStyle3d : markerStyle;
+            },
+            // 打开绘图
+            handleOpenDraw (type = this.showMode) {
+                // startDraw 内部会先 stopDraw 关掉正在进行的绘制会话，如果那个会话已经有了一个
+                // 鼠标移入产生的预览图形（哪怕用户实际没有点击过），disable 时会把它当成真实落点重放出来，
+                // 这里主动先走一遍 handleCloseDraw 把这种重放屏蔽掉，避免每个调用方都要自己处理
+                this.handleCloseDraw();
+                let isMarker = type === "marker" || type === "multipleMarker";
+                // mars3d 绘制图标点用的类型名是 "billboard"，不是 "marker"
+                let drawType = isMarker ? (this.is3d ? "billboard" : "marker") : type;
+                let style = this.getDrawStyle(type);
+                // 绘制点位时，鼠标移动过程中会实时用该样式画一个跟随鼠标的预览图标，
+                // 这里不需要这个预览，落点后再在 handleDrawCreated 里恢复成可见样式
+                if (isMarker) {
+                    style = { ...style, opacity: 0 };
                 }
+                this.map.graphicLayer.startDraw({
+                    type: drawType,
+                    style,
+                    success: graphic => {
+                        this.handleDrawCreated(graphic, type);
+                    }
+                });
             },
             // 关闭绘图
             handleCloseDraw () {
-                this.mouseTool.close();
+                this.suppressDrawCreated = true;
+                this.map.graphicLayer.stopDraw();
+                this.suppressDrawCreated = false;
             },
-            // 添加图形
-            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();
+            // 绘制完成回调
+            // 注意：stopDraw 触发 disable 时，如果当前绘制实例还留着一个图形（不管是已经真正落点过的，
+            // 还是鼠标移动产生的、还没落点的透明预览），都会被当成一次落点重新广播出来。
+            // 用 graphic._placed 区分：已经标记过的是之前真实落过的点，重复广播直接忽略；没标记过的
+            // 说明只是预览图形（比如鼠标移出地图前最后停留的位置），要从地图上移除，不能留下变成一个
+            // 用户没点过的点位（之前只拦截了 newVal 更新，没清理图形本身，导致地图上多出一个点）
+            handleDrawCreated (graphic, type = this.showMode) {
+                let coordinates = this.getGraphicCoordinates(graphic, type);
+                if (this.suppressDrawCreated) {
+                    if (!graphic._placed) {
+                        this.map.graphicLayer.removeGraphic(graphic);
                     }
-                    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
-                        });
+                    return;
+                }
+                graphic._placed = true;
+                if (type === "marker" || type === "multipleMarker") {
+                    // 落点后恢复成可见样式；setStyle 内部是和之前的样式合并（merge），
+                    // markerStyle 里没写 opacity，合并后不会覆盖掉绘制时设的 opacity:0，这里要显式传 opacity:1
+                    graphic.style = { ...this.getDrawStyle(type), opacity: 1 };
+                }
+                if (type === "multipleMarker") {
+                    this.plot ? this.plot.push(graphic) : (this.plot = [graphic]);
+                    this.newVal.lnglat.push(...coordinates);
+                    this.getRegeoCode(coordinates[0]);
+                    // 此时仍处于 mars2d 当前这次绘制点击事件的调用栈中，
+                    // 若在这里同步调用 startDraw 重新开始下一个点的绘制，会递归触发同一个绘制实例的 disable，
+                    // 导致其内部代码执行完 disable 后访问 this.options 时报错（repeatMode 读取 undefined）
+                    // 延后到下一个 tick 再开始新一轮绘制，避开这个调用栈
+                    this.$nextTick(() => {
+                        !this.disabled && this.handleOpenDraw(type); // 继续绘制下一个点
                     });
-                    centerView && this.map.setFitView(this.plot);
+                } else {
+                    this.plot = graphic;
+                    this.newVal.lnglat = coordinates;
+                    this.getRegeoCode(coordinates[0]);
                 }
             },
-            // 移除图形
-            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);
+            // 获取绘制/回显图形对应的经纬度坐标数组（mars2d 各类图形统一暴露 .coordinates；
+            // mars3d 点状图形(billboard)用 .point，线/面图形用 .points，圆用 getOutlineCoordinates 取环上点位近似）
+            getGraphicCoordinates (graphic, type) {
+                if (!this.is3d) {
+                    return graphic.coordinates;
+                }
+                if (type === "marker" || type === "multipleMarker") {
+                    return [graphic.point.toArray(true)];
                 }
+                if (type === "circle") {
+                    return graphic.getOutlineCoordinates(false, undefined, true);
+                }
+                return graphic.points.map(point => point.toArray(true));
             },
-            // 获取逆地理编码
-            getRegeoCode (value, scuessFun) {
-                let params = {
-                    key: window.config.amapKey,
-                    location: this.newVal.lnglat[0],
-                    radius: 1000,
-                    extensions: "base",
-                    batch: false,
-                    roadlevel: 1
-                };
+            // 添加/更新搜索结果标记点
+            handleAddMarker (location, centerView = true, title = "") {
+                if (this.marker) {
+                    this.setGraphicPosition(this.marker, location);
+                } else {
+                    this.marker = this.createGraphic("marker", [location]);
+                    this.map.graphicLayer.addGraphic(this.marker);
+                }
 
-                let paramStr = "";
-                for (let attr in params) {
-                    paramStr += attr + "=" + params[attr] + "&";
+                if (this.showMode === "marker") {
+                    // 单点模式下，搜索结果即为最终坐标，清除之前绘制的图形
+                    this.handleCloseDraw();
+                    if (this.plot) {
+                        this.map.graphicLayer.removeGraphic(this.plot);
+                        this.plot = null;
+                    }
+                    this.newVal.lnglat = [[location[0], location[1]]];
+                    if (title) {
+                        this.newVal.name = title;
+                    } else {
+                        this.getRegeoCode(location);
+                    }
+                } else if (this.showMode === "multipleMarker") {
+                    this.newVal.lnglat.push([location[0], location[1]]);
+                    if (title) {
+                        this.newVal.name = title;
+                    } else {
+                        this.getRegeoCode(location);
+                    }
                 }
 
-                fetch("https://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;
-                        }
+                centerView && this.map.graphicLayer.flyTo();
+            },
+            // 更新已有图形的位置（mars2d latlng为[lat,lng]，mars3d position为[lng,lat]）
+            setGraphicPosition (graphic, lnglat) {
+                if (this.is3d) {
+                    graphic.position = lnglat;
+                } else {
+                    graphic.latlng = [lnglat[1], lnglat[0]];
+                }
+            },
+            // 移除图形
+            handleRemoveMarker () {
+                // 3D下绘制(rectangle等支持编辑的图形)时，mars3d 内部会自动把正在编辑的图形设为
+                // map.trackedEntity 以实现跟随/贴合效果。直接 removeGraphic 并不会同步清掉这个引用，
+                // 之后 Cesium 每帧仍尝试跟踪一个已被销毁的实体，其位置退化为坐标原点，相机会在后续
+                // 数帧里持续朝着地球(0,0)附近平滑漂移，表现为清除后视角划过地球背面。
+                // 这里移除图形前先清掉 trackedEntity，避免残留追踪引发这个漂移
+                if (this.is3d && this.map.trackedEntity) {
+                    this.map.trackedEntity = undefined;
+                }
+                if (this.marker) {
+                    this.map.graphicLayer.removeGraphic(this.marker);
+                    this.marker = null;
+                }
+                if (this.plot) {
+                    if (Array.isArray(this.plot)) {
+                        this.plot.forEach(graphic => this.map.graphicLayer.removeGraphic(graphic));
+                    } else {
+                        this.map.graphicLayer.removeGraphic(this.plot);
+                    }
+                    this.plot = null;
+                }
+            },
+            // 获取逆地理编码（不用 queryPOI.getAddress：mars2d 按高德的返回结构判断成功与否，天地图接口一直被误判为失败）
+            getRegeoCode (location) {
+                axios.get("http://api.tianditu.gov.cn/geocoder", {
+                    params: {
+                        type: "geocode",
+                        tk: "0050eb1a5c837128f694a9022055fa54",
+                        postStr: JSON.stringify({ lon: location[0], lat: location[1], ver: 1 })
+                    }
+                }).then(({ data }) => {
+                    if (data && data.result && data.result.formatted_address) {
+                        this.newVal.name = data.result.formatted_address;
+                    }
+                }).catch((err) => {
+                    console.log(err);
                 });
+            },
+            toWgs84 (lnglat, crs) {
+                return lnglat && crs !== "WGS84" ? this.mapEngine.PointTrans.gcj2wgs(lnglat) : lnglat;
             }
         }
     };
 </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;
-                        }
+@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;
-                        }
+                    &-text {
+                        font-size: @textSize;
+                        line-height: 18px;
+                    }
 
-                        &-row {
-                            margin-top: 5px;
-                        }
+                    &-row {
+                        margin-top: 5px;
                     }
+                }
 
-                    &-show {
-                        &-text {
-                            text-align: right;
-                            .dsh-padding-top10();
-                        }
+                &-show {
+                    &-text {
+                        text-align: right;
+                        .dsh-padding-top10();
                     }
                 }
             }
+        }
 
-            &-map {
-                width: 100%;
-                height: 100%;
-            }
+        &-map {
+            width: 100%;
+            height: 100%;
+        }
 
-            &-lnglat {
-                padding: 5px 10px;
-                background:#fff;
-                display: none;
-                position:absolute;
-            }
+        &-lnglat {
+            padding: 5px 10px;
+            background: #fff;
+            display: none;
+            position: absolute;
+            z-index: 999;
+        }
 
-            .ivu-modal-content {
-                overflow: hidden;
-                height: 100%;
+        .ivu-modal-content {
+            overflow: hidden;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
 
-                .ivu-modal-body {
-                    padding: 0px;
-                    height: 100%;
-                }
+            .ivu-modal-body {
+                padding: 0px;
+                flex: 1;
+                height: 0;
             }
         }
     }
-    .nodata{
-        color: #999;
-    }
+}
+
+.nodata {
+    color: #999;
+}
 </style>