From 174e967bce0cae7a589965cc19fd6640b3244b4d Mon Sep 17 00:00:00 2001
From: QI_YUJIE <2878090898@qq.com>
Date: Thu, 8 Jun 2023 17:57:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E6=81=AF=E6=B8=AF=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 infoport/homesteadDetail.html                 | 10 +--
 infoport/propertyDetail.html                  |  8 +-
 infoport/resourceDetail.html                  |  8 +-
 infoport/static/js/project/homestead.js       | 30 ++++++-
 infoport/static/js/project/homesteadDetail.js | 84 ++++++++++++++++++-
 infoport/static/js/project/property.js        | 28 +++++++
 infoport/static/js/project/propertyDetail.js  | 79 ++++++++++++++++-
 infoport/static/js/project/resource.js        | 30 ++++++-
 infoport/static/js/project/resourceDetail.js  | 72 +++++++++++++++-
 9 files changed, 325 insertions(+), 24 deletions(-)
diff --git a/infoport/homesteadDetail.html b/infoport/homesteadDetail.html
index f7b4791..dbef4b3 100644
--- a/infoport/homesteadDetail.html
+++ b/infoport/homesteadDetail.html
@@ -12,7 +12,8 @@
     <link href="static/css/main.css" rel="stylesheet" type="text/css" />
     <link href="static/css/index.css" rel="stylesheet" type="text/css" />
     <link href="static/css/homesteadDetail.css" rel="stylesheet" type="text/css" />
-    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=XzwOBaO4CElCsPdl8LIFEvv5rTemG6w1"></script>
+    <link href="../static/css/ol/ol.css" rel="stylesheet" type="text/css" />
+    <script src="../static/js/common/ol.js"></script>
 </head>
 
 <body>
@@ -67,7 +68,7 @@
                 <p class="detail_tit">详细信息</p>
                 <p class="phoneIcon"><img src="static/images/dialog_icon_3.png" alt=""></p>
                 <i class="sanjiao-left"></i>
-                <p class="phone">15925781687 王程程</p>
+                <p class="phone">{{phone}} {{leader}}</p>
             </div>
 
             <div class="dialog_table">
@@ -155,11 +156,6 @@
                 <div id="container"></div>
             </div>
             </script>
-<!--            <script>-->
-<!--                var map = new BMapGL.Map('container'); // 创建Map实例-->
-<!--                map.centerAndZoom(new BMapGL.Point(116.320938,39.950026), 18); // 初始化地图,设置中心点坐标和地图级别-->
-<!--                map.enableScrollWheelZoom(false); // 开启鼠标滚轮缩放-->
-<!--            </script>-->
         </div>
 
         <div class="footer" id="webContent">
diff --git a/infoport/propertyDetail.html b/infoport/propertyDetail.html
index 2ca6992..56be151 100644
--- a/infoport/propertyDetail.html
+++ b/infoport/propertyDetail.html
@@ -12,7 +12,8 @@
     <link href="static/css/main.css" rel="stylesheet" type="text/css" />
     <link href="static/css/index.css" rel="stylesheet" type="text/css" />
     <link href="static/css/homesteadDetail.css" rel="stylesheet" type="text/css" />
-    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=XzwOBaO4CElCsPdl8LIFEvv5rTemG6w1"></script>
+    <link href="../static/css/ol/ol.css" rel="stylesheet" type="text/css" />
+    <script src="../static/js/common/ol.js"></script>
 </head>
 
 <body>
@@ -136,11 +137,6 @@
                 <div id="container"></div>
             </div>
             </script>
-<!--            <script>-->
-<!--                var map = new BMapGL.Map('container'); // 创建Map实例-->
-<!--                map.centerAndZoom(new BMapGL.Point(116.320938,39.950026), 18); // 初始化地图,设置中心点坐标和地图级别-->
-<!--                map.enableScrollWheelZoom(false); // 开启鼠标滚轮缩放-->
-<!--            </script>-->
         </div>
 
         <div class="footer" id="webContent">
