在这里用的是 7.2.2版本的安装olnpm install ol代码如下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;// 引入 js 文件和css文件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;},},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 天地图上打点（1）
发布时间：2026/5/19 12:33:56
在这里用的是 7.2.2版本的安装olnpm install ol代码如下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;// 引入 js 文件和css文件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;},},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
高亮度LED恒流驱动控制芯片)
