|
|
@@ -57,6 +57,7 @@ export default {
|
|
|
});
|
|
|
bmap.value.centerAndZoom(new BMapGL.Point(120.688612, 31.975529), 11);
|
|
|
bmap.value.enableScrollWheelZoom(true);
|
|
|
+ cpxOverlay();
|
|
|
}
|
|
|
watch(
|
|
|
() => store.state.currentTabText,
|
|
|
@@ -75,9 +76,180 @@ export default {
|
|
|
store.dispatch("GetTradeShipDetail", item.key);
|
|
|
}
|
|
|
}
|
|
|
+ // 定义复杂覆盖物
|
|
|
+ function cpxOverlay(
|
|
|
+ lng = 120.688612,
|
|
|
+ lat = 31.995529,
|
|
|
+ shipName = "颖航5156",
|
|
|
+ mmsi = "413835188",
|
|
|
+ cargo = "豆粕",
|
|
|
+ tons = "1565.69",
|
|
|
+ shipId = "51710"
|
|
|
+ ) {
|
|
|
+ console.log("创建自定义覆盖物");
|
|
|
+ // 复杂的自定义覆盖物
|
|
|
+ function ComplexCustomOverlay(point) {
|
|
|
+ this._point = point;
|
|
|
+ }
|
|
|
+ ComplexCustomOverlay.prototype = new BMapGL.Overlay();
|
|
|
+ ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
|
|
|
+ this._div["on" + event] = fun;
|
|
|
+ };
|
|
|
+ ComplexCustomOverlay.prototype.initialize = function (map) {
|
|
|
+ this._map = map;
|
|
|
+ let div = (this._div = document.createElement("div"));
|
|
|
+ div.style.position = "absolute";
|
|
|
+ div.style.margin = 0;
|
|
|
+ div.style.padding = 0;
|
|
|
+ div.style.zIndex = BMapGL.Overlay.getZIndex(this._point.lat);
|
|
|
+ div.style.height = "118px";
|
|
|
+ div.style.width = "270px";
|
|
|
+ div.style.lineHeight = "18px";
|
|
|
+ div.style.whiteSpace = "nowrap";
|
|
|
+ div.style.MozUserSelect = "none";
|
|
|
+ div.style.fontSize = "12px";
|
|
|
+ div.style.cursor = "pointer";
|
|
|
+
|
|
|
+ function parseDom(arg) {
|
|
|
+ let objE = document.createElement("div");
|
|
|
+ objE.innerHTML = arg;
|
|
|
+ return objE;
|
|
|
+ }
|
|
|
+ let content = `
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items:center;
|
|
|
+ text-shadow: 0px 0px 5px rgba(100, 185, 255, 0.6);
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style="
|
|
|
+ margin: 0px;
|
|
|
+ padding: 0px;
|
|
|
+ height: 55px;
|
|
|
+ width: 55px;
|
|
|
+ margin-right: 20px;
|
|
|
+ "
|
|
|
+ src="https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/map-ship-icon.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ height: 118px;
|
|
|
+ width: 3px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgb(16, 255, 185);
|
|
|
+ border: 1px solid rgb(16, 255, 185);
|
|
|
+ margin-right: 4px;
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ padding: 8px 12px;
|
|
|
+ height: 118px;
|
|
|
+ width: 191px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ text-align: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: SourceHanSansSC-Bold, SourceHanSansSC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #10ffb9;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ${shipName}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fafeff;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ MMSI: ${mmsi}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: DINAlternate-Bold, DINAlternate;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div style="margin-right: 35px">
|
|
|
+ <div style="margin-bottom: 3px; height: 28px">${cargo}</div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: SourceHanSansSC-Normal, SourceHanSansSC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #92afc7;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 货种
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ margin-bottom: 3px;
|
|
|
+ height: 28px;
|
|
|
+ line-height:22px
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ${tons}
|
|
|
+ <span style="display: inline-block; font-size: 16px"
|
|
|
+ >吨</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: SourceHanSansSC-Normal, SourceHanSansSC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #92afc7;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 吨位
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ let contain = parseDom(content);
|
|
|
+ div.addEventListener("click", function () {
|
|
|
+ console.log("shipId", shipId);
|
|
|
+ selectShip({ key: shipId });
|
|
|
+ });
|
|
|
+ div.appendChild(contain);
|
|
|
+
|
|
|
+ bmap.value.getPanes().labelPane.appendChild(div);
|
|
|
+ return div;
|
|
|
+ };
|
|
|
+ ComplexCustomOverlay.prototype.draw = function () {
|
|
|
+ let map = this._map;
|
|
|
+ let pixel = map.pointToOverlayPixel(this._point);
|
|
|
+ this._div.style.left = pixel.x - 30 + "px";
|
|
|
+ this._div.style.top = pixel.y - 65 + "px";
|
|
|
+ };
|
|
|
+
|
|
|
+ let myCompOverlay = new ComplexCustomOverlay(new BMapGL.Point(lng, lat));
|
|
|
+
|
|
|
+ bmap.value.addOverlay(myCompOverlay);
|
|
|
+ }
|
|
|
|
|
|
onMounted(() => {
|
|
|
- // initMap();
|
|
|
+ initMap();
|
|
|
// store.dispatch("GetManageShipDetail", 51710);
|
|
|
// store.dispatch("GetTradeShipDetail", 51710);
|
|
|
store.dispatch("GetNumbers");
|
wzh