diff --git a/infoport/resourceDetail.html b/infoport/resourceDetail.html
index b13959f..1da7212 100644
--- a/infoport/resourceDetail.html
+++ b/infoport/resourceDetail.html
@@ -12,7 +12,8 @@
     <link href="static/css/main.css" rel="stylesheet" type="text/css" />
     <link href="static/css/index.css" rel="stylesheet" type="text/css" />
     <link href="static/css/homesteadDetail.css" rel="stylesheet" type="text/css" />
-    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=XzwOBaO4CElCsPdl8LIFEvv5rTemG6w1"></script>
+    <link href="../static/css/ol/ol.css" rel="stylesheet" type="text/css" />
+    <script src="../static/js/common/ol.js"></script>
 </head>
 
 <body>
@@ -126,11 +127,6 @@
                 <div id="container"></div>
             </div>
             </script>
-<!--            <script>-->
-<!--                var map = new BMapGL.Map('container'); // 创建Map实例-->
-<!--                map.centerAndZoom(new BMapGL.Point(116.320938,39.950026), 18); // 初始化地图,设置中心点坐标和地图级别-->
-<!--                map.enableScrollWheelZoom(false); // 开启鼠标滚轮缩放-->
-<!--            </script>-->
         </div>
 
         <div class="footer" id="webContent">
diff --git a/infoport/static/js/project/homestead.js b/infoport/static/js/project/homestead.js
index 639532a..2ba46ee 100644
--- a/infoport/static/js/project/homestead.js
+++ b/infoport/static/js/project/homestead.js
@@ -103,6 +103,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
                     // name: item.centerName,
                     // centerDeptId: item.deptId,
                     level: 'homestead',
+                    id: item.id
                 });
                 features.push(iconFeature);
             }
@@ -241,6 +242,33 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
               // shiftDragZoom: false,     // shift + 鼠标左键拖拽 放大地图
             })*/
         });
