凸显出当前区域 需要当前地方的json数据 这个可以在阿里的这个阿里看下效果图遮盖层的逃命都是可以调的引入 下面一段代码importsxfrom/views/json/sx1.json;// 下载的jsonimportGeoJSONfromol/format/GeoJSON;// ol的一些方法importPolygon,{fromExtent}fromol/geom/Polygon;importLinearRingfromol/geom/LinearRing;templatedivclasscontainerdiv idvue-openlayersclassmap-x/divdiv idinfo-boxclassinfo-boxstylewidth: 100px; height: 100px/divdiv idcanvstylewidth: 100px; height: 100px/div/div/templatescriptimportol/ol.css;import{Map,View,style,Feature,geom,Overlay}fromol;importTileLayerfromol/layer/Tile;importXYZfromol/source/XYZ;import{VectorasVectorSource}fromol/source;importVectorLayerfromol/layer/Vector;import{Point,LineString}fromol/geom;import{Style,Icon,Stroke,Text,Fill}fromol/style;importlogofrom/assets/logo.png;import*asolfromol;importol-ext/dist/ol-ext.css;importsxfrom/views/json/sx1.json;importGeoJSONfromol/format/GeoJSON;importPolygon,{fromExtent}fromol/geom/Polygon;importLinearRingfromol/geom/LinearRing;exportdefault{name:FirstMap,data(){return{map:null,draw:null,maskLayer:null,logo,layers:[],};},methods:{initMap(){letthatthis;// 将图标样式应用到点要素constfeatures[];constpointnewPoint([108.56,34.15]);// 修改坐标格式constfeaturenewFeature({geometry:point,custom:{data:123,type:icon},type:icon,});feature.setStyle([newStyle({image:newIcon({crossOrigin:anonymous,src:this.logo,// size: [40, 40],scale:0.2,// 图标缩放比例}),}),]);features.push(feature);//设置地图的数据源constsourcenewVectorSource({features,});letmarkLayerPointsnewVectorLayer({source:source,});letmapnewMap({target:vue-openlayers,layers:[newTileLayer({source:newXYZ({url:https://gdtc.shipxy.com/tile.g?lenmdz{z}x{x}y{y},}),}),markLayerPoints,// 确保图层顺序正确// vectorLayers,],view:newView({projection:EPSG:4326,center:[108.56,34.15],// 修改中心坐标格式zoom:6,}),});this.mapmap;that.showSFArea()// 蓝色蒙层},// 移除图层方法removeFun(layerId){constthatthis;constselArrthat.map.getLayers().getArray();// 获取所有图层selArr.map((item,index){if(item.values_?.idlayerId){// 移除图层that.map.removeLayer(selArr[index]);}});},// 创建蒙层凸显区域showSFArea(){constinitLayernewVectorLayer({name:blueLayer,// zIndex: 1,// opacity: 0.6,source:newVectorSource(),style:newStyle({fill:newFill({color:rgba(3, 44, 79, 1),}),stroke:newStroke({color:rgba(0,0,0,0.8),width:1})}),});this.map.addLayer(initLayer);this.addConver(initLayer);},// 添加遮罩addConver(converLayer){letcodeJsonsx;varftsnewGeoJSON().readFeatures(codeJson);constftfts[0];constconverGeomthis.erase(ft.getGeometry());constconvertFtnewFeature({geometry:converGeom,});converLayer.getSource().addFeature(convertFt);},// 擦除操作生产遮罩范围erase(geom){constextent[-180,-90,180,90];constpolygonRingfromExtent(extent);constcoordsgeom.getCoordinates();coords.forEach((coord){constlinearRingnewLinearRing(coord[0]);polygonRing.appendLinearRing(linearRing);});returnpolygonRing;},},mounted(){this.initMap();},};/scriptstyle scoped langscss.input{position:fixed;top:10px;right:10px;border-radius:10px;background:#fff;display:flex;flex-direction:column;padding:5px;padding-bottom:10px;*{margin-top:10px;display:flex;align-items:center;}}/stylestyle scoped langscss.container{position:relative;.btn{position:absolute;left:4%;top:1%;}}#vue-openlayers{width:100vw;height:100vh;}h3{line-height:40px;}/* 隐藏信息盒子的初始样式 */#info-box{display:none;position:absolute;background:white;border:1px solid black;padding:10px;border-radius:5px;font-size:14px;pointer-events:none;/* 防止信息盒子影响鼠标事件 */}/style
vue2+OpenLayers 天地图上凸显出当前地理位置区域（4）
凸显出当前区域 需要当前地方的json数据 这个可以在阿里的这个阿里看下效果图遮盖层的逃命都是可以调的引入 下面一段代码importsxfrom/views/json/sx1.json;// 下载的jsonimportGeoJSONfromol/format/GeoJSON;// ol的一些方法importPolygon,{fromExtent}fromol/geom/Polygon;importLinearRingfromol/geom/LinearRing;templatedivclasscontainerdiv idvue-openlayersclassmap-x/divdiv idinfo-boxclassinfo-boxstylewidth: 100px; height: 100px/divdiv idcanvstylewidth: 100px; height: 100px/div/div/templatescriptimportol/ol.css;import{Map,View,style,Feature,geom,Overlay}fromol;importTileLayerfromol/layer/Tile;importXYZfromol/source/XYZ;import{VectorasVectorSource}fromol/source;importVectorLayerfromol/layer/Vector;import{Point,LineString}fromol/geom;import{Style,Icon,Stroke,Text,Fill}fromol/style;importlogofrom/assets/logo.png;import*asolfromol;importol-ext/dist/ol-ext.css;importsxfrom/views/json/sx1.json;importGeoJSONfromol/format/GeoJSON;importPolygon,{fromExtent}fromol/geom/Polygon;importLinearRingfromol/geom/LinearRing;exportdefault{name:FirstMap,data(){return{map:null,draw:null,maskLayer:null,logo,layers:[],};},methods:{initMap(){letthatthis;// 将图标样式应用到点要素constfeatures[];constpointnewPoint([108.56,34.15]);// 修改坐标格式constfeaturenewFeature({geometry:point,custom:{data:123,type:icon},type:icon,});feature.setStyle([newStyle({image:newIcon({crossOrigin:anonymous,src:this.logo,// size: [40, 40],scale:0.2,// 图标缩放比例}),}),]);features.push(feature);//设置地图的数据源constsourcenewVectorSource({features,});letmarkLayerPointsnewVectorLayer({source:source,});letmapnewMap({target:vue-openlayers,layers:[newTileLayer({source:newXYZ({url:https://gdtc.shipxy.com/tile.g?lenmdz{z}x{x}y{y},}),}),markLayerPoints,// 确保图层顺序正确// vectorLayers,],view:newView({projection:EPSG:4326,center:[108.56,34.15],// 修改中心坐标格式zoom:6,}),});this.mapmap;that.showSFArea()// 蓝色蒙层},// 移除图层方法removeFun(layerId){constthatthis;constselArrthat.map.getLayers().getArray();// 获取所有图层selArr.map((item,index){if(item.values_?.idlayerId){// 移除图层that.map.removeLayer(selArr[index]);}});},// 创建蒙层凸显区域showSFArea(){constinitLayernewVectorLayer({name:blueLayer,// zIndex: 1,// opacity: 0.6,source:newVectorSource(),style:newStyle({fill:newFill({color:rgba(3, 44, 79, 1),}),stroke:newStroke({color:rgba(0,0,0,0.8),width:1})}),});this.map.addLayer(initLayer);this.addConver(initLayer);},// 添加遮罩addConver(converLayer){letcodeJsonsx;varftsnewGeoJSON().readFeatures(codeJson);constftfts[0];constconverGeomthis.erase(ft.getGeometry());constconvertFtnewFeature({geometry:converGeom,});converLayer.getSource().addFeature(convertFt);},// 擦除操作生产遮罩范围erase(geom){constextent[-180,-90,180,90];constpolygonRingfromExtent(extent);constcoordsgeom.getCoordinates();coords.forEach((coord){constlinearRingnewLinearRing(coord[0]);polygonRing.appendLinearRing(linearRing);});returnpolygonRing;},},mounted(){this.initMap();},};/scriptstyle scoped langscss.input{position:fixed;top:10px;right:10px;border-radius:10px;background:#fff;display:flex;flex-direction:column;padding:5px;padding-bottom:10px;*{margin-top:10px;display:flex;align-items:center;}}/stylestyle scoped langscss.container{position:relative;.btn{position:absolute;left:4%;top:1%;}}#vue-openlayers{width:100vw;height:100vh;}h3{line-height:40px;}/* 隐藏信息盒子的初始样式 */#info-box{display:none;position:absolute;background:white;border:1px solid black;padding:10px;border-radius:5px;font-size:14px;pointer-events:none;/* 防止信息盒子影响鼠标事件 */}/style
