Sfoglia il codice sorgente

信息港资源地图开发

RongCheng
QI_YUJIE 2 anni fa
parent
commit
bc82fdb43b
2 ha cambiato i file con 101 aggiunte e 7 eliminazioni
  1. +2
    -6
      infoport/resource.html
  2. +99
    -1
      infoport/static/js/project/resource.js

+ 2
- 6
infoport/resource.html Vedi File

@@ -13,7 +13,8 @@
<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/property.css" rel="stylesheet" type="text/css" /> <link href="static/css/property.css" rel="stylesheet" type="text/css" />
<link href="static/css/page_common.css" rel="stylesheet" type="text/css" /> <link href="static/css/page_common.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>
@@ -130,11 +131,6 @@
<div style="box-shadow: 0px 5px 20px #999 inset;width: 100%;height: 16vh;"> <div style="box-shadow: 0px 5px 20px #999 inset;width: 100%;height: 16vh;">
<div id="container"></div> <div id="container"></div>
</div> </div>
<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="dialog" id="dialog" style="display: none;"> <div class="dialog" id="dialog" style="display: none;">


+ 99
- 1
infoport/static/js/project/resource.js Vedi File

@@ -18,7 +18,9 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
dictValue:'', dictValue:'',
dictLabel:'全部' dictLabel:'全部'
}], }],
propertyDetail:{}
propertyDetail:{},
map: '', // 地图图层
resourceLayer: '', // 资产图层
}, },
}; };
var tools = new Tools(); var tools = new Tools();
@@ -46,6 +48,8 @@ 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);
module.data.map.getView().setCenter(ol.proj.fromLonLat([data.data.lng, data.data.lat]));
module.data.map.getView().setZoom(13);
} }
} }


@@ -86,12 +90,53 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
}) })
} }
module.data.propertyList = content; module.data.propertyList = content;
// 添加资产图层
addResourceLayer(content);
// $('#page_s1').html('共' + 10 + '页') // $('#page_s1').html('共' + 10 + '页')
var propertyData = template('propertyData', module.data); var propertyData = template('propertyData', module.data);
$("#propertyContent").html(propertyData); $("#propertyContent").html(propertyData);
} }
} }


// 添加资产图层
addResourceLayer = function (content) {
if (module.data.resourceLayer) {
module.data.map.removeLayer(module.data.resourceLayer);
module.data.resourceLayer = '';
}
let features = [];
content.forEach(item => {
if (item.theGeom != null && item.theGeom !== '') {
const iconFeature = new ol.Feature({
geometry: new ol.geom.MultiPolygon(JSON.parse(item.theGeomJson).coordinates),
// name: item.centerName,
// centerDeptId: item.deptId,
level: 'resource',
});
features.push(iconFeature);
}
});
const vectorSource = new ol.source.Vector({
features: features,
});
module.data.resourceLayer = new ol.layer.Vector({
source: vectorSource,
name: 'resourceLayer',
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.getLayers().insertAt(3, module.data.resourceLayer);
}

openDialog = function(id){ openDialog = function(id){
tools.doGet(resourceGet+id, {translate_dict: 1}, module.assetDetail , true); tools.doGet(resourceGet+id, {translate_dict: 1}, module.assetDetail , true);
} }
@@ -142,9 +187,62 @@ define(['jquery', "template", "Tools", "paging", 'dateTime', 'swiper'], function
$("#treeselectContent").html(treeselectData); $("#treeselectContent").html(treeselectData);
var treeselectSecondData = template('treeselectSecondData', module.data); var treeselectSecondData = template('treeselectSecondData', module.data);
$("#treeselectSecondContent").html(treeselectSecondData); $("#treeselectSecondContent").html(treeselectSecondData);
initMap(data.data[0]);
} }
} }


initMap = function (dept) {
let mapCenterLocation;
if (dept.lng && dept.lat) {
mapCenterLocation = [dept.lng, dept.lat];
} else {
mapCenterLocation = [116.391461, 39.902359];
}

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([new ol.control.FullScreen()]),
layers: [aerial, yingxzi],
projection: projection,
target: "container",
view: new ol.View({
center: ol.proj.fromLonLat(mapCenterLocation), // 地图中心坐标
zoom: 13,
minZoom: 1, //地图缩小限制
maxZoom: 18, //地图放大限制
// extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
}),
/*interactions: ol.interaction.defaults({
doubleClickZoom: false, // 双击放大地图
// mouseWheelZoom: false, // 鼠标滚轮放大地图
// shiftDragZoom: false, // shift + 鼠标左键拖拽 放大地图
})*/
});
}

selectChange = function(){ selectChange = function(){
// tools.doGet(treeselectSecond+$('#treeselectContent').val(), {}, module.selectSecondChange , true); // tools.doGet(treeselectSecond+$('#treeselectContent').val(), {}, module.selectSecondChange , true);
if ($('#treeselectContent').val() == 100){ if ($('#treeselectContent').val() == 100){


Caricamento…
Annulla
Salva