Skip to content

html / MeteorologicalBureau

Go to a project
Commit 89419b3d by fengfan
Options

map

parent fa2fe635
Showing with 258 additions and 128 deletions
map/index.html
......@@ -25,134 +25,15 @@
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker,AMap.MarkerClusterer"></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="./js/utils.js?123"></script>
<script language="javascript">
//http://wanda-h5.bdideal.com/11b/map/index.html?maskOpacity=0.7&wallHeight=-32000&wallColor=25a1ff77&boundsColor=25a1ffff&boundsWeight=3&strokeWeight=1&strokeColor=a0eaff&strokeOpacity=1&city=%E9%87%8D%E5%BA%86
// open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/
var styleId = '14732285e0b3c284fa6efdb25627d3f6'; // 高德地图样式ID
var opts = {
// 配置查询行政区的
subdistrict: 3,
extensions: 'all',
level: 'district'
};
var Markers = []; // 标记点容器
var bounds;
var boundsPath = [];
var road = new AMap.TileLayer({
getTileUrl:
'https://wprd02.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&lang=zh_cn&size=1&scl=1&style=8&ltype=12'
});
var params = GetParams();
//ltype 2 路网 12 poi
var Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: false,
zIndex: 10
});
var SatelliteDown = new AMap.TileLayer.Satellite({
rejectMapMask: true,
// opacity:0.1,
zIndex: 0
});
var pNW = { lat: 59.1, lng: 73.1 };
var pNE = { lat: 59.1, lng: 136.1 };
var pSE = { lat: 3.1, lng: 136.1 };
var pSW = { lat: 3.1, lng: 73.1 };
var maskTileLayerBounds = new AMap.Bounds(pSW, pNE);
// debugger
var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId
});
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
var map;
var init = function() {
district.search(params.city ? params.city : '成都市', function(
status,
result
) {
console.log(result);
bounds = result.districtList[0].boundaries;
var _bounds = bounds2Path(bounds);
boundsPath = _bounds.path;
var dragLimitBounds = new AMap.Bounds(
new AMap.LngLat(Number(_bounds.minlng), Number(_bounds.minlat)),
new AMap.LngLat(Number(_bounds.maxlng), Number(_bounds.maxlat))
);
let mask = [];
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
}
map = new AMap.Map('container', {
mask: mask,
// center: [
// result.districtList[0].center.lng,
// result.districtList[0].center.lat
// ],
// mapStyle: 'amap://styles/' + styleId,
disableSocket: true,
viewMode: '3D',
showLabel: false,
labelzIndex: 130,
pitch: 40,
zooms: [8, 13],
// layers: [RoadNet,Satellite ]//Satellite,
// layers: [road, ]//Satellite,
});
map.add(Satellite); //高亮mask 卫星图
map.add(getCanvasLayer()); // 半黑遮罩层
map.add(SatelliteDown); //底图 卫星图
// map.getLayers()[0].setzIndex(1000); //个性地图置顶
findsubarea(result); // 查找子行政区
// map.getLayers()[0].setOpacity(0.5)
// var maskerIn = new AMap.Marker({
// position: [116.501415, 39.926055],
// map: map
// })
// var maskerOut = new AMap.Marker({//区域外的不会显示
// position: [117.001415, 39.926055],
// map: map
// })
//添加高度面
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 9 });
map.add(object3Dlayer);
var height = params.wallHeight||-32000;
var color = params.wallColor?('#'+params.wallColor):'#25a1ff77'; //rgba
var wall = new AMap.Object3D.Wall({
path: bounds,
height: height,
color: color
});
wall.transparent = true;
object3Dlayer.add(wall);
//添加描边
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: params.boundsColor?('#'+params.boundsColor):'#a0eaffff', //rgba'#25a1ffff',
strokeWeight: params.boundsWeight||1,
map: map
});
}
map.setFitView();
dragLimit(dragLimitBounds); //拖动限制 限制地图显示范围
// 获取人员信息
$.getJSON('./personal.json').then(res => {
console.log(JSON.parse(res));
currentDetailList = JSON.parse(res).currentDetailList.slice(
0,
2000
);
currentDetailList.map(item => {
setPersonalPoint(item);
});
cluster = new AMap.MarkerClusterer(map, Markers, { gridSize: 80 });
});
});
};
init();
<!-- <script src="./js/utils.js?123"></script> -->
<script language=javascript type=module>
import { Map3D } from './js/Map3D.js';
import { GetParams } from './js/tools.js';
var urlParams = GetParams()
window.map3d = new Map3D('成都','container',urlParams)
// city.getCityDistrict('成都')
console.log(map3d);
</script>
</body>
</html>
\ No newline at end of file
map/js/Map3D.js 0 → 100644
import { bounds2Path, MaskLayer } from "./tools.js"
class Map3D {
constructor(cityCode, domId, params) {
let opts = {
subdistrict: 3,
extensions: 'all',
level: 'district'
};
this.district = new AMap.DistrictSearch(opts);
this.map
this.cityDistrict
this.cityBounds
this.dragLimitBounds
this.initBounds
this.areas = []
this.Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: false,
zIndex: 10
});
this.SatelliteDown = new AMap.TileLayer.Satellite({
rejectMapMask: true,
zIndex: 0
});
this.maskLayer = new MaskLayer(Number(params.maskOpacity))
this.init(cityCode, domId, params)
}
async init(cityCode, domId, params) {
this.cityDistrict = await this.getCityDistrict(cityCode)
//level ： province city district street
if (!this.cityDistrict) {
alert('找不到城市')
return false
}
this.cityBounds = bounds2Path(this.cityDistrict.districtList[0].boundaries);
this.dragLimitBounds = new AMap.Bounds(
new AMap.LngLat(Number(this.cityBounds.minlng), Number(this.cityBounds.minlat)),
new AMap.LngLat(Number(this.cityBounds.maxlng), Number(this.cityBounds.maxlat))
);
this.map = new AMap.Map(domId, {
mask: this.cityBounds.mask,
// mapStyle: 'amap://styles/' + styleId,
disableSocket: true,
viewMode: '3D',
showLabel: false,
labelzIndex: 130,
pitch: 40,
zooms: [8, 13],
});
this.map.add(this.Satellite); //高亮mask 卫星图
this.map.add(this.maskLayer); // 半黑遮罩层
this.map.add(this.SatelliteDown); //底图 卫星图
this.addWall(this.cityDistrict.districtList[0].boundaries, params)
this.addBorder(this.cityDistrict.districtList[0].boundaries, params)
this.map.setFitView();
this.initBounds = this.map.getBounds();
this.map.setLimitBounds(this.dragLimitBounds);
this.addSubArea(this.cityDistrict, params); // 查找子行政区
return 1
}
addSubArea(cityDistrict, params) {
let childrensDistrictList = cityDistrict.districtList[0].districtList;
if (childrensDistrictList.length === 1) {
console.log(1);
childrensDistrictList = res.districtList[0].districtList[0].districtList;
}
for (let index = 0; index < childrensDistrictList.length; index++) {
let adcode = childrensDistrictList[index].adcode;
this.district.search(adcode, (status, result) => {
var polygons = [];
var _bounds = bounds2Path(result.districtList[0].boundaries);
for (let index = 0; index < _bounds.path.length; index++) {
let element = _bounds.path[index];
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: params.strokeColor ? ('#' + params.strokeColor) : '#a0eaff', //线颜色
strokeOpacity: Number(params.strokeOpacity) || 1, //线透明度
strokeWeight: Number(params.strokeWeight) || 1, //线宽
fillColor: 'black', //填充色
fillOpacity: 0, //填充透明度
map: this.map,
path: element
});
polygons.push(polygon);
}
var aaa = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: '#fff', //线颜色
strokeWeight: 2, //线宽
fillColor: 'black', //填充色
fillOpacity: 0, //填充透明度
map: this.map,
path: [
new AMap.LngLat(Number(_bounds.minlng), Number(_bounds.minlat)),
new AMap.LngLat(Number(_bounds.minlng), Number(_bounds.maxlat)),
new AMap.LngLat(Number(_bounds.maxlng), Number(_bounds.maxlat)),
new AMap.LngLat(Number(_bounds.maxlng), Number(_bounds.minlat)),
new AMap.LngLat(Number(_bounds.minlng), Number(_bounds.minlat)),
]
});
polygons.push(aaa);
var area = new AMap.OverlayGroup(polygons);
area._bounds = new AMap.Bounds(
new AMap.LngLat(Number(_bounds.minlng), Number(_bounds.minlat)),
new AMap.LngLat(Number(_bounds.maxlng), Number(_bounds.maxlat))
);
this.areas.push(area)
area.on('mouseover', function (e) {
area.setOptions({ fillOpacity: 0.5 });
});
area.on('mouseout', function (e) {
area.setOptions({ fillOpacity: 0 });
});
area.on('click', this.areaClickHandle, { area, map: this.map, areas: this.areas })
});
}
}
areaClickHandle(e) {
this.areas.forEach(element => {
if (element == this.area) {
this.area.setOptions({ fillOpacity: 0, strokeColor: "red", zIndex: 11 });
} else {
element.setOptions({ fillOpacity: 0, strokeColor: "#a0eaff", zIndex: 10 });
}
});
setTimeout(() => {
this.map.setBounds(this.area._bounds);
// this.map.setFitView([this.aaa]);
}, 50);
}
review() {
this.map.setBounds(this.initBounds);
}
addBorder(bounds, params) {
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: params.boundsColor ? ('#' + params.boundsColor) : '#a0eaffff',
strokeWeight: params.boundsWeight || 1,
map: this.map,
zIndex: 10
});
}
}
addWall(bounds, params) {
//添加高度面
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 9 });
this.map.add(object3Dlayer);
var height = params.wallHeight || -32000;
var color = params.wallColor ? ('#' + params.wallColor) : '#25a1ff77';
var wall = new AMap.Object3D.Wall({
path: bounds,
height: height,
color: color
});
wall.transparent = true;
object3Dlayer.add(wall);
}
getCityDistrict(city) {
return new Promise((resolve, reject) => {
this.district.search(city, function (status, result) {
if (status == 'complete') {
resolve(result)
} else {
reject(false)
}
})
})
}
}
export { Map3D }
\ No newline at end of file
map/js/tools.js 0 → 100644
function GetParams() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
}
}
return theRequest;
}
function bounds2Path(bounds) {
var maxlng, minlng, maxlat, minlat;
var path = [];
var mask = [];
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
var subPath = [];
for (let index = 0; index < bounds[i].length; index++) {
let element = bounds[i][index];
subPath.push([element.lng, element.lat]);
if (!maxlng || element.lng > maxlng) maxlng = element.lng;
if (!minlng || element.lng < minlng) minlng = element.lng;
if (!maxlat || element.lat > maxlat) maxlat = element.lat;
if (!minlat || element.lat < minlat) minlat = element.lat;
// console.log(maxlat,minlat);
}
path.push(subPath);
}
return { path, maxlng, minlng, maxlat, minlat, mask };
}
function MaskLayer(maskOpacity) {
//定义中国东南西北端点
var pNW = { lat: 59.1, lng: 73.1 };
var pNE = { lat: 59.1, lng: 136.1 };
var pSE = { lat: 3.1, lng: 136.1 };
var pSW = { lat: 3.1, lng: 73.1 };
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 200;
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(0,0,0)';
context.fillRect(0, 0, 200, 200);
var CanvasLayer = new AMap.CanvasLayer({
rejectMapMask: true,
opacity: maskOpacity || 0.7,
zIndex: 8,
canvas: canvas,
bounds: new AMap.Bounds([pSW.lng, pSW.lat], [pNE.lng, pNE.lat]),
zooms: [3, 18]
});
return CanvasLayer;
}
export { GetParams, bounds2Path ,MaskLayer}
\ 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