|
|
@@ -26,7 +26,9 @@
|
|
|
</div>
|
|
|
<!-- 楼宇信息UI -->
|
|
|
<div class="building-information" v-if="BuildingInformationShow">
|
|
|
- <div style="position: absolute;right: 10px;padding: 5px;cursor: pointer;" @click="colseWin" title="关闭"><span>X</span></div>
|
|
|
+ <div style="position: absolute;right: 10px;padding: 5px;cursor: pointer;" @click="colseWin" title="关闭">
|
|
|
+ <img style="width: 20px;" src="../../public/static/image/close.svg" />
|
|
|
+ </div>
|
|
|
<!-- title -->
|
|
|
<div class="building-information-title">
|
|
|
{{ BuildingInformationProperties.c_resource_name || BuildingInformationProperties.c_parcel_number+'地块' }}
|
|
|
@@ -145,6 +147,16 @@
|
|
|
<i class="measure-icon"></i>
|
|
|
<span class="measure-text">测距</span>
|
|
|
</button>
|
|
|
+ <button
|
|
|
+ :class="isDraw == true ? 'measure-button active' : 'measure-button'"
|
|
|
+ style="margin-top: 20px;"
|
|
|
+ @click="toggleDraw"
|
|
|
+ :title="isDraw ? '结束绘制' : '开始绘制十五分钟圈'"
|
|
|
+ >
|
|
|
+ <i class="mapPinSimpleArea"></i>
|
|
|
+ <span class="measure-text">绘制</span>
|
|
|
+ </button>
|
|
|
+
|
|
|
<!-- 新增图层控制复选框 -->
|
|
|
<div class="layer-toggle-controls">
|
|
|
<label class="layer-checkbox">
|
|
|
@@ -181,6 +193,7 @@
|
|
|
<script>
|
|
|
import { get } from "@/utils/request";
|
|
|
import publicFun from "@/utils/publicFunction.js";
|
|
|
+let baseUrl = process.env.BASE_URL;
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -196,6 +209,13 @@ export default {
|
|
|
searchStr: "",
|
|
|
currentCircle: null, // 当前绘制的圆圈
|
|
|
filteredLifeLayer: null, // 筛选结果图层组
|
|
|
+
|
|
|
+ initShow:{
|
|
|
+ lifeDataFlag:false,
|
|
|
+ dkDataFlag:false,
|
|
|
+ lyDataFlag:false
|
|
|
+ },
|
|
|
+
|
|
|
// 15分钟生活圈数据集合
|
|
|
lifeDatas: {},
|
|
|
landDatas: {},
|
|
|
@@ -206,6 +226,7 @@ export default {
|
|
|
showBuildingLayer: true, // 楼宇图层显示状态
|
|
|
// 测距相关状态
|
|
|
isMeasuring: false, // 是否正在测距
|
|
|
+ isDraw:false, //判断是否在绘制十五分钟圈
|
|
|
measurePoints: [], // 测距点集合
|
|
|
measureLine: null, // 测距线对象
|
|
|
measureTooltip: null, // 测距提示框
|
|
|
@@ -276,8 +297,94 @@ export default {
|
|
|
});
|
|
|
|
|
|
this.clearMeasureData();
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+ initIframeInfo (){
|
|
|
+ let that = this;
|
|
|
+ let URL = window.location.href.split('#');
|
|
|
+ let type = '';
|
|
|
+ let code = '';
|
|
|
+ let center = '';
|
|
|
+ if(URL.length>1){
|
|
|
+ const paramsStr = URL[1].split('?')[1];
|
|
|
+ const params = {};
|
|
|
+ if (paramsStr) {
|
|
|
+ paramsStr.split('&').forEach(pair => {
|
|
|
+ const [key, value] = pair.split('=');
|
|
|
+ params[key] = decodeURIComponent(value);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ type = params.type;
|
|
|
+ code = params.code;
|
|
|
+ center = params.center;
|
|
|
+ }else{
|
|
|
+ const params = new URLSearchParams(window.location.search);
|
|
|
+ type = params.get('type');
|
|
|
+ code = params.get('code');
|
|
|
+ center = params.get('center');
|
|
|
+ }
|
|
|
+ // console.log("type======"+type); // 输出参数值
|
|
|
+ // console.log("code======"+code); // 输出参数值
|
|
|
+ // console.log("center===="+center); // 输出参数值
|
|
|
+
|
|
|
+ if(type == null || center == null) return
|
|
|
+ let zoom = 18;
|
|
|
+ if(type == 3){
|
|
|
+ zoom = 14;
|
|
|
+ }
|
|
|
+ const geometry = JSON.parse(center)
|
|
|
+ const latlnt = {lat:geometry[1],lng:geometry[0]}
|
|
|
+ map2DViewer.map.flyTo(latlnt, zoom, {
|
|
|
+ duration: 1, // 动画持续时间（秒）
|
|
|
+ easeLinearity: 0.25, // 动画缓动效果
|
|
|
+ });
|
|
|
+ let curTimer = undefined;
|
|
|
+ curTimer = setInterval(() => {
|
|
|
+ if(this.initShow.lifeDataFlag == true && this.initShow.dkDataFlag == true && this.initShow.lyDataFlag == true){
|
|
|
+ clearInterval(curTimer)
|
|
|
+ let feature = undefined;
|
|
|
+ // type= 1、楼宇 2、地块 3、十五分钟圈
|
|
|
+ Object.entries(this.landDatas).forEach(([key, item]) => {
|
|
|
+ if(type == 1 && item.properties.c_park_code == code){
|
|
|
+ feature = item
|
|
|
+ return
|
|
|
+ }else if(type == 2 && item.properties.c_parcel_number == code){
|
|
|
+ feature = item
|
|
|
+ return
|
|
|
+ }else if(type == 3){
|
|
|
+ // that.drawCircle({latlng:latlnt})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(type != 3){
|
|
|
+ this.BuildingInformationShow = true;
|
|
|
+ if(feature){
|
|
|
+ // 创建弹窗内容
|
|
|
+ const properties = feature.properties;
|
|
|
+ if(properties.column_name == '楼宇表'){
|
|
|
+ this.isDataTypeFlag = 1
|
|
|
+ }else{
|
|
|
+ this.isDataTypeFlag = 2
|
|
|
+ }
|
|
|
+ properties.cy_lable = '';
|
|
|
+ if(properties.c_industry_direction != undefined){
|
|
|
+ properties.cy_lable = properties.c_industry_direction
|
|
|
+ }
|
|
|
+ if(properties.content != undefined){
|
|
|
+ properties.cy_lable = properties.content
|
|
|
+ }
|
|
|
+ this.BuildingInformationProperties = properties;
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.BuildingInformationShow = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
colseWin(){
|
|
|
this.BuildingInformationShow = false;
|
|
|
},
|
|
|
@@ -294,22 +401,23 @@ export default {
|
|
|
},
|
|
|
getOauthToken() {
|
|
|
let that = this;
|
|
|
- let loginInfo = new FormData();
|
|
|
- // loginConfig 在config.js中配置，项目中灵活运用
|
|
|
- let keyArr = Object.keys(loginConfig);
|
|
|
- let valueArr = Object.values(loginConfig);
|
|
|
- keyArr.map(function (field, index) {
|
|
|
- loginInfo.append(field, valueArr[index]);
|
|
|
- });
|
|
|
- fetch(webConfig.authUrl + "oauth/user/login", {
|
|
|
- method: "POST",
|
|
|
- body: loginInfo,
|
|
|
- })
|
|
|
- .then((resp) => resp.json())
|
|
|
- .then((data) => {
|
|
|
- that.oauthToken = data.message;
|
|
|
- that.initMap();
|
|
|
- });
|
|
|
+ // let loginInfo = new FormData();
|
|
|
+ // // loginConfig 在config.js中配置，项目中灵活运用
|
|
|
+ // let keyArr = Object.keys(loginConfig);
|
|
|
+ // let valueArr = Object.values(loginConfig);
|
|
|
+ // keyArr.map(function (field, index) {
|
|
|
+ // loginInfo.append(field, valueArr[index]);
|
|
|
+ // });
|
|
|
+ // fetch(webConfig.authUrl + "oauth/user/login", {
|
|
|
+ // method: "POST",
|
|
|
+ // body: loginInfo,
|
|
|
+ // })
|
|
|
+ // .then((resp) => resp.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // that.oauthToken = data.message;
|
|
|
+ // that.initMap();
|
|
|
+ // });
|
|
|
+ that.initMap();
|
|
|
},
|
|
|
initMap() {
|
|
|
map2DViewer.map = L.map("map2DViewer", {
|
|
|
@@ -321,11 +429,14 @@ export default {
|
|
|
doubleClickZoom: false,
|
|
|
}).setView([31.17665808878003, 121.27975386938489], 18);
|
|
|
|
|
|
+ // this.layer = this.addTiledMapLayer(
|
|
|
+ // "internalMap?servertype=shmap_base_web&proxyToken=" + this.oauthToken
|
|
|
+ // ).addTo(map2DViewer.map);
|
|
|
this.layer = this.addTiledMapLayer(
|
|
|
- "internalMap?servertype=shmap_base_web&proxyToken=" + this.oauthToken
|
|
|
+ webConfig.map_url
|
|
|
).addTo(map2DViewer.map);
|
|
|
// 单击事件：清除所有绘制的元素和筛选结果
|
|
|
- map2DViewer.map.on("click", () => {
|
|
|
+ map2DViewer.map.on("click", (e) => {
|
|
|
// 清除圆圈
|
|
|
if (this.currentCircle) {
|
|
|
map2DViewer.map.removeLayer(this.currentCircle);
|
|
|
@@ -338,10 +449,28 @@ export default {
|
|
|
this.filteredLifeLayer = null; // 重置引用
|
|
|
}
|
|
|
|
|
|
+ if(this.isDraw){
|
|
|
+ this.drawCircle(e)
|
|
|
+ }
|
|
|
+
|
|
|
// 如果有其他需要清除的筛选结果数据，也可以在这里处理
|
|
|
// 例如：this.filteredResults = [];
|
|
|
});
|
|
|
map2DViewer.map.on("dblclick", (e) => {
|
|
|
+ this.drawCircle(e)
|
|
|
+ });
|
|
|
+
|
|
|
+ this.lifeDatas = {};
|
|
|
+ this.landDatas = {};
|
|
|
+ // 加载静态文件渲染geojson数据
|
|
|
+ this.getJSonDataToMap();
|
|
|
+ this.getJSonDataToMap2();
|
|
|
+ this.getJSonDataToMap3();
|
|
|
+
|
|
|
+ this.initIframeInfo(); // 第三方URL引进此工程获取的参数
|
|
|
+ },
|
|
|
+
|
|
|
+ drawCircle(e){
|
|
|
// 清除上一次的圆圈和筛选结果
|
|
|
if (this.currentCircle) {
|
|
|
map2DViewer.map.removeLayer(this.currentCircle);
|
|
|
@@ -349,7 +478,7 @@ export default {
|
|
|
if (this.filteredLifeLayer) {
|
|
|
this.filteredLifeLayer.clearLayers();
|
|
|
}
|
|
|
-
|
|
|
+ // console.log('[ ==== ] >', e.latlng)
|
|
|
// 创建新的1500米半径圆圈
|
|
|
this.currentCircle = L.circle(e.latlng, {
|
|
|
color: "#ff7800",
|
|
|
@@ -364,42 +493,6 @@ export default {
|
|
|
L.marker(e.latlng).addTo(this.filteredLifeLayer);
|
|
|
// 筛选并渲染lifeDatas中在圆圈内的对象
|
|
|
this.renderLifeDatasInCircle(e.latlng);
|
|
|
- });
|
|
|
-
|
|
|
- map2DViewer.map.on("touchend", (e) => {
|
|
|
- var now = new Date().getTime();
|
|
|
- if (now - lastTouchTime < 500) { // 假设双击间隔小于500毫秒
|
|
|
- // 清除上一次的圆圈和筛选结果
|
|
|
- if (this.currentCircle) {
|
|
|
- map2DViewer.map.removeLayer(this.currentCircle);
|
|
|
- }
|
|
|
- if (this.filteredLifeLayer) {
|
|
|
- this.filteredLifeLayer.clearLayers();
|
|
|
- }
|
|
|
-
|
|
|
- // 创建新的1500米半径圆圈
|
|
|
- this.currentCircle = L.circle(e.latlng, {
|
|
|
- color: "#ff7800",
|
|
|
- fillColor: "#ff7800",
|
|
|
- fillOpacity: 0.1,
|
|
|
- radius: 1500,
|
|
|
- }).addTo(map2DViewer.map);
|
|
|
-
|
|
|
- // 创建新的图层组用于存放筛选结果
|
|
|
- this.filteredLifeLayer = L.featureGroup().addTo(map2DViewer.map);
|
|
|
- // 在圆圈中心添加标记点
|
|
|
- L.marker(e.latlng).addTo(this.filteredLifeLayer);
|
|
|
- // 筛选并渲染lifeDatas中在圆圈内的对象
|
|
|
- this.renderLifeDatasInCircle(e.latlng);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.lifeDatas = {};
|
|
|
- this.landDatas = {};
|
|
|
- // 加载静态文件渲染geojson数据
|
|
|
- this.getJSonDataToMap();
|
|
|
- this.getJSonDataToMap2();
|
|
|
- this.getJSonDataToMap3();
|
|
|
},
|
|
|
|
|
|
// 添加tiledMapLayer图层 -- 针对arcgis rest services
|
|
|
@@ -431,8 +524,8 @@ export default {
|
|
|
feature.properties.c_parcel_name ||
|
|
|
"未命名区域";
|
|
|
const markerColor = feature.properties.markerColor || color; // 优先使用特性中定义的颜色
|
|
|
+ this.landDatas[markerName].properties.center = centroid;
|
|
|
|
|
|
- this.landDatas[markerName] = centroid;
|
|
|
const customIcon = L.divIcon({
|
|
|
html: `<div class="floating-marker" style="color: ${markerColor}">
|
|
|
<div class="marker-content">${markerName}</div>
|
|
|
@@ -580,7 +673,8 @@ export default {
|
|
|
// for (const [key, value] of Object.entries(properties)) {
|
|
|
// popupContent += `<div class="popup-row"><span class="popup-label">${key}:</span><span class="popup-value">${value}</span></div>`;
|
|
|
// }
|
|
|
- let obj = {name:'名称',type:'类型',circle_type:'生活圈类型',set_type:'规划类型',build_area:'区域面积',county:'区县名称',town:'乡镇名称',feature_level:'行政级别',content:'内容',set_time:'规定时间',open_status:'开放状态',config_type:'配置类型',lxdh:'联系电话',address:'地址',owner:'所有者',operation_model:'操作部门'};
|
|
|
+ //let obj = {name:'名称',type:'类型',circle_type:'生活圈类型',set_type:'规划类型',build_area:'区域面积',county:'区县名称',town:'乡镇名称',feature_level:'行政级别',content:'内容',set_time:'规定时间',open_status:'开放状态',config_type:'配置类型',lxdh:'联系电话',address:'地址',owner:'所有者',operation_model:'操作部门'};
|
|
|
+ let obj = {name:'项目名称',circle_type:'生活圈类型',type:'类型',county:'区县名称',town:'乡镇名称',feature_level:'级别',content:'项目内容',open_status:'开放情况',config_type:'配置类型',lxdh:'联系电话',address:'地址'};
|
|
|
for (const [key, value] of Object.entries(obj)) {
|
|
|
let val = properties[key];
|
|
|
if(val == undefined || val == null || val == ''){
|
|
|
@@ -603,12 +697,13 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
getJSonDataToMap() {
|
|
|
+ let that = this;
|
|
|
// 先删除历史图层
|
|
|
if (map2DViewer.map.hasLayer(map2DViewer.groups["15分钟生活圈_label"])) {
|
|
|
map2DViewer.groups["15分钟生活圈_label"].remove();
|
|
|
}
|
|
|
// 请求并渲染新的区域图层
|
|
|
- get("/static/json/15minLifeData.geojson", "").then((geoJson) => {
|
|
|
+ get(baseUrl+"static/json/15minLifeData.geojson", "").then((geoJson) => {
|
|
|
// 存放所有的点数据
|
|
|
map2DViewer.groups["15分钟生活圈_label"] = L.featureGroup();
|
|
|
geoJson.features.map((feature) => {
|
|
|
@@ -619,15 +714,17 @@ export default {
|
|
|
this.lifeDatas[feature.properties.name] = feature;
|
|
|
}
|
|
|
});
|
|
|
+ that.initShow.lifeDataFlag = true
|
|
|
});
|
|
|
},
|
|
|
getJSonDataToMap2() {
|
|
|
+ let that = this;
|
|
|
// 先删除历史图层
|
|
|
if (map2DViewer.map.hasLayer(map2DViewer.groups["dkModelColChName_polygon"])) {
|
|
|
map2DViewer.groups["dkModelColChName_polygon"].remove();
|
|
|
}
|
|
|
// 请求并渲染新的区域图层
|
|
|
- get("/static/json/地块数据-20250820.geojson", "").then((geoJson) => {
|
|
|
+ get(baseUrl+"static/json/地块数据-20250820.geojson", "").then((geoJson) => {
|
|
|
// 存放所有的面数据
|
|
|
map2DViewer.groups["dkModelColChName_polygon"] = L.featureGroup();
|
|
|
map2DViewer.groups["dkModelColChName_polygon"].addTo(map2DViewer.map);
|
|
|
@@ -636,17 +733,25 @@ export default {
|
|
|
let newCorrectCoordArr = publicFun.latLngsToReverseByLngLat(correctCordArr);
|
|
|
feature.geometry.coordinates = newCorrectCoordArr;
|
|
|
let configKey = dkModelColChName;
|
|
|
+ if (feature.properties) {
|
|
|
+ const markerName =
|
|
|
+ feature.properties.c_parcel_name ||
|
|
|
+ "未命名区域";
|
|
|
+ this.landDatas[markerName] = feature;
|
|
|
+ }
|
|
|
this.addPolygon(feature, "#409EFF", configKey, "dkModelColChName");
|
|
|
});
|
|
|
+ that.initShow.dkDataFlag = true
|
|
|
});
|
|
|
},
|
|
|
getJSonDataToMap3() {
|
|
|
+ let that = this;
|
|
|
// 先删除历史图层
|
|
|
if (map2DViewer.map.hasLayer(map2DViewer.groups["lyModelColChName_polygon"])) {
|
|
|
map2DViewer.groups["lyModelColChName_polygon"].remove();
|
|
|
}
|
|
|
// 请求并渲染新的区域图层
|
|
|
- get("/static/json/楼宇数据-20250820.geojson", "").then((geoJson) => {
|
|
|
+ get(baseUrl+"static/json/楼宇数据-20250820.geojson", "").then((geoJson) => {
|
|
|
// 存放所有的面数据
|
|
|
map2DViewer.groups["lyModelColChName_polygon"] = L.featureGroup();
|
|
|
map2DViewer.groups["lyModelColChName_polygon"].addTo(map2DViewer.map);
|
|
|
@@ -658,12 +763,12 @@ export default {
|
|
|
if (feature.properties) {
|
|
|
const markerName =
|
|
|
feature.properties.c_resource_name ||
|
|
|
- feature.properties.c_parcel_name ||
|
|
|
"未命名区域";
|
|
|
this.landDatas[markerName] = feature;
|
|
|
}
|
|
|
this.addPolygon(feature, "#67C23A", configKey, "lyModelColChName");
|
|
|
});
|
|
|
+ that.initShow.lyDataFlag = true
|
|
|
});
|
|
|
},
|
|
|
// 新增搜索处理方法
|
|
|
@@ -689,7 +794,7 @@ export default {
|
|
|
if (key.toLowerCase().includes(lowerKeyword) && this.searchResults.length <= 10) {
|
|
|
this.searchResults.push({
|
|
|
key: key,
|
|
|
- value: item,
|
|
|
+ value: item.properties.center,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
@@ -719,12 +824,28 @@ export default {
|
|
|
// 地块\楼宇
|
|
|
setTimeout(() => {
|
|
|
// 平滑移动视角到标记位置
|
|
|
- map2DViewer.map.flyTo(this.landDatas[key], 18, {
|
|
|
+ map2DViewer.map.flyTo(this.landDatas[key].properties.center, 18, {
|
|
|
duration: 1, // 动画持续时间（秒）
|
|
|
easeLinearity: 0.25, // 动画缓动效果
|
|
|
});
|
|
|
}, 0);
|
|
|
},
|
|
|
+ toggleDraw(){
|
|
|
+ this.isDraw = !this.isDraw;
|
|
|
+ if(this.isDraw == false){
|
|
|
+ // 清除圆圈
|
|
|
+ if (this.currentCircle) {
|
|
|
+ map2DViewer.map.removeLayer(this.currentCircle);
|
|
|
+ this.currentCircle = null; // 重置引用
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清除筛选结果图层
|
|
|
+ if (this.filteredLifeLayer) {
|
|
|
+ map2DViewer.map.removeLayer(this.filteredLifeLayer);
|
|
|
+ this.filteredLifeLayer = null; // 重置引用
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
// 切换测距模式
|
|
|
toggleMeasureMode() {
|
|
|
this.isMeasuring = !this.isMeasuring;
|
|
|
@@ -1241,7 +1362,7 @@ export default {
|
|
|
background: white;
|
|
|
border-radius: 0.5rem;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
- z-index: 1000;
|
|
|
+ z-index: 10000;
|
|
|
max-height: 200px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
@@ -1297,6 +1418,14 @@ export default {
|
|
|
background-repeat: no-repeat;
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+.mapPinSimpleArea{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: url('../../public/static/image/mapPinSimpleArea.svg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin-right: 6px;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
|
|
|
.measure-text {
|
|
|
font-size: 14px;
|
|
|
@@ -1444,6 +1573,9 @@ export default {
|
|
|
.measure-icon {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
+ .mapPinSimpleArea{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
/* 分段距离标签样式 */
|
|
|
.segment-measure-tooltip {
|
|
|
@@ -1486,7 +1618,7 @@ export default {
|
|
|
// background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
|
background: #f1f5fe;
|
|
|
border-radius: 8px;
|
|
|
- padding: 12px;
|
|
|
+ padding: 6px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
mork
