diff --git a/src/views/homestead/index.vue b/src/views/homestead/index.vue index e27607d7..301fe308 100644 --- a/src/views/homestead/index.vue +++ b/src/views/homestead/index.vue @@ -1842,6 +1842,11 @@ export default { maxZoom: 18.9, //地图放大限制 }), }); + //地图属性定义 + var nongZt = ["house", "land"]; + var texiao_layer_fang; + var texiao_layer_di; + var delete_map = ["mapHouse", "mapLand"]; //业务图层 wfs服务 属性查询开始 ------------------start /** * @api wfs服务空间查询 @@ -2011,6 +2016,7 @@ export default { document.getElementById("info").innerHTML = ""; var viewResolution = map.getView().getResolution(); ///** @type {number} */ (view.getResolution()); + var zb = evt.coordinate; var url = wmsSource.getFeatureInfoUrl( evt.coordinate, viewResolution, @@ -2029,6 +2035,56 @@ export default { _this.ndAddfileList = []; if (html.indexOf(" { + map.removeLayer(texiao_layer_fang); + map.removeLayer(texiao_layer_di); + //特效动画实现 -----------------------------start + texiao_layer_fang = new ol.layer.Vector({ + source: new ol.source.Vector(), + }); + map.addLayer(texiao_layer_fang); + var deptmap = [zb[0], zb[1]]; + //var center = ol.extent.getCenter(deptmap); //获取边界区域的中心位置 + var circle = new ol.Feature({ + geometry: new ol.geom.Point(deptmap), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标 + }); + + //var out =new ol.coordinate.Coordinate(datamap); + //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界,格式为[minx,miny,maxx,maxy] + //var center = ol.extent.getCenter(extent); //获取边界区域的中心位置 + //map.getView().setCenter(center); //设置当前地图的显示中心位置 + circle.setStyle( + new ol.style.Style({ + image: new ol.style.Circle({ + radius: 0, + stroke: new ol.style.Stroke({ + color: "yellow", + size: 1, + }), + }), + }) + ); + texiao_layer_fang.getSource().addFeature(circle); + + // 关键的地方在此:监听postcompose事件,在里面重新设置circle的样式 + var radius = 0; + map.on("postcompose", function () { + // 增大半径,最大20 + radius++; + radius = radius % 10; + // 设置样式 + circle.setStyle( + new ol.style.Style({ + image: new ol.style.Circle({ + radius: radius, + stroke: new ol.style.Stroke({ + color: "yellow", + size: 1, + }), + }), + }) + ); + }); + //特效动画实现 -----------------------------end _this.hasTable = true; document.getElementById("info").innerHTML = html; if (html.indexOf("house") != -1) { @@ -2232,10 +2288,6 @@ export default { //属性查询结束 ------------------end //按照分类查询 村定位地图-----------------start - var nongZt = ["house", "land"]; - var texiao_layer_fang; - var texiao_layer_di; - var delete_map = ["mapHouse", "mapLand"]; $("#cun").on("change", function () { /** * @api wfs服务空间查询 @@ -2551,7 +2603,7 @@ export default { //alert("进入分类"); //删除之前加载的图层 map.removeLayer(texiao_layer_fang); - + map.removeLayer(texiao_layer_di); var cun = _this.villageDataObj.deptName; //删除之前加载的图层 @@ -2708,6 +2760,7 @@ export default { //alert("进入分类"); //删除之前加载的图层 map.removeLayer(texiao_layer_di); + map.removeLayer(texiao_layer_fang); var cun = _this.villageDataObj.deptName; //删除之前加载的图层 //map.removeLayer(dishitu);