+        // 地图点击事件
+        module.data.map.on("click", (evt) => {
+            let feature = module.data.map.forEachFeatureAtPixel(
+                evt.pixel,
+                (feature) => feature
+            );
+            if (feature) {
+                if (feature.get('level') === 'homestead') {
+                    openDialog(feature.get('id'));
+                }
+            }
+        });
+        // 鼠标指针移动到指定的feature上，改变鼠标指针的样式为 pointer(小手)
+        module.data.map.on('pointermove', (evt) => {
+            if (evt.dragging) {
+                return ;
+            }
+            const pixel = module.data.map.getEventPixel(evt.originalEvent);
+            // const hit = module.data.map.hasFeatureAtPixel(pixel);
+            // let features = module.data.map.getFeaturesAtPixel(pixel);
+            const hit = module.data.map.forEachFeatureAtPixel(pixel, function (feature) {
+                if (feature && feature.get('level') === 'homestead') {
+                    return true;
+                }
+            });
+            module.data.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+        });
     }
 
     selectChange = function(){
@@ -302,7 +330,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
 
     turnThePage = function (pageNum) {
         tools.doGet(zjdzdxxList, {
-            deptId: 187,
+            deptId: $('#treeselectSecondContent').val() == null ? 100 : $('#treeselectSecondContent').val(),
             translate_dict: 1,
             pageNum: pageNum,
             pageSize: 10,
diff --git a/infoport/static/js/project/homesteadDetail.js b/infoport/static/js/project/homesteadDetail.js
index d8056fc..2c4a0ea 100644
--- a/infoport/static/js/project/homesteadDetail.js
+++ b/infoport/static/js/project/homesteadDetail.js
@@ -5,7 +5,10 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
     //数据存储
     var module = {
         data: {
-            propertyList:''
+            propertyList:'',
+            phone: '',
+            leader: '',
+            map: '',                // 地图图层
         },
     };
     var tools = new Tools();
@@ -18,6 +21,84 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
         // map.enableScrollWheelZoom(false); // 开启鼠标滚轮缩放
     };
 
+    module.useContent = function (data) {
+        if (data.code == 200) {
+            module.data.phone = data.data.phone;
+            module.data.leader = data.data.leader;
+            var propertyDetailData = template('propertyDetailData', module.data);
+            $("#propertyDetailContent").html(propertyDetailData);
+            initMap(data.data);
+        }
+    }
+
+    initMap = function (dept) {
+        document.getElementById("container").innerHTML = "";
+        // 定义地图投影
+        let projection = new ol.proj.Projection({
+            code: "EPSG:3857",
+            units: "degrees",
+        });
+        // 定义地图图层
+        let aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
+                    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+        });
+        let yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+        });
+        //加载地图
+        module.data.map = new ol.Map({
+            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
+            layers: [aerial, yingxzi],
+            projection: projection,
+            target: "container",
+            view: new ol.View({
+                // center: mapCenterLocation, // 地图中心坐标
+                zoom: 16,
+                minZoom: 1, //地图缩小限制
+                maxZoom: 18, //地图放大限制
+            }),
+            /*interactions: ol.interaction.defaults({
+              doubleClickZoom: false,   // 双击放大地图
+              // mouseWheelZoom: false,    // 鼠标滚轮放大地图
+              // shiftDragZoom: false,     // shift + 鼠标左键拖拽 放大地图
+            })*/
+        });
+
+        if (module.data.propertyDetail && module.data.propertyDetail.theGeomJson) {
+            const homesteadDetail = new ol.layer.Vector({
+                source: new ol.source.Vector({
+                    features: new ol.format.GeoJSON().readFeatures(module.data.propertyDetail.theGeomJson),
+                }),
+                name: 'homesteadDetail',
+                style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        //矢量图层填充颜色，以及透明度
+                        color: "rgba(22, 233, 15, 0.3)",
+                    }),
+                    stroke: new ol.style.Stroke({
+                        //边界样式
+                        color: "#16E90F",
+                        width: 2,
+                    }),
+                })
+            });
+            module.data.map.addLayer(homesteadDetail);
+            module.data.map.getView().setCenter(ol.extent.getCenter(homesteadDetail.getSource().getExtent()));
+        } else {
+            module.data.map.getView().setCenter(ol.proj.fromLonLat([dept.lng, dept.lat]));
+        }
+    }
+
     module.webList = function (data) {
         if (data.code == 200) {
             var content = data.rows;
@@ -38,6 +119,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
                 tableName: 't_homestead_zjdzdxx',
                 bizPath: 'home'
             }, module.attachmentDetail , true);
+            tools.doGet(treeselectSecond+content.deptId, {}, module.useContent , true);
             // var propertyDetailData = template('propertyDetailData', module.data);
             // $("#propertyDetailContent").html(propertyDetailData);
             // $('#dialog').css('display','block');
diff --git a/infoport/static/js/project/property.js b/infoport/static/js/project/property.js
index aec0ddd..7d6fe69 100644
--- a/infoport/static/js/project/property.js
+++ b/infoport/static/js/project/property.js
@@ -100,6 +100,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
                     // name: item.centerName,
                     // centerDeptId: item.deptId,
                     level: 'permanent',
+                    id: item.id
                 });
                 features.push(iconFeature);
             }
@@ -248,6 +249,33 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
               // shiftDragZoom: false,     // shift + 鼠标左键拖拽 放大地图
             })*/
         });
+        // 地图点击事件
+        module.data.map.on("click", (evt) => {
+            let feature = module.data.map.forEachFeatureAtPixel(
+                evt.pixel,
+                (feature) => feature
+            );
+            if (feature) {
+                if (feature.get('level') === 'permanent') {
+                    openDialog(feature.get('id'));
+                }
+            }
+        });
+        // 鼠标指针移动到指定的feature上，改变鼠标指针的样式为 pointer(小手)
+        module.data.map.on('pointermove', (evt) => {
+            if (evt.dragging) {
+                return ;
+            }
+            const pixel = module.data.map.getEventPixel(evt.originalEvent);
+            // const hit = module.data.map.hasFeatureAtPixel(pixel);
+            // let features = module.data.map.getFeaturesAtPixel(pixel);
+            const hit = module.data.map.forEachFeatureAtPixel(pixel, function (feature) {
+                if (feature && feature.get('level') === 'permanent') {
+                    return true;
+                }
+            });
+            module.data.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+        });
     }
 
     selectChange = function(){
diff --git a/infoport/static/js/project/propertyDetail.js b/infoport/static/js/project/propertyDetail.js
index b6ba1d5..a322004 100644
--- a/infoport/static/js/project/propertyDetail.js
+++ b/infoport/static/js/project/propertyDetail.js
@@ -5,7 +5,8 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
     //数据存储
     var module = {
         data: {
-            propertyList:''
+            propertyList:'',
+            map: '',                // 地图图层
         },
     };
     var tools = new Tools();
@@ -24,6 +25,82 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
             module.data.leader = data.data.leader;
             var propertyDetailData = template('propertyDetailData', module.data);
             $("#propertyDetailContent").html(propertyDetailData);
+            initMap(data.data);
+        }
+    }
+
+    initMap = function (dept) {
+        document.getElementById("container").innerHTML = "";
+        // 定义地图投影
+        let projection = new ol.proj.Projection({
+            code: "EPSG:3857",
+            units: "degrees",
+        });
+        // 定义地图图层
+        let aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
+                    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+        });
+        let yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+        });
+        //加载地图
+        module.data.map = new ol.Map({
+            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
+            layers: [aerial, yingxzi],
+            projection: projection,
+            target: "container",
+            view: new ol.View({
+                // center: mapCenterLocation, // 地图中心坐标
+                zoom: 16,
+                minZoom: 1, //地图缩小限制
+                maxZoom: 18, //地图放大限制
+            }),
+            /*interactions: ol.interaction.defaults({
+              doubleClickZoom: false,   // 双击放大地图
+              // mouseWheelZoom: false,    // 鼠标滚轮放大地图
+              // shiftDragZoom: false,     // shift + 鼠标左键拖拽 放大地图
+            })*/
+        });
+
+        if (module.data.propertyDetail && module.data.propertyDetail.theGeom) {
+            const permanentLayer = new ol.layer.Vector({
+                source: new ol.source.Vector({
+                    features: new ol.format.GeoJSON().readFeatures(module.data.propertyDetail.theGeom),
+                }),
+                name: 'permanentDetail',
+                style: new ol.style.Style({
+                    image: new ol.style.Icon({
+                        //设置图标偏移
+                        anchor: [0.5, 1],
+                        //标注样式的起点位置
+                        anchorOrigin: "top-right",
+                        //X方向单位：分数
+                        anchorXUnits: "fraction",
+                        //Y方向单位：像素
+                        anchorYUnits: "pixels",
+                        //偏移起点位置的方向
+                        offsetOrigin: "top-right",
+                        //透明度
+                        opacity: 0.9,
+                        //图片路径
+                        src: '/infoport/static/images/zc_icon.png',
+                    })
+                })
+            });
+            module.data.map.addLayer(permanentLayer);
+            module.data.map.getView().setCenter(ol.extent.getCenter(permanentLayer.getSource().getExtent()));
+        } else {
+            module.data.map.getView().setCenter(ol.proj.fromLonLat([dept.lng, dept.lat]));
         }
     }
 
diff --git a/infoport/static/js/project/resource.js b/infoport/static/js/project/resource.js
index 5003a3a..058e135 100644
--- a/infoport/static/js/project/resource.js
+++ b/infoport/static/js/project/resource.js
@@ -102,6 +102,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
                     // name: item.centerName,
                     // centerDeptId: item.deptId,
                     level: 'resource',
+                    id: item.id
                 });
                 features.push(iconFeature);
             }
@@ -239,6 +240,33 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
               // shiftDragZoom: false,     // shift + 鼠标左键拖拽 放大地图
             })*/
         });
