You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

607 lines
23 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!--
Copyright (c) 2016-2019 Jean-Marc VIGLINO,
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
<title>ol-ext: Crop filter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Crop and mask filter on an ol map or layer." />
<meta name="keywords" content="ol3, filter, crop, mask" />
<!-- <link rel="stylesheet" href="../style.css" /> -->
<link rel="stylesheet" href="ol-ext-master/ol-ext.css" />
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- FontAwesome -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script> -->
<!-- ol-ext -->
<script type="text/javascript" src="ol-ext-master/ol-ext.js"></script>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<!-- <script src="https://unpkg.com/elm-pep"></script> -->
</head>
<body >
<!-- Map div -->
<div id="map" style="width:100%; height:800px;"></div>
<div class="options" >
<ul><li>
Filter:
<select id="filter" onchange="setFilter()">
<!-- <option value="crop">Crop</option> -->
<option value="mask">Mask</option>
</select>
</li><li>
<input id="inner" type="checkbox" onchange="setFilter()" /><label for="inner">inner</label>
</li><li>
Color of the mask:
<select id="color" onchange="setFilter()">
<option value="rgba(50,70,80,0.5)">White</option>
<option value="rgba(255,0,0,1)">Red</option>
<option value="rgba(0,255,0,0.2)">Green</option>
<option value="rgba(0,0,255,0.2)">Blue</option>
<option value="rgba(255,255,0,0.2)">Yellow</option>
</select> (mask only)
</li></ul>
</div>
<script type="text/javascript">
webHome="http://localhost:9090/yyyzweb";
var MapIcon = {
arrow_def: webHome + "/common/images/arrow/arrow01.png"
, arrow_b: webHome + "/common/images/arrow/arrow_b.png"
// , arrow_r: webHome + "/common/images/arrow/arrow_r.png"//报警
// , arrow_y: webHome + "/common/images/arrow/arrow_y.png"//融合
, arrow_r:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+    
'<polygon fill="#FF0000" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//报警
, arrow_y:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+    
'<polygon fill="#DFDF20" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//融合
, arrow_b2: webHome + "/common/images/arrow/arrow_b2.png"
, arrow_g: webHome + "/common/images/arrow/arrow_g.png"
, point01: webHome + "/common/images/point/point01.png"
, point02: webHome + "/common/images/point/point02.png"
, point03: webHome + "/common/images/point/point03.png"
, people01: webHome + "/common/images/point/p01.png"
, ship01: webHome + "/common/images/point/ship_b.png"
, ship02: webHome + "/common/images/arrow/arrow01.png"
, map_def: webHome + "/common/images/point/map.png"
, arrow_ld: webHome + "/common/images/arrow/arrow_ld.png"//雷达目标图片 暂时没用上
, arrow_rh: webHome + "/common/images/arrow/arrow_rh.png"//融合目标图片 暂时没用上
// , arrow_ais: webHome + "/common/images/arrow/arrow_ais.png"//ais目标图片
// , arrow_radar: webHome + "/common/images/arrow/arrow_radar.png"//雷达目标图片
, arrow_ais:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+    
'<polygon fill="#1AFA29" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//ais目标图片
, arrow_radar:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+    
'<polygon fill="#1AFA29" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//雷达目标图片
, arrow_jt: webHome + "/common/images/arrow/arrow_jt.png"//雷达目标图片
};
var osm = new ol.layer.Tile({ source: new ol.source.OSM() });
// PerspectiveMap-------3D地图的方法
var map = new ol.PerspectiveMap({
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
zoom: 13,
center: [113.193712,29.493999]
}),
interactions: ol.interaction.defaults(),
layers:[
//new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) }),
osm
]
});
var dep = {"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[113.32585557,29.6819567],[113.08960645,29.44964411],[113.15636258,29.39675241],[113.3806483,29.65590524],[113.32585557,29.6819567]]]]}};
var coords = dep.geometry.coordinates;
var f = new ol.Feature(new ol.geom.MultiPolygon(coords));
var mask = new ol.filter.Mask({ feature: f, inner:false, fill: new ol.style.Fill({ color:[50,70,80,0.8] }) });
osm.addFilter(mask);
map.setPerspective(30);//设置3d地图偏转
addDevice(1, [113.2711,29.586033], MapIcon.arrow_b2,"",0,null)
//塔台标注
function addDevice(_id, _point, _img, _text, _angle, _fun) {
let oneP = new ol.Feature({
geometry: new ol.geom.Point(_point)
});
if (_fun != null) {
oneP.on('singleclick', function (evt) {
_fun(evt.coordinate);
//overlay.setPosition(coordinate);
});
}
var styles=[];
styles.push(
new ol.style.Style({
image: new ol.style.Shadow({
radius: 15,
blur: 5,
offsetX: 0,
offsetY: 0,
fill: new ol.style.Fill({
color: "rgba(0,0,0,0.5)"
})
})
})
// new ol.style.Style({
// // fill: new ol.style.Fill({
// // color: '#0a3399CC'
// // }),
// image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
// //color: '#8959A8',
// crossOrigin: 'anonymous',
// rotation: _angle * (2 * Math.PI) / 360,//设置角度
// src: _img,//图标
// scale: map.getView().getZoom()/22,
// //scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法map.getView().getZoom() / 10
// })),
// // text: new ol.style.Text({
// // text: "" + _text,
// // //scale:1/Math.pow(map.getView().getZoom(), 1/10),//设置文字缩放大小
// // //scale:map.getView().getZoom() /16,
// // //rotation: _angle * (2 * Math.PI) / 360,
// // //scale: 1.3,
// // fill: new ol.style.Fill({
// // color: '#000000'
// // }),
// // stroke: new ol.style.Stroke({
// // color: '#FFFF99',
// // width: 3.5
// // })
// // })
// })
);
styles.push(new ol.style.Style({
image: new ol.style.FontSymbol({
form: "poi", //"hexagone",
gradient: false,
glyph: null,
text: null, // text to use if no glyph is defined
font: 'sans-serif',
fontSize: 1,
fontStyle:null,
radius: 20,
//offsetX: -15,
rotation: Number(0)*Math.PI/180,
rotateWithView:false,
offsetY: true? -20:0 ,
color:"white",
fill: new ol.style.Fill({
color: "navy"
}),
stroke: new ol.style.Stroke({
color: "white",
width: 3
})
}),
stroke: new ol.style.Stroke({
width: 2,
color: '#f80'
}),
fill: new ol.style.Fill({
color: [255, 136, 0, 0.6]
})
}))
let mapLayers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [oneP]
}),
style: styles,
//zindex: MarkList.length + 1
});
map.addLayer(mapLayers);
// var r3D = new ol.render3D({ height:10, defaultHeight:3.5 });
// mapLayers.setRender3D(r3D);
map.getView().on('change:resolution', function () {
var style = oneP.getStyle();
// 重新设置图标的缩放率基于层级10来做缩放
// console.log("塔台标注放大缩小尺寸:"+0.2*(this.getZoom()-13))
// console.log("地图放大缩小尺寸:"+this.getZoom())
// console.log("地图放大缩小计算值:"+this.getZoom()/22)
//style.getImage().setScale(this.getZoom()/22);
oneP.setStyle(style);
})
}
var coordinatesjson=[
[
[
113.3052521688115,
29.587365999999996
],
[
113.30518840420038,
29.588953866311723
],
[
113.3049974210218,
29.590533971893812
],
[
113.3046801497266,
29.59209861917324
],
[
113.30423813602864,
29.593640186238876
],
[
113.30367353337424,
29.59515116395719
],
[
113.30298909245077,
29.596624192532232
],
[
113.3021881477856,
29.59805209733189
],
[
113.30127460150065,
29.5994279238067
],
[
113.30025290430157,
29.60074497133161
],
[
113.29912803379442,
29.60199682580667
],
[
113.29790547023524,
29.60317739085878
],
[
113.29659116983078,
29.604280917493178
],
[
113.29519153572052,
29.60530203205142
],
[
113.29371338678118,
29.606235762340333
],
[
113.29216392440574,
29.60707756180609
],
[
113.2905506974192,
29.607823331635934
],
[
113.28888156530127,
29.608469440681645
],
[
113.28716465989582,
29.609012743107748
],
[
113.28540834579341,
29.609450593679988
],
[
113.28362117957984,
29.609780860619864
],
[
113.2818118681492,
29.61000193596345
],
[
113.27998922628497,
29.610112743374597
],
[
113.27816213371503,
29.610112743374597
],
[
113.27633949185079,
29.61000193596345
],
[
113.27453018042017,
29.609780860619864
],
[
113.2727430142066,
29.609450593679988
],
[
113.27098670010417,
29.609012743107748
],
[
113.26926979469873,
29.608469440681645
],
[
113.2676006625808,
29.607823331635934
],
[
113.26598743559427,
29.60707756180609
],
[
113.26443797321883,
29.606235762340333
],
[
113.26295982427948,
29.60530203205142
],
[
113.26156019016923,
29.604280917493178
],
[
113.26024588976478,
29.60317739085878
],
[
113.2590233262056,
29.60199682580667
],
[
113.25789845569844,
29.60074497133161
],
[
113.25687675849936,
29.5994279238067
],
[
113.25596321221438,
29.59805209733189
],
[
113.25516226754924,
29.596624192532232
],
[
113.25447782662576,
29.59515116395719
],
[
113.25391322397135,
29.593640186238876
],
[
113.2534712102734,
29.59209861917324
],
[
113.25315393897822,
29.590533971893812
],
[
113.25296295579963,
29.588953866311723
],
[
113.2528991911885,
29.587365999999996
],
[
113.25296295579963,
29.585778108702215
],
[
113.25315393897822,
29.58419792864825
],
[
113.2534712102734,
29.582633158860663
],
[
113.25391322397135,
29.58109142363507
],
[
113.25447782662576,
29.579580235378018
],
[
113.25516226754924,
29.578106957983373
],
[
113.25596321221438,
29.576678770926225
],
[
113.25687675849936,
29.57530263424987
],
[
113.25789845569844,
29.573985254617092
],
[
113.2590233262056,
29.572733052591932
],
[
113.26024588976478,
29.57155213131215
],
[
113.26156019016923,
29.570448246706068
],
[
113.26295982427948,
29.56942677939967
],
[
113.26443797321883,
29.568492708451938
],
[
113.26598743559427,
29.567650587047268
],
[
113.2676006625808,
29.566904520264565
],
[
113.26926979469873,
29.566258145031924
],
[
113.27098670010417,
29.56571461236581
],
[
113.2727430142066,
29.565276571981872
],
[
113.27453018042017,
29.56494615935305
],
[
113.27633949185079,
29.564724985278954
],
[
113.27816213371503,
29.56461412801742
],
[
113.27998922628497,
29.56461412801742
],
[
113.2818118681492,
29.564724985278954
],
[
113.28362117957984,
29.56494615935305
],
[
113.28540834579341,
29.565276571981872
],
[
113.28716465989582,
29.56571461236581
],
[
113.28888156530127,
29.566258145031924
],
[
113.2905506974192,
29.566904520264565
],
[
113.29216392440574,
29.567650587047268
],
[
113.29371338678118,
29.568492708451938
],
[
113.29519153572052,
29.56942677939967
],
[
113.29659116983078,
29.570448246706068
],
[
113.29790547023524,
29.57155213131215
],
[
113.29912803379442,
29.572733052591932
],
[
113.30025290430157,
29.573985254617092
],
[
113.30127460150065,
29.57530263424987
],
[
113.3021881477856,
29.576678770926225
],
[
113.30298909245077,
29.578106957983373
],
[
113.30367353337424,
29.579580235378018
],
[
113.30423813602864,
29.58109142363507
],
[
113.3046801497266,
29.582633158860663
],
[
113.3049974210218,
29.58419792864825
],
[
113.30518840420038,
29.585778108702215
],
[
113.3052521688115,
29.587365999999996
]
]
]
var _points=[[113.2711,29.586033],[113.26598743559427,29.60707756180609]];
let onePs = new ol.Feature({
geometry: new ol.geom.Polygon(coordinatesjson)
});
let mappointsLayers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [onePs]
}),
//style: styles,
//zindex: MapTarget.length + 101
});
map.addLayer(mappointsLayers);
</script>
</body>
</html>