做推广最好的网站是哪个?,网站毕业设计代做,做门户网站的系统,影视动漫专业文章目录 map 参数效果图代码分析 map 参数
controls 地图的控件
pixelRatio 设备上物理像素与设备无关像素#xff08;dip#xff09;之间的比率。
interactions 地图的互动
keyboardEventTarget 监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例… 文章目录 map 参数效果图代码分析 map 参数
controls 地图的控件
pixelRatio 设备上物理像素与设备无关像素dip之间的比率。
interactions 地图的互动
keyboardEventTarget 监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例如如果将此选项设置为 document键盘则交互将始终触发。如果未指定此选项则库在其上侦听键盘事件的元素是地图目标即用户为地图提供的div。如果不是 document则需要集中目标元素以发射关键事件这要求目标元素具有tabindex属性。
layers 图层
maxTilesLoading 同时加载的最大瓦片数。
overlays 叠加层最初添加到地图中。默认情况下不添加任何覆盖。
target 地图的容器
view 地图的视图效果图 代码
templatediv classcontainerh3加载OpenStreetMap地图/h3p超爷openlayer/pdiv idvue-openlayers/diva hrefhttps://xiehao.blog.csdn.net/article/details/105272407详情地址/a/div
/templatescript setup
import { ref, onMounted } from vue;
import ol/ol.css;
import { Map, View } from ol;
import { Tile as TileLayer } from ol/layer;
import { OSM } from ol/source;
const map ref(null);
const initMap () {let osmLayer new TileLayer({source: new OSM(),zIndex: 1,}); map.value new Map({target: vue-openlayers, //跟页面元素的 id 绑定来进行渲染layers: [osmLayer],view: new View({//配置地图显示的options配置坐标系中心点缩放级别等projection: EPSG:4326,center: [116.389, 39.903], //地图中心坐标zoom: 8, //缩放级别}),});
};
onMounted(() {initMap();
});
/script
style scoped
.container {width: 840px;height: 570px;margin: 50px auto;border: 1px solid #42b983;
}
#vue-openlayers {width: 800px;height: 450px;margin: 0 auto;border: 1px solid #42b983;position: relative;
}
/style
分析
1 首先页面需要先创建一个 div用来绑定 map 地图上
div idvue-openlayers/div2 下面是一个初始化地图的方法
const initMap () {let osmLayer new TileLayer({source: new OSM(),zIndex: 1,}); map.value new Map({target: vue-openlayers, //跟页面元素的 id 绑定来进行渲染layers: [osmLayer],view: new View({//配置地图显示的options配置坐标系中心点缩放级别等projection: EPSG:4326,center: [116.389, 39.903], //地图中心坐标zoom: 8, //缩放级别}),});
};前面的声明了三个变量分别是 容器target图层layersview视图。
通过实例化了一个OpenLayers的Map对象于是就显示了地图Map是什么
它是OpenLayers中最主要的对象要初始化一幅地图需要一个targetviewlayers。target 主要是用来跟页面的元素进行绑定显示layers 我们看到他其实是一个数组形式那就说明它可以存在多个图层这也是openlayers强大之处非常实用。通过new Tile() 创建了一个图层但是单单创建图层也是不行图层里面必须要有数据于是就有了 source: new OSM() 创建了一个OpenStreetMap提供的切片数据同理通过new View() 创建了一个视图对象 center 设置默认地图中心点位置zoom 设置缩放等级
