zhangzl
/
nsgk_web
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

信息港地图修改

RongCheng
QI_YUJIE 2 年之前
父節點
34acab8b6c
當前提交
174e967bce
共有 9 個檔案被更改，包括 325 行新增 和 24 行删除
統一視圖
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -7
      infoport/homesteadDetail.html
  2. +2
    -6
      infoport/propertyDetail.html
  3. +2
    -6
      infoport/resourceDetail.html
  4. +29
    -1
      infoport/static/js/project/homestead.js
  5. +83
    -1
      infoport/static/js/project/homesteadDetail.js
  6. +28
    -0
      infoport/static/js/project/property.js
  7. +78
    -1
      infoport/static/js/project/propertyDetail.js
  8. +29
    -1
      infoport/static/js/project/resource.js
  9. +71
    -1
      infoport/static/js/project/resourceDetail.js

+ 3
- 7
infoport/homesteadDetail.html 查看文件

@@ -12,7 +12,8 @@
<link href="static/css/main.css" rel="stylesheet" type="text/css" /> <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/index.css" rel="stylesheet" type="text/css" />
<link href="static/css/homesteadDetail.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> </head>


<body> <body>
@@ -67,7 +68,7 @@
<p class="detail_tit">详细信息</p> <p class="detail_tit">详细信息</p>
<p class="phoneIcon"><img src="static/images/dialog_icon_3.png" alt=""></p> <p class="phoneIcon"><img src="static/images/dialog_icon_3.png" alt=""></p>
<i class="sanjiao-left"></i> <i class="sanjiao-left"></i>
<p class="phone">15925781687 王程程</p>
<p class="phone">{{phone}} {{leader}}</p>
</div> </div>


<div class="dialog_table"> <div class="dialog_table">
@@ -155,11 +156,6 @@
<div id="container"></div> <div id="container"></div>
</div> </div>
</script> </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>


<div class="footer" id="webContent"> <div class="footer" id="webContent">


+ 2
- 6
infoport/propertyDetail.html 查看文件

@@ -12,7 +12,8 @@
<link href="static/css/main.css" rel="stylesheet" type="text/css" /> <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/index.css" rel="stylesheet" type="text/css" />
<link href="static/css/homesteadDetail.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> </head>


<body> <body>
@@ -136,11 +137,6 @@
<div id="container"></div> <div id="container"></div>
</div> </div>
</script> </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>


<div class="footer" id="webContent"> <div class="footer" id="webContent">


+ 2
- 6
infoport/resourceDetail.html 查看文件

@@ -12,7 +12,8 @@
<link href="static/css/main.css" rel="stylesheet" type="text/css" /> <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/index.css" rel="stylesheet" type="text/css" />
<link href="static/css/homesteadDetail.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> </head>


<body> <body>
@@ -126,11 +127,6 @@
<div id="container"></div> <div id="container"></div>
</div> </div>
</script> </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>


<div class="footer" id="webContent"> <div class="footer" id="webContent">


+ 29
- 1
infoport/static/js/project/homestead.js 查看文件

@@ -103,6 +103,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
// name: item.centerName, // name: item.centerName,
// centerDeptId: item.deptId, // centerDeptId: item.deptId,
level: 'homestead', level: 'homestead',
id: item.id
}); });
features.push(iconFeature); features.push(iconFeature);
} }
@@ -241,6 +242,33 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
// shiftDragZoom: false, // shift + 鼠标左键拖拽 放大地图 // 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(){ selectChange = function(){
@@ -302,7 +330,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function


turnThePage = function (pageNum) { turnThePage = function (pageNum) {
tools.doGet(zjdzdxxList, { tools.doGet(zjdzdxxList, {
deptId: 187,
deptId: $('#treeselectSecondContent').val() == null ? 100 : $('#treeselectSecondContent').val(),
translate_dict: 1, translate_dict: 1,
pageNum: pageNum, pageNum: pageNum,
pageSize: 10, pageSize: 10,


+ 83
- 1
infoport/static/js/project/homesteadDetail.js 查看文件

@@ -5,7 +5,10 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
//数据存储 //数据存储
var module = { var module = {
data: { data: {
propertyList:''
propertyList:'',
phone: '',
leader: '',
map: '', // 地图图层
}, },
}; };
var tools = new Tools(); var tools = new Tools();
@@ -18,6 +21,84 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
// map.enableScrollWheelZoom(false); // 开启鼠标滚轮缩放 // 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) { module.webList = function (data) {
if (data.code == 200) { if (data.code == 200) {
var content = data.rows; var content = data.rows;
@@ -38,6 +119,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
tableName: 't_homestead_zjdzdxx', tableName: 't_homestead_zjdzdxx',
bizPath: 'home' bizPath: 'home'
}, module.attachmentDetail , true); }, module.attachmentDetail , true);
tools.doGet(treeselectSecond+content.deptId, {}, module.useContent , true);
// var propertyDetailData = template('propertyDetailData', module.data); // var propertyDetailData = template('propertyDetailData', module.data);
// $("#propertyDetailContent").html(propertyDetailData); // $("#propertyDetailContent").html(propertyDetailData);
// $('#dialog').css('display','block'); // $('#dialog').css('display','block');


+ 28
- 0
infoport/static/js/project/property.js 查看文件

@@ -100,6 +100,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
// name: item.centerName, // name: item.centerName,
// centerDeptId: item.deptId, // centerDeptId: item.deptId,
level: 'permanent', level: 'permanent',
id: item.id
}); });
features.push(iconFeature); features.push(iconFeature);
} }
@@ -248,6 +249,33 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
// shiftDragZoom: false, // shift + 鼠标左键拖拽 放大地图 // 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(){ selectChange = function(){


+ 78
- 1
infoport/static/js/project/propertyDetail.js 查看文件

@@ -5,7 +5,8 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
//数据存储 //数据存储
var module = { var module = {
data: { data: {
propertyList:''
propertyList:'',
map: '', // 地图图层
}, },
}; };
var tools = new Tools(); var tools = new Tools();
@@ -24,6 +25,82 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
module.data.leader = data.data.leader; module.data.leader = data.data.leader;
var propertyDetailData = template('propertyDetailData', module.data); var propertyDetailData = template('propertyDetailData', module.data);
$("#propertyDetailContent").html(propertyDetailData); $("#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]));
} }
} }




+ 29
- 1
infoport/static/js/project/resource.js 查看文件

@@ -102,6 +102,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
// name: item.centerName, // name: item.centerName,
// centerDeptId: item.deptId, // centerDeptId: item.deptId,
level: 'resource', level: 'resource',
id: item.id
}); });
features.push(iconFeature); features.push(iconFeature);
} }
@@ -239,6 +240,33 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
// shiftDragZoom: false, // shift + 鼠标左键拖拽 放大地图 // 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(){ selectChange = function(){
@@ -297,7 +325,7 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function


turnThePage = function (pageNum) { turnThePage = function (pageNum) {
tools.doGet(resourceList, { tools.doGet(resourceList, {
deptId: 187,
deptId: $('#treeselectSecondContent').val() == null ? 100 : $('#treeselectSecondContent').val(),
translate_dict: 1, translate_dict: 1,
pageNum: pageNum, pageNum: pageNum,
pageSize: 10, pageSize: 10,


+ 71
- 1
infoport/static/js/project/resourceDetail.js 查看文件

@@ -5,7 +5,8 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
//数据存储 //数据存储
var module = { var module = {
data: { data: {
propertyList:''
propertyList:'',
map: '', // 地图图层
}, },
}; };
var tools = new Tools(); var tools = new Tools();
@@ -24,6 +25,75 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
module.data.leader = data.data.leader; module.data.leader = data.data.leader;
var propertyDetailData = template('propertyDetailData', module.data); var propertyDetailData = template('propertyDetailData', module.data);
$("#propertyDetailContent").html(propertyDetailData); $("#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]));
} }
} }




Write Preview
Loading…
取消
儲存