|
|
@@ -246,7 +246,15 @@
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="control">
|
|
|
+
|
|
|
<div class="operation-control" ref="control">
|
|
|
+ <button
|
|
|
+ :class="isAreaBuffFlag == true ? 'operation-button active' : 'operation-button'"
|
|
|
+ @click="toggleBuffMode"
|
|
|
+ >
|
|
|
+ <img class="operation-icon" :src="isAreaBuffFlag == false ? operationAllImg.hnw : operationAllImg.hnw_check"/>
|
|
|
+ <span :class="isAreaBuffFlag == true ? 'measure-text active' : 'measure-text'">虹桥海纳湾</span>
|
|
|
+ </button>
|
|
|
<button
|
|
|
v-if="(URLParams.type == 3 || URLParams.type == undefined) && isMobile == false"
|
|
|
:class="isDraw == true ? 'operation-button active' : 'operation-button'"
|
|
|
@@ -333,6 +341,7 @@
|
|
|
import { get,post,postform } from "@/utils/request";
|
|
|
import publicFun from "@/utils/publicFunction.js";
|
|
|
let baseUrl = process.env.BASE_URL;
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -397,6 +406,7 @@ export default {
|
|
|
localLng: null, // 存储地址栏定位参数
|
|
|
currentLocationMarker: null, // 当前位置标记
|
|
|
isClearCejuFlag:false, // 是否清除测距数据
|
|
|
+ isAreaBuffFlag:true, //是否显示虹桥海纳湾辖区围栏
|
|
|
isMobile:false,
|
|
|
isDataTypeFlag:0, // 0 默认无 1 楼宇 2 地块
|
|
|
homeImg:require("../../public/static/image/home.png"),
|
|
|
@@ -407,6 +417,9 @@ export default {
|
|
|
type:require("../../public/static/image/type.png"),
|
|
|
type_check:require("../../public/static/image/type_check.png"),
|
|
|
|
|
|
+ hnw:require("../../public/static/image/hqhnw.png"),
|
|
|
+ hnw_check:require("../../public/static/image/hqhnw_check.png"),
|
|
|
+
|
|
|
cj:require("../../public/static/image/cj.png"),
|
|
|
cj_check:require("../../public/static/image/cj_check.png"),
|
|
|
|
|
|
@@ -497,8 +510,8 @@ export default {
|
|
|
curType = info.clue_type
|
|
|
}
|
|
|
const message = { type: curType, id: info.id, code: info.c_park_code || info.c_parcel_number,clue_id:info.clue_id, clue_code:info.clue_code};
|
|
|
- console.log("message")
|
|
|
- console.log(message)
|
|
|
+ // console.log("message")
|
|
|
+ // console.log(message)
|
|
|
window.parent.postMessage(message, '*');
|
|
|
},
|
|
|
initIframeInfo (){
|
|
|
@@ -571,6 +584,27 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ toggleBaseLayer(layerType, show) {
|
|
|
+ const layerGroupName = layerType + "_polygon";
|
|
|
+ const group = map2DViewer.groups[layerGroupName];
|
|
|
+ if (!group) return;
|
|
|
+ console.log('[ toggleBaseLayer ] >', layerType)
|
|
|
+ group.eachLayer(layer => {
|
|
|
+ // 只对渐变面生效，不影响其他图层
|
|
|
+ if (layer.options.gradient === 'radial') {
|
|
|
+ layer.options.visible = show;
|
|
|
+ layer.redraw();
|
|
|
+ } else {
|
|
|
+ // 普通面用原来的 setStyle
|
|
|
+ layer.setStyle({
|
|
|
+ opacity: show ? 1 : 0,
|
|
|
+ fillOpacity: show ? 0.6 : 0
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
getOauthToken() {
|
|
|
let that = this;
|
|
|
let URLStr = window.location.href.split('#');
|
|
|
@@ -630,8 +664,76 @@ export default {
|
|
|
isMapLoaded() {
|
|
|
return Object.keys(map2DViewer.map._layers).length > 0 && Object.keys(map2DViewer.map._panes).length > 0;
|
|
|
},
|
|
|
+ drawOpacity(){
|
|
|
+ // ==============================
|
|
|
+ // Leaflet 径向渐变·中心透明 → 边界渐变
|
|
|
+ // ==============================
|
|
|
+ const _origUpdatePath = L.Polygon.prototype._updatePath;
|
|
|
+
|
|
|
+ if (L.Canvas) {
|
|
|
+ L.Canvas.include({
|
|
|
+ _updatePolygonRadialGradient(layer) {
|
|
|
+ if (layer.options.visible === false) return; // invisible → 不绘制
|
|
|
+ const ctx = this._ctx;
|
|
|
+ const parts = layer._parts;
|
|
|
+ if (!parts || !parts.length) return;
|
|
|
+
|
|
|
+ // 计算面的包围盒
|
|
|
+ let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
|
+ parts.forEach(ring => {
|
|
|
+ ring.forEach(p => {
|
|
|
+ minX = Math.min(minX, p.x);
|
|
|
+ minY = Math.min(minY, p.y);
|
|
|
+ maxX = Math.max(maxX, p.x);
|
|
|
+ maxY = Math.max(maxY, p.y);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ const cx = (minX + maxX) / 2; // 中心 X
|
|
|
+ const cy = (minY + maxY) / 2; // 中心 Y
|
|
|
+ const radius = Math.max(maxX - minX, maxY - minY) / 1.2; // 渐变半径
|
|
|
+
|
|
|
+ // ======================
|
|
|
+ // 核心：径向渐变（中心透明）
|
|
|
+ // ======================
|
|
|
+ const grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
|
|
|
+ grd.addColorStop(0, "rgba(0, 102, 255, 0)"); // 中心：完全透明
|
|
|
+ grd.addColorStop(0.7, "rgba(0, 102, 255, 0.3)"); // 中间：半透明
|
|
|
+ grd.addColorStop(1, "rgba(0, 102, 255, 0.8)"); // 边界：最深色
|
|
|
+
|
|
|
+ // 绘制面
|
|
|
+ ctx.beginPath();
|
|
|
+ parts.forEach(ring => {
|
|
|
+ ctx.moveTo(ring[0].x, ring[0].y);
|
|
|
+ ring.forEach(p => ctx.lineTo(p.x, p.y));
|
|
|
+ ctx.closePath();
|
|
|
+ });
|
|
|
+
|
|
|
+ ctx.fillStyle = grd;
|
|
|
+ ctx.fill();
|
|
|
+
|
|
|
+ // 边框（可选）
|
|
|
+ ctx.strokeStyle = layer.options.color || "rgba(0, 102, 255, 1)";
|
|
|
+ ctx.lineWidth = layer.options.weight || 1;
|
|
|
+ ctx.stroke();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重写更新方法
|
|
|
+ L.Polygon.include({
|
|
|
+ _updatePath() {
|
|
|
+ if (this.options.gradient === 'radial') {
|
|
|
+ this._renderer._updatePolygonRadialGradient(this);
|
|
|
+ } else {
|
|
|
+ _origUpdatePath.call(this);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
initMap() {
|
|
|
let that = this;
|
|
|
+ that.drawOpacity();
|
|
|
map2DViewer.map = L.map("map2DViewer", {
|
|
|
minZoom: 10,
|
|
|
maxZoom: 19,
|
|
|
@@ -654,6 +756,26 @@ export default {
|
|
|
// 等待地图加载完成
|
|
|
setTimeout(that.isMapLoaded, 100); // 可以尝试使用 setTimeout 来轮询，直到地图加载完成
|
|
|
}
|
|
|
+
|
|
|
+ map2DViewer.map.whenReady(() => {
|
|
|
+ that.isLoading = false;
|
|
|
+ that.initAreaBuffData(); // 此时地图 100% 可用
|
|
|
+ });
|
|
|
+
|
|
|
+ // 地图缩放、移动时强制重绘渐变（彻底不撕裂）
|
|
|
+ map2DViewer.map.on('moveend', () => {
|
|
|
+ const group = map2DViewer.groups["hqhnwName_polygon"];
|
|
|
+ // console.log('[ ddd ] >', group)
|
|
|
+ if (!group) return;
|
|
|
+ group.eachLayer(layer => {
|
|
|
+ if (layer.options.gradient === 'radial' && layer.redraw) {
|
|
|
+ layer.redraw();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// 单击事件：清除所有绘制的元素和筛选结果
|
|
|
map2DViewer.map.on("click", (e) => {
|
|
|
// 清除圆圈
|
|
|
@@ -702,6 +824,82 @@ export default {
|
|
|
|
|
|
|
|
|
},
|
|
|
+ initAreaBuffData(){
|
|
|
+ const areaData = {
|
|
|
+ "type": "FeatureCollection",
|
|
|
+ "features": [
|
|
|
+ {
|
|
|
+ "type": "Feature",
|
|
|
+ "properties": {},
|
|
|
+ "geometry": {
|
|
|
+ "type": "Polygon",
|
|
|
+ "coordinates": [
|
|
|
+ [
|
|
|
+ [121.261947,31.206686],
|
|
|
+ [121.262559,31.205656],
|
|
|
+ [121.262913,31.204798],
|
|
|
+ [121.263654,31.203993],
|
|
|
+ [121.263675,31.203489],
|
|
|
+ [121.264448,31.202877],
|
|
|
+ [121.265253,31.201933],
|
|
|
+ [121.266036,31.201654],
|
|
|
+ [121.268827,31.199187],
|
|
|
+ [121.269385,31.198382],
|
|
|
+ [121.270298,31.197867],
|
|
|
+ [121.27077,31.19732],
|
|
|
+ [121.271511,31.197127],
|
|
|
+ [121.271972,31.196687],
|
|
|
+ [121.272069,31.196279],
|
|
|
+ [121.272874,31.195496],
|
|
|
+ [121.272681,31.195131],
|
|
|
+ [121.27164,31.195196],
|
|
|
+ [121.265704,31.19305],
|
|
|
+ [121.267345,31.190013],
|
|
|
+ [121.26906,31.186622],
|
|
|
+ [121.260218,31.183855],
|
|
|
+ [121.252598,31.203532],
|
|
|
+ [121.261947,31.206686]
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 确保 groups 对象存在
|
|
|
+ if (!map2DViewer.groups) {
|
|
|
+ map2DViewer.groups = {};
|
|
|
+ }
|
|
|
+
|
|
|
+ const groupsName = "hqhnwName";
|
|
|
+ const layerKey = groupsName + "_polygon";
|
|
|
+
|
|
|
+ // 移除旧图层组（如果存在）
|
|
|
+ if (map2DViewer.groups[layerKey]) {
|
|
|
+ if (map2DViewer.map.hasLayer(map2DViewer.groups[layerKey])) {
|
|
|
+ map2DViewer.groups[layerKey].remove();
|
|
|
+ }
|
|
|
+ map2DViewer.groups[layerKey] = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建新图层组并添加到地图
|
|
|
+ map2DViewer.groups[layerKey] = L.featureGroup().addTo(map2DViewer.map);
|
|
|
+ let color = "#4facfe", fillOpacity = 0.6, itemName = "虹桥海纳湾";
|
|
|
+ areaData.features.map((feature) => {
|
|
|
+ // 关键：把 GeoJSON 的 [lng, lat] 转成 Leaflet 需要的 [lat, lng]
|
|
|
+ const ring = feature.geometry.coordinates[0].map(([lng, lat]) => [lat, lng]);
|
|
|
+ L.polygon([ring], {
|
|
|
+ color: color,
|
|
|
+ weight: 1,
|
|
|
+ fillColor: color,
|
|
|
+ opacity: 1,
|
|
|
+ fillOpacity: fillOpacity,
|
|
|
+ gradient: 'radial', // 开启【中心透明径向渐变】
|
|
|
+ visible: true, // 显隐
|
|
|
+ itemName: itemName
|
|
|
+ }).addTo(map2DViewer.groups[layerKey]);
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
drawCircle(e){
|
|
|
this.centerPosition = e
|
|
|
@@ -1161,6 +1359,7 @@ export default {
|
|
|
},
|
|
|
getlyData(geoJson){
|
|
|
let that = this;
|
|
|
+ // console.log('[ geoJson ] >', geoJson)
|
|
|
// 存放所有的面数据
|
|
|
map2DViewer.groups["lyModelColChName_polygon"] = L.featureGroup();
|
|
|
map2DViewer.groups["lyModelColChName_polygon"].addTo(map2DViewer.map);
|
|
|
@@ -1428,6 +1627,10 @@ export default {
|
|
|
this.drawCircle(this.centerPosition)
|
|
|
}
|
|
|
},
|
|
|
+ toggleBuffMode(){
|
|
|
+ this.isAreaBuffFlag = !this.isAreaBuffFlag;
|
|
|
+ this.toggleBaseLayer("hqhnwName", this.isAreaBuffFlag);
|
|
|
+ },
|
|
|
// 切换测距模式
|
|
|
toggleMeasureMode() {
|
|
|
this.curtipCheck = 2
|
mork
