| | |
| | | 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); |
| | | }); |
| | |
| | | |
| | | // 创建样式对象 |
| | | 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) => { |
| | |
| | | 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( |
| | |
| | | _sector: undefined, |
| | | _sectorViews3: {}, |
| | | drawSector3: function (lnglat, windDir, windSpeed) { |
| | | // this._map.remove(MapUtil._sectorViews) |
| | | // MapUtil._sectorViews = [] |
| | | if (windSpeed > 10) { |
| | | return; |
| | | } |
| | | if (this._sector != undefined) { |
| | | this.clearSector3(); |
| | | } |
| | | |
| | | var sector = new AMap.Object3D.Mesh(); |
| | |
| | | geometry.faces.push(index + 3, index + 4, index + 5); |
| | | geometry.faces.push(index + 4, index + 5, index + 6); |
| | | } |
| | | 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分钟扇形 |
| | | 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']); |
| | | |
| | | //5分钟扇形 |
| | | pList = list2; |
| | | path = [ |
| | | [pList[0].lng, pList[0].lat], |
| | | [pList[1].lng, pList[1].lat, pList[2].lng, pList[2].lat], |
| | | ]; |
| | | |
| | | 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']); |
| | | |
| | | // 查询范围内的监测站点 |
| | | SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance); |
| | | }, |
| | | |
| | | drawSector4: function (lnglat, windDir, windSpeed) { |
| | | if (windSpeed > 10) { |
| | | return; |
| | | } |
| | | |
| | | var sector = new AMap.Object3D.Mesh(); |
| | | sector.transparent = true; |
| | | sector.backOrFront = 'both'; |
| | | |
| | | var unit = 5; |
| | | |
| | | var sDeg = windDir - this._defaultDeg; //扇形起始角度(以上方作为0度) |
| | | var eDeg = windDir + this._defaultDeg; //扇形结束角度 |
| | | |
| | | var distance = windSpeed * 10 * 60; //半径(风速*时间) |
| | | var lnglat2 = this._getLatLon(lnglat, distance, sDeg); |
| | | var lnglat3 = this._getLatLon(lnglat, distance, windDir); |
| | | var lnglat4 = this._getLatLon(lnglat, distance, eDeg); |
| | | var list = this.parse2LngLat([lnglat, lnglat2, lnglat3, lnglat4]); |
| | | |
| | | var distance2 = windSpeed * 5 * 60; //半径(风速*时间) |
| | | var lnglat2_2 = this._getLatLon(lnglat, distance2, sDeg); |
| | | var lnglat2_3 = this._getLatLon(lnglat, distance2, windDir); |
| | | var lnglat2_4 = this._getLatLon(lnglat, distance2, eDeg); |
| | | var list2 = this.parse2LngLat([lnglat2_2, lnglat2_3, lnglat2_4]); |
| | | |
| | | var p0 = this.lngLatToGeodeticCoord([lnglat])[0]; |
| | | var geometry = sector.geometry; |
| | | |
| | | var count = distance / unit; |
| | | var unitDeg = (eDeg - sDeg) / count; |
| | | for (let i = 0; i < count; i++) { |
| | | var angle1 = sDeg + unitDeg * i; |
| | | var angle2 = sDeg + unitDeg * (i + 1); |
| | | |
| | | var l1 = this._getLatLon(lnglat, distance, angle1); |
| | | var l2 = this._getLatLon(lnglat, distance, angle2); |
| | | var l3 = this._getLatLon(lnglat, distance2, angle1); |
| | | var l4 = this._getLatLon(lnglat, distance2, angle2); |
| | | |
| | | var coors = this.lngLatToGeodeticCoord([l1, l2, l3, l4]); |
| | | l1 = coors[0]; |
| | | l2 = coors[1]; |
| | | l3 = coors[2]; |
| | | l4 = coors[3]; |
| | | |
| | | // 内测扇形 |
| | | geometry.vertices.push(p0.x, p0.y, 0); |
| | | geometry.vertices.push(l3.x, l3.y, 0); |
| | | geometry.vertices.push(l4.x, l4.y, 0); |
| | | // 外侧扇形 |
| | | geometry.vertices.push(l3.x, l3.y, 0); |
| | | geometry.vertices.push(l4.x, l4.y, 0); |
| | | geometry.vertices.push(l1.x, l1.y, 0); |
| | | geometry.vertices.push(l2.x, l2.y, 0); |
| | | |
| | | // 内测扇形颜色 |
| | | geometry.vertexColors.push(1, 0.11, 0.25, 0.6); |
| | | geometry.vertexColors.push(1, 0.11, 0.25, 0.6); |
| | | geometry.vertexColors.push(1, 0.11, 0.25, 0.6); |
| | | //外侧扇形颜色 |
| | | geometry.vertexColors.push(1, 0.37, 0.07, 0.5); |
| | | geometry.vertexColors.push(1, 0.37, 0.07, 0.5); |
| | | geometry.vertexColors.push(1, 0.37, 0.07, 0.5); |
| | | geometry.vertexColors.push(1, 0.37, 0.07, 0.5); |
| | | |
| | | var index = i * 7; |
| | | geometry.faces.push(index, index + 1, index + 2); |
| | | 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); |
| | |
| | | distance = distance.toFixed(0); |
| | | distance2 = distance2.toFixed(0); |
| | | //10分钟扇形 |
| | | if (MapUtil._sectorViews3['text10'] == undefined) { |
| | | if (MapUtil._sectorViews3['text10-a'] == undefined) { |
| | | var text15 = new AMap.Text({ |
| | | text: '10分钟', |
| | | position: list[2], |
| | | // animation: "AMAP_ANIMATION_DROP" |
| | | style: { |
| | | 'font-size': '13px', |
| | | 'text-align': 'center', |
| | | color: 'white', |
| | | 'background-color': 'transparent', |
| | | 'text-shadow': 'black 2px 2px 2px', |
| | | 'border-radius': '2px', |
| | | border: '0px', |
| | | padding: '4px', |
| | | }, |
| | | }); |
| | | MapUtil._sectorViews3['text10'] = text15; |
| | | MapUtil._map.add(text15); |
| | | MapUtil._sectorViews3['text10-a'] = text15; |
| | | var textM = new AMap.Text({ |
| | | text: distance + 'm', |
| | | position: list[1], |
| | | // animation: "AMAP_ANIMATION_DROP" |
| | | style: { |
| | | 'font-size': '13px', |
| | | 'text-align': 'center', |
| | | color: 'white', |
| | | 'background-color': 'transparent', |
| | | 'text-shadow': 'black 2px 2px 2px', |
| | | 'border-radius': '2px', |
| | | border: '0px', |
| | | padding: '4px', |
| | | }, |
| | | }); |
| | | MapUtil._sectorViews3['textM'] = textM; |
| | | MapUtil._map.add(textM); |
| | | MapUtil._sectorViews3['text10M-a'] = textM; |
| | | } else { |
| | | MapUtil._sectorViews3['text10'].setPosition(list[2]); |
| | | MapUtil._sectorViews3['textM'].setPosition(list[1]); |
| | | MapUtil._sectorViews3['textM'].setText(distance + 'm'); |
| | | MapUtil._sectorViews3['text10-a'].setPosition(list[2]); |
| | | MapUtil._sectorViews3['text10M-a'].setPosition(list[1]); |
| | | MapUtil._sectorViews3['text10M-a'].setText(distance + 'm'); |
| | | } |
| | | 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) { |
| | | if (MapUtil._sectorViews3['textM5-a'] == undefined) { |
| | | var bezierCurve = new AMap.BezierCurve({ |
| | | path: path, |
| | | // isOutline: true, |
| | |
| | | var text5 = new AMap.Text({ |
| | | text: '5分钟', |
| | | position: pList[1], |
| | | style: { |
| | | 'font-size': '13px', |
| | | 'text-align': 'center', |
| | | color: 'white', |
| | | 'background-color': 'transparent', |
| | | 'text-shadow': 'black 2px 2px 2px', |
| | | 'border-radius': '2px', |
| | | border: '0px', |
| | | padding: '4px', |
| | | }, |
| | | // animation: "AMAP_ANIMATION_DROP" |
| | | }); |
| | | MapUtil._sectorViews3['text5'] = text5; |
| | | MapUtil._map.add(text5); |
| | | MapUtil._sectorViews3['text5-a'] = text5; |
| | | var textM5 = new AMap.Text({ |
| | | text: distance2 + 'm', |
| | | position: pList[0], |
| | | style: { |
| | | 'font-size': '13px', |
| | | 'text-align': 'center', |
| | | color: 'white', |
| | | 'background-color': 'transparent', |
| | | 'text-shadow': 'black 2px 2px 2px', |
| | | 'border-radius': '2px', |
| | | border: '0px', |
| | | padding: '4px', |
| | | }, |
| | | // animation: "AMAP_ANIMATION_DROP" |
| | | }); |
| | | MapUtil._sectorViews3['textM5'] = textM5; |
| | | MapUtil._map.add(textM5); |
| | | MapUtil._sectorViews3['textM5-a'] = 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'); |
| | | MapUtil._sectorViews3['text5-a'].setPosition(pList[1]); |
| | | MapUtil._sectorViews3['textM5-a'].setPosition(pList[0]); |
| | | MapUtil._sectorViews3['textM5-a'].setText(distance2 + 'm'); |
| | | } |
| | | MapUtil._map.add(MapUtil._sectorViews3['textM5']); |
| | | MapUtil._map.add(MapUtil._sectorViews3['text5']); |
| | | |
| | | // 查询范围内的监测站点 |
| | | SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance); |
| | | }, |
| | | |
| | | clearSector3: function () { |
| | |
| | | for (const key in this._sectorViews3) { |
| | | list.push(this._sectorViews3[key]); |
| | | } |
| | | this.removeViews(list); |
| | | this._object3Dlayer.remove(this._sector); |
| | | if (list.length > 0) { |
| | | this.removeViews(list); |
| | | this._sectorViews3 = {}; |
| | | } |
| | | if (this._sector) { |
| | | this._object3Dlayer.remove(this._sector); |
| | | } |
| | | }, |
| | | |
| | | parse2LngLat: function (lnglats) { |
| | |
| | | */ |
| | | _getScale(minH, maxH) { |
| | | var zoom = MapUtil._map.getZoom(); |
| | | console.log(`zoom: ${zoom}`); |
| | | // console.log(`zoom: ${zoom}`); |
| | | if (this._lastZoom == -1) { |
| | | this._lastZoom = zoom; |
| | | } else if (this._lastZoom <= 8) { |