vue2+OpenLayers 天地图上打点（1）
在这里用的是 7.2.2版本的
安装ol
npm install ol代码如下
<template><divclass="container"><div id="vue-openlayers"class="map-x"></div><div id="info-box"class="info-box"style="width: 100px; height: 100px"></div><div id="canv"style="width: 100px; height: 100px"></div></div></template><script>import"ol/ol.css";import{Map,View,style,Feature,geom,Overlay}from"ol";importTileLayerfrom"ol/layer/Tile";importXYZfrom"ol/source/XYZ";import{VectorasVectorSource}from"ol/source";importVectorLayerfrom"ol/layer/Vector";import{Point,LineString}from"ol/geom";import{Style,Icon,Stroke,Text,Fill}from"ol/style";importlogofrom"@/assets/logo.png";// 图片的地址import*asolfrom"ol";import"ol-ext/dist/ol-ext.css";// 引入 js 文件和css文件exportdefault{name:"FirstMap",data(){return{map:null,draw:null,maskLayer:null,logo,layers:[],};},methods:{initMap(){letthat=this;// 将图标样式应用到点要素constfeatures=[];constpoint=newPoint([108.56,34.15]);// 修改坐标格式constfeature=newFeature({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);//设置地图的数据源constsource=newVectorSource({features,});letmarkLayerPoints=newVectorLayer({source:source,});letmap=newMap({target:"vue-openlayers",layers:[newTileLayer({source:newXYZ({url:"https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",// 网上找的图层}),}),markLayerPoints,// 确保图层顺序正确// vectorLayers,],view:newView({projection:"EPSG:4326",center:[108.56,34.15],// 修改中心坐标格式zoom:6,}),});this.map=map;},},mounted(){this.initMap();},};</script><style scoped lang="scss">.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;}}</style><style scoped lang="scss">.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>