+        // 地图点击事件
+        module.data.map.on("click", (evt) => {
+            let feature = module.data.map.forEachFeatureAtPixel(
+                evt.pixel,
+                (feature) => feature
+            );
+            if (feature) {
+                if (feature.get('level') === 'resource') {
+                    openDialog(feature.get('id'));
+                }
+            }
+        });
+        // 鼠标指针移动到指定的feature上，改变鼠标指针的样式为 pointer(小手)
+        module.data.map.on('pointermove', (evt) => {
+            if (evt.dragging) {
+                return ;
+            }
+            const pixel = module.data.map.getEventPixel(evt.originalEvent);
+            // const hit = module.data.map.hasFeatureAtPixel(pixel);
+            // let features = module.data.map.getFeaturesAtPixel(pixel);
+            const hit = module.data.map.forEachFeatureAtPixel(pixel, function (feature) {
+                if (feature && feature.get('level') === 'resource') {
+                    return true;
+                }
+            });
+            module.data.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+        });
     }
 
     selectChange = function(){
@@ -297,7 +325,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
 
     turnThePage = function (pageNum) {
         tools.doGet(resourceList, {
-            deptId: 187,
+            deptId: $('#treeselectSecondContent').val() == null ? 100 : $('#treeselectSecondContent').val(),
             translate_dict: 1,
             pageNum: pageNum,
             pageSize: 10,
diff --git a/infoport/static/js/project/resourceDetail.js b/infoport/static/js/project/resourceDetail.js
index 0cc1048..48cf54b 100644
--- a/infoport/static/js/project/resourceDetail.js
+++ b/infoport/static/js/project/resourceDetail.js
@@ -5,7 +5,8 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
     //数据存储
     var module = {
         data: {
-            propertyList:''
+            propertyList:'',
+            map: '',                // 地图图层
         },
     };
     var tools = new Tools();
@@ -24,6 +25,75 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
             module.data.leader = data.data.leader;
             var propertyDetailData = template('propertyDetailData', module.data);
             $("#propertyDetailContent").html(propertyDetailData);
+            initMap(data.data);
+        }
+    }
+
+    initMap = function (dept) {
+        document.getElementById("container").innerHTML = "";
+        // 定义地图投影
+        let projection = new ol.proj.Projection({
+            code: "EPSG:3857",
+            units: "degrees",
+        });
+        // 定义地图图层
+        let aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
+                    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+        });
+        let yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+        });
+        //加载地图
+        module.data.map = new ol.Map({
+            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
+            layers: [aerial, yingxzi],
+            projection: projection,
+            target: "container",
+            view: new ol.View({
+                // center: mapCenterLocation, // 地图中心坐标
+                zoom: 16,
+                minZoom: 1, //地图缩小限制
+                maxZoom: 18, //地图放大限制
+            }),
+            /*interactions: ol.interaction.defaults({
+              doubleClickZoom: false,   // 双击放大地图
+              // mouseWheelZoom: false,    // 鼠标滚轮放大地图
+              // shiftDragZoom: false,     // shift + 鼠标左键拖拽 放大地图
+            })*/
+        });
+
+        if (module.data.propertyDetail && module.data.propertyDetail.theGeomJson) {
+            const resourceDetail = new ol.layer.Vector({
+                source: new ol.source.Vector({
+                    features: new ol.format.GeoJSON().readFeatures(module.data.propertyDetail.theGeomJson),
+                }),
+                name: 'resourceDetail',
+                style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        //矢量图层填充颜色，以及透明度
+                        color: "rgba(255, 255, 0, 0.3)",
+                    }),
+                    stroke: new ol.style.Stroke({
+                        //边界样式
+                        color: "#ffff00",
+                        width: 2,
+                    }),
+                })
+            });
+            module.data.map.addLayer(resourceDetail);
+            module.data.map.getView().setCenter(ol.extent.getCenter(resourceDetail.getSource().getExtent()));
+        } else {
+            module.data.map.getView().setCenter(ol.proj.fromLonLat([dept.lng, dept.lat]));
         }
     }
 
