From 7607d55d6597d772de1a37598d36e74c4542223e Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 05 二月 2024 17:33:00 +0800
Subject: [PATCH] 优化地图联动相关逻辑
---
lib/dialog.js | 21 ++++
lib/map.js | 237 ++++++++++++++++++++++++++++++----------------
lib/scene.js | 2
css/text.css | 3
history.mode.js | 5
underway.html | 20 +++
underway.js | 7 +
asset/mipmap/scene.png | 0
8 files changed, 207 insertions(+), 88 deletions(-)
diff --git a/asset/mipmap/scene.png b/asset/mipmap/scene.png
new file mode 100644
index 0000000..2c0e28a
--- /dev/null
+++ b/asset/mipmap/scene.png
Binary files differ
diff --git a/css/text.css b/css/text.css
new file mode 100644
index 0000000..37abda7
--- /dev/null
+++ b/css/text.css
@@ -0,0 +1,3 @@
+.map-marker-label {
+ background-color: antiquewhite;
+}
\ No newline at end of file
diff --git a/history.mode.js b/history.mode.js
index 77b6c45..28ce372 100644
--- a/history.mode.js
+++ b/history.mode.js
@@ -455,11 +455,10 @@
MapUtil.drawSector3(result[0], windDir, windSpeed);
// 2. 缁樺埗瀵硅瘽妗�
- const window = DialogUtil.createInfoWindow2(factor, () => {
+ DialogUtil.openNewWindow2(factor, MapUtil._map, result[0], () => {
// 绉婚櫎鎵囧舰鍖哄煙
- MapUtil.clearSector3();
+ // MapUtil.clearSector3();
});
- window.open(MapUtil._map, result[0]);
// 3. 瓒嬪娍鍥捐烦杞畾浣�
var f = this.factorDatas.factor[this.factorType + 1 + ''];
const progress = FChart.locate(
diff --git a/lib/dialog.js b/lib/dialog.js
index c011b95..0314f39 100644
--- a/lib/dialog.js
+++ b/lib/dialog.js
@@ -1,4 +1,13 @@
var DialogUtil = {
+ show: true,
+ toggleDataDialog() {
+ this.show = !this.show;
+ if (this.show) {
+ return '鏁版嵁寮规锛氬紑';
+ } else {
+ return '鏁版嵁寮规锛氬叧';
+ }
+ },
/**
* 鍒涘缓寮瑰嚭妗�
* @param {*} factorDatas 鐩戞祴鏁版嵁
@@ -223,4 +232,16 @@
info.appendChild(bottom);
return info;
},
+
+ openNewWindow(factorDatas, i, map, position, onClose) {
+ if (!this.show) return
+ const window = this.createInfoWindow(factorDatas, i, onClose)
+ window.open(map, position);
+ },
+
+ openNewWindow2(factorData, map, position, onClose) {
+ if (!this.show) return
+ const window = this.createInfoWindow2(factorData, onClose)
+ window.open(map, position);
+ }
};
diff --git a/lib/map.js b/lib/map.js
index 5bf7a0d..e4a9a35 100644
--- a/lib/map.js
+++ b/lib/map.js
@@ -50,18 +50,49 @@
this._map.remove(views);
},
- addMarkers(markers) {
+ addElasticMarkers(markers) {
+ const zoomStyleMapping = {
+ 14: 0,
+ 15: 0,
+ 16: 0,
+ 17: 0,
+ 18: 0,
+ 19: 0,
+ 20: 0,
+ };
const mList = [];
markers.forEach((m) => {
- var marker = new AMap.Marker({
- position: new AMap.LngLat(m.lng, m.lat), // 缁忕含搴﹀璞★紝涔熷彲浠ユ槸缁忕含搴︽瀯鎴愮殑涓�缁存暟缁刐116.39, 39.9]
+ let name = m.name;
+ if (m.name.length > 9) {
+ const i = m.name.length / 2;
+ const str1 = m.name.slice(0, i + 1);
+ const str2 = m.name.slice(i + 1, m.name.length);
+ name = `${str1}<br />${str2}`;
+ }
+ var marker = new AMap.ElasticMarker({
title: m.name,
- offset: new AMap.Pixel(-13, -12),
- // anchor: 'center',
- icon: new AMap.Icon({
- image: './asset/mipmap/c_level_no.png',
- // imageSize: [12, 12],
- }),
+ zoom: [14, 20],
+ position: new AMap.LngLat(m.lng, m.lat),
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/scene.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 14, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1.4, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1, //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>${name}</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15,
+ },
+ },
+ ],
+ zoomStyleMapping: zoomStyleMapping,
});
mList.push(marker);
});
@@ -180,14 +211,14 @@
// 鍒涘缓鏍峰紡瀵硅薄
var styleObject = {
- url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
+ url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
// url: './asset/mipmap/ic_up_white.png', // 鍥炬爣鍦板潃
size: new AMap.Size(11, 11), // 鍥炬爣澶у皬
anchor: new AMap.Pixel(5, 5), // 鍥炬爣鏄剧ず浣嶇疆鍋忕Щ閲忥紝鍩哄噯鐐逛负鍥炬爣宸︿笂瑙�
};
var massMarks = new AMap.MassMarks(data, {
zIndex: 5, // 娴烽噺鐐瑰浘灞傚彔鍔犵殑椤哄簭
- zooms: [3, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
+ zooms: [15, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
style: styleObject, // 璁剧疆鏍峰紡瀵硅薄
});
massMarks.on('click', (event) => {
@@ -207,11 +238,10 @@
this.drawSector3(lnglats[i], windDir, windSpeed);
// 2. 缁樺埗瀵硅瘽妗�
- const window = DialogUtil.createInfoWindow(fDatas, i, () => {
+ DialogUtil.openNewWindow(fDatas, i, MapUtil._map, lnglats[i], () => {
// 绉婚櫎鎵囧舰鍖哄煙
- this.clearSector3();
+ // this.clearSector3();
});
- window.open(MapUtil._map, lnglats[i]);
// 3. 瓒嬪娍鍥捐烦杞畾浣�
const progress = FChart.locate(
@@ -289,10 +319,11 @@
_sector: undefined,
_sectorViews3: {},
drawSector3: function (lnglat, windDir, windSpeed) {
- // this._map.remove(MapUtil._sectorViews)
- // MapUtil._sectorViews = []
if (windSpeed > 10) {
return;
+ }
+ if (MapUtil._sectorViews3['text10'] != undefined) {
+ this.clearSector3();
}
var sector = new AMap.Object3D.Mesh();
@@ -364,89 +395,129 @@
geometry.faces.push(index + 3, index + 4, index + 5);
geometry.faces.push(index + 4, index + 5, index + 6);
}
-
- if (this._sector != undefined) {
- this._object3Dlayer.remove(this._sector);
- }
this._object3Dlayer.add(sector);
this._sector = sector;
distance = distance.toFixed(0);
distance2 = distance2.toFixed(0);
+ const zoomStyleMapping = {
+ 14: 0,
+ 15: 0,
+ 16: 0,
+ 17: 0,
+ 18: 0,
+ 19: 0,
+ 20: 0,
+ };
//10鍒嗛挓鎵囧舰
- if (MapUtil._sectorViews3['text10'] == undefined) {
- var text15 = new AMap.Text({
- text: '10鍒嗛挓',
- position: list[2],
- // animation: "AMAP_ANIMATION_DROP"
- });
- MapUtil._sectorViews3['text10'] = text15;
- var textM = new AMap.Text({
- text: distance + 'm',
- position: list[1],
- // animation: "AMAP_ANIMATION_DROP"
- });
- MapUtil._sectorViews3['textM'] = textM;
- } else {
- MapUtil._sectorViews3['text10'].setPosition(list[2]);
- MapUtil._sectorViews3['textM'].setPosition(list[1]);
- MapUtil._sectorViews3['textM'].setText(distance + 'm');
- }
+ var text15 = new AMap.ElasticMarker({
+ zoom: [14, 20],
+ position: list[2],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1, //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: '<div>10鍒嗛挓</div>',
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15,
+ },
+ },
+ ],
+ zoomStyleMapping: zoomStyleMapping,
+ });
+ MapUtil._sectorViews3['text10'] = text15;
+ var textM = new AMap.ElasticMarker({
+ zoom: [14, 20],
+ position: list[1],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1, //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>${distance}m</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15,
+ },
+ },
+ ],
+ zoomStyleMapping: zoomStyleMapping,
+ });
+ MapUtil._sectorViews3['textM'] = textM;
MapUtil._map.add(MapUtil._sectorViews3['text10']);
MapUtil._map.add(MapUtil._sectorViews3['textM']);
- // 缂╂斁鍦板浘鍒板悎閫傜殑瑙嗛噹绾у埆
- // if (animation != false) {
- // MapUtil._map.setFitView([bezierCurve, line1, line2])
- // }
-
//5鍒嗛挓鎵囧舰
-
pList = list2;
- // MapUtil._map.setCenter(pList[0])
path = [
[pList[0].lng, pList[0].lat],
[pList[1].lng, pList[1].lat, pList[2].lng, pList[2].lat],
];
- if (MapUtil._sectorViews3['textM5'] == undefined) {
- var bezierCurve = new AMap.BezierCurve({
- path: path,
- // isOutline: true,
- // outlineColor: '#ffeeff',
- borderWeight: 1,
- strokeColor: '#ffeeff',
- strokeOpacity: 1,
- // strokeWeight: 6,
- // 绾挎牱寮忚繕鏀寔 'dashed'
- strokeStyle: 'solid',
- // strokeStyle鏄痙ashed鏃舵湁鏁�
- strokeDasharray: [10, 10],
- lineJoin: 'round',
- lineCap: 'round',
- zIndex: 50,
- });
- // bezierCurve.setMap(MapUtil._map)
- // MapUtil._sectorViews3['bezierCurve'] = bezierCurve
-
- var text5 = new AMap.Text({
- text: '5鍒嗛挓',
- position: pList[1],
- // animation: "AMAP_ANIMATION_DROP"
- });
- MapUtil._sectorViews3['text5'] = text5;
- var textM5 = new AMap.Text({
- text: distance2 + 'm',
- position: pList[0],
- // animation: "AMAP_ANIMATION_DROP"
- });
- MapUtil._sectorViews3['textM5'] = textM5;
- } else {
- // MapUtil._sectorViews3['bezierCurve'].setPath(path)
- MapUtil._sectorViews3['text5'].setPosition(pList[1]);
- MapUtil._sectorViews3['textM5'].setPosition(pList[0]);
- MapUtil._sectorViews3['textM5'].setText(distance2 + 'm');
- }
+ var text5 = new AMap.ElasticMarker({
+ position: pList[1],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1, //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>5鍒嗛挓</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15,
+ },
+ },
+ ],
+ zoomStyleMapping: zoomStyleMapping,
+ });
+ MapUtil._sectorViews3['text5'] = text5;
+ var textM5 = new AMap.ElasticMarker({
+ position: pList[0],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1, //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>${distance2}m</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15,
+ },
+ },
+ ],
+ zoomStyleMapping: zoomStyleMapping,
+ });
+ MapUtil._sectorViews3['textM5'] = textM5;
MapUtil._map.add(MapUtil._sectorViews3['textM5']);
MapUtil._map.add(MapUtil._sectorViews3['text5']);
diff --git a/lib/scene.js b/lib/scene.js
index 7fbda53..47dc1db 100644
--- a/lib/scene.js
+++ b/lib/scene.js
@@ -31,7 +31,7 @@
lat: v.latitude,
};
});
- this._markList = MapUtil.addMarkers(markers);
+ this._markList = MapUtil.addElasticMarkers(markers);
}
);
},
diff --git a/underway.html b/underway.html
index c8b1c4e..37cf900 100644
--- a/underway.html
+++ b/underway.html
@@ -16,7 +16,8 @@
<link rel="stylesheet" href="./css/border.css?v=6">
<link rel="stylesheet" href="./css/component.css?v=3">
<link rel="stylesheet" href="./css/jackwei.slider.css?v=2">
- <link rel="stylesheet" href="./css//myBootstrap.css">
+ <link rel="stylesheet" href="./css/myBootstrap.css">
+ <link rel="stylesheet" href="./css/text.css">
<style type="text/css">
/* 鍘婚櫎楂樺痉鍦板浘鐨勫浐瀹氱増鍙峰浘鏍� */
.amap-logo {
@@ -28,6 +29,19 @@
}
.amap-overlays {
z-index: 0;
+ }
+ .amap-marker-label{
+ /* width: 100px;
+ max-width: 200px; */
+ font-size: 13px;
+ text-align: center;
+ color: white;
+ background-color: transparent;
+ text-shadow: black 2px 2px 2px;
+ border-radius: 2px;
+ border: 0px;
+ padding: 4px;
+ /* white-space: pre-wrap; */
}
</style>
@@ -86,6 +100,10 @@
<i class="fa fa-compass" aria-hidden="true"></i>
<span>鏁版嵁鏍囪锛氬紑</span>
</button>
+ <button id="btn_data_dialog" type="button" class="btn btn-outline-info btn-block">
+ <i class="fa fa-compass" aria-hidden="true"></i>
+ <span>鏁版嵁寮规锛氬紑</span>
+ </button>
</form>
</div>
</div>
diff --git a/underway.js b/underway.js
index d4a45f3..1ef71ae 100644
--- a/underway.js
+++ b/underway.js
@@ -548,6 +548,13 @@
b.toggleClass('btn-outline-info');
$(b.children('span').get(0)).text(text);
});
+ $('#btn_data_dialog').on('click', function () {
+ var text = DialogUtil.toggleDataDialog();
+ var b = $(this);
+ b.toggleClass('btn-outline-secondary');
+ b.toggleClass('btn-outline-info');
+ $(b.children('span').get(0)).text(text);
+ });
/************************鍘嗗彶杞ㄨ抗鍔ㄧ敾***********************************/
$('#btn_stop').on('click', function () {
--
Gitblit v1.9.3