Skip to content

html / MeteorologicalBureau

Go to a project
Commit 8f38d18e by fengfan
Options

map

parent 536ca6b2
Showing with 104 additions and 33 deletions
map/.DS_Store
No preview for this file type
map/index.html
...@@ -18,6 +18,11 @@ ...@@ -18,6 +18,11 @@
<body> <body>
<div id="container"></div> <div id="container"></div>
<!-- <div id=nav>
<div><img src="" >预警信息</div>
<div><img src="" >设备</div>
<div><img src="" >人员</div>
</div> -->
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script> <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script <script
...@@ -25,28 +30,45 @@ ...@@ -25,28 +30,45 @@
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> -->
<!-- <script src="./js/utils.js?123"></script> --> <!-- <script src="./js/utils.js?123"></script> -->
<style>
.amap-logo,.amap-copyright{opacity: 0;display: none!important;}
</style>
<script language=javascript type=module> <script language=javascript type=module>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
import { Map3D } from './js/Map3D.js'; import { Map3D } from './js/Map3D.js';
import { GetParams } from './js/tools.js'; import { GetParams } from './js/tools.js';
var urlParams = GetParams() var urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 //成都 重庆 天津 北京 上海 大连 三沙
var map3d = new Map3D('成都','container',urlParams,(_map3d)=>{ window.map3d = new Map3D('成都','container',urlParams,(_map3d)=>{
$.getJSON('./personal.json').then(res => { window.addPoiByApi('./personal.json')
var currentDetailList = JSON.parse(res).currentDetailList
window.pois = _map3d.addPois(currentDetailList)
});
}); });
window.review = function (params) { window.review = function (params) {
map3d.review() map3d.review()
map3d.delPoi(pois)
window.pois = []
} }
window.addPoi = function () { window.delPoi = function (params) {
$.getJSON('./personal.json').then(res => { try {
var currentDetailList = JSON.parse(res).currentDetailList map3d.delPoi(pois)
window.pois = map3d.addPois(currentDetailList) window.pois = []
} catch (error) {
}
}
window.addPoiByApi = function (api,type) {
window.delPoi()
window.review()
$.getJSON(api).then(res => {
var currentDetailList = JSON.parse(res).currentDetailList
console.log(currentDetailList);
if(type == 'MassMarks'){
window.pois = map3d.addPoisMassMarks(currentDetailList)
}else{
window.pois = map3d.addPoisMarkerClusterer(currentDetailList)
}
}); });
} }
// addPoiByApi('./personal.json')
// addPoiByApi('./led.json')
</script> </script>
</body> </body>
......
map/js/Map3D.js
...@@ -16,6 +16,7 @@ class Map3D { ...@@ -16,6 +16,7 @@ class Map3D {
this.initBounds this.initBounds
this.cluster this.cluster
this.areas = [] this.areas = []
this.styleId = '14732285e0b3c284fa6efdb25627d3f6';
this.Satellite = new AMap.TileLayer.Satellite({ this.Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: false, rejectMapMask: false,
zIndex: 10 zIndex: 10
...@@ -35,7 +36,9 @@ class Map3D { ...@@ -35,7 +36,9 @@ class Map3D {
this.map.remove(pois) this.map.remove(pois)
} }
addPois(pois) { addPoisMarkerClusterer(pois) {
//https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker/
//https://lbs.amap.com/api/javascript-api/example/marker/markerclusterer
let markers = [] let markers = []
pois.map(item => { pois.map(item => {
markers.push(this.setPersonalPoint(item)) markers.push(this.setPersonalPoint(item))
...@@ -47,6 +50,42 @@ class Map3D { ...@@ -47,6 +50,42 @@ class Map3D {
} }
return markers return markers
} }
addPoisMassMarks(pois) {
//https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker/
//https://lbs.amap.com/api/javascript-api/reference/layer#MassMarks
// let markers = []
// pois.map(item => {
// markers.push(this.setPersonalPoint(item))
// });
// var styleObject = {
// url: '//vdata.amap.com/icons/b18/1/2.png', // 图标地址
// size: new AMap.Size(11,11), // 图标大小
// anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
// }
// var massMarks = new AMap.MassMarks({
// zIndex: 5, // 海量点图层叠加的顺序
// zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
// style: styleObject // 设置样式对象
// });
// var data = [{
// lnglat: [116.405285, 39.904989], //点标记位置
// name: 'beijing',
// id:1
// }, // {}, …,{}, …
// ];
//massMarks.setData(data);
// // 将海量点添加至地图实例
// massMarks.setMap(map);
if(this.cluster ){
this.cluster.addMarkers(markers)
}else{
this.cluster = new AMap.MarkerClusterer(this.map, markers, { gridSize: 80 });
}
return markers
}
setPersonalPoint(item) { setPersonalPoint(item) {
let marker = new AMap.Marker({ let marker = new AMap.Marker({
...@@ -72,24 +111,32 @@ class Map3D { ...@@ -72,24 +111,32 @@ class Map3D {
); );
this.map = new AMap.Map(domId, { this.map = new AMap.Map(domId, {
mask: this.cityBounds.mask, mask: this.cityBounds.mask,
// mapStyle: 'amap://styles/' + styleId, mapStyle: 'amap://styles/' + this.styleId,
disableSocket: true,
viewMode: '3D', viewMode: '3D',
showLabel: false, // showLabel: false,
labelzIndex: 130, labelzIndex: 130,
pitch: 40, pitch: 45,
zooms: [8, 13], zooms: [1, 13],
}); });
this.map.add(this.Satellite); //高亮mask 卫星图 this.map.add(this.Satellite); //高亮mask 卫星图
this.map.add(this.maskLayer); // 半黑遮罩层 this.map.add(this.maskLayer); // 半黑遮罩层
this.map.add(this.SatelliteDown); //底图 卫星图 this.map.add(this.SatelliteDown); //底图 卫星图
this.map.getLayers()[0].setzIndex(11);
this.addWall(this.cityDistrict.districtList[0].boundaries) this.addWall(this.cityDistrict.districtList[0].boundaries)
this.addBorder(this.cityDistrict.districtList[0].boundaries) this.addBorder(this.cityDistrict.districtList[0].boundaries)
this.map.setFitView(); this.map.setFitView();
this.initBounds = this.map.getBounds(); this.initBounds = this.map.getBounds();
this.map.setLimitBounds(this.dragLimitBounds); this.map.setLimitBounds(this.dragLimitBounds);
this.map.setZooms([this.map.getZoom(),13]);
await this.addSubArea(this.cityDistrict); // 查找子行政区 await this.addSubArea(this.cityDistrict); // 查找子行政区
AMap.event.addListener(this.map, "click", function(e) {
console.log(e);
// new AMap.Marker({
// position: e.lnglat,
// map: map
// });
});
return 1 return 1
} }
...@@ -120,20 +167,20 @@ class Map3D { ...@@ -120,20 +167,20 @@ class Map3D {
); );
this.areas.push(area) this.areas.push(area)
area.on('mouseover', function (e) { // area.on('mouseover', function (e) {
area.setOptions({ fillOpacity: 0.5 }); // area.setOptions({ fillOpacity: 0.5 });
}); // });
area.on('mouseout', function (e) { // area.on('mouseout', function (e) {
area.setOptions({ fillOpacity: 0 }); // area.setOptions({ fillOpacity: 0 });
}); // });
area.on('click', this.areaClickHandle, { area, map: this.map, areas: this.areas }) // area.on('click', this.areaClickHandle, { area, map: this.map, areas: this.areas })
} }
async addSubArea(cityDistrict) { async addSubArea(cityDistrict) {
let childrensDistrictList = cityDistrict.districtList[0].districtList; let childrensDistrictList = cityDistrict.districtList[0].districtList;
if (childrensDistrictList.length === 1) { // if (childrensDistrictList.length === 1) {
childrensDistrictList = res.districtList[0].districtList[0].districtList; // childrensDistrictList = cityDistrict.districtList[0].districtList;
} // }
var SubDistricts = await this.getSubDistrictByCityDistrict(cityDistrict); var SubDistricts = await this.getSubDistrictByCityDistrict(cityDistrict);
for (let index = 0; index < SubDistricts.length; index++) { for (let index = 0; index < SubDistricts.length; index++) {
const element = SubDistricts[index]; const element = SubDistricts[index];
......
map/js/tools.js
...@@ -34,10 +34,10 @@ function bounds2Path(bounds) { ...@@ -34,10 +34,10 @@ function bounds2Path(bounds) {
function MaskLayer(maskOpacity) { function MaskLayer(maskOpacity) {
//定义中国东南西北端点 //定义中国东南西北端点
var pNW = { lat: 59.1, lng: 73.1 }; // var pNW = { lat: 59.1, lng: 73.1 };
var pNE = { lat: 59.1, lng: 136.1 }; var pNE = { lat: 89.9, lng: 179.9 };
var pSE = { lat: 3.1, lng: 136.1 }; // var pSE = { lat: 3.1, lng: 136.1 };
var pSW = { lat: 3.1, lng: 73.1 }; var pSW = { lat: -89.9, lng: -179.9 };
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
canvas.width = canvas.height = 200; canvas.width = canvas.height = 200;
......
map/led.json 0 → 100644
"{\"clientstyle\":\"1\",\"id\":\"510100\",\"clientstatus\":0,\"clientaddress\":\"\",\"totalPage\":7,\"currentDetailList\":[{\"clientid\":\"009951010001_lesosccddy002013111300003\",\"clientaddress\":\"成都市悦来镇LED\",\"clientstatus\":\"0\",\"clientstyle\":\"1\",\"clienttel\":\"18328000826\",\"lon\":\"103.455 \",\"lat\":\"30.625 \"},{\"clientid\":\"009951010001_lesosccdpz201512150000001\",\"clientaddress\":\"成都市彭州市丹景山风景区\",\"clientstatus\":\"0\",\"clientstyle\":\"1\",\"clienttel\":\"18144394267\",\"lon\":\"104.402398\",\"lat\":\"31.13114\"},{\"clientid\":\"009951010001_leso000000050513983200505\",\"clientaddress\":\"成都市蒲江成佳镇\",\"clientstatus\":\"0\",\"clientstyle\":\"1\",\"clienttel\":\"15198028140\",\"lon\":\"103.384 \",\"lat\":\"30.181 \"},{\"clientid\":\"009951010001_leso000000050613983200506\",\"clientaddress\":\"成都市双流三星镇\",\"clientstatus\":\"0\",\"clientstyle\":\"1\",\"clienttel\":\"15928514494\",\"lon\":\"104.157 \",\"lat\":\"30.315 \"},{\"clientid\":\"009951010001_leso123456789\",\"clientaddress\":\"成都市LED测试\",\"clientstatus\":\"0\",\"clientstyle\":\"1\",\"clienttel\":\"13800000000\",\"lon\":\"104.082 \",\"lat\":\"30.646 \"},{\"clientid\":\"009951010001_lesody0000010013983200102\",\"clientaddress\":\"成都市424新增1\",\"clientstatus\":\"0\",\"clientstyle\":\"1\",\"clienttel\":\"13800000000\",\"lon\":\"104.052 \",\"lat\":\"30.686 \"},{\"clientid\":\"009951010001_lesofgdshgfdhgdrewtzsdsgf\",\"clientaddress\":\"成都市测试\",\"clientstatus\":\"0\",\"clientstyle\":\"1\",\"clienttel\":\"13800000000\",\"lon\":\"104.402398\",\"lat\":\"31.13114\"}],\"currentPage\":1,\"sizePage\":7,\"pageCount\":4,\"totalSize\":24}"
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment