|
|
<!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> |
