openlayers
文章平均质量分 86
熊抱抱的一粒
世界灿烂盛大,欢迎回家。
展开
-
OpenLayers工具栏(vue中使用)
效果如下这只是一小部分效果图片,因为动态图片超出大小,只能放静态图片。完整代码部分<template> <!-- 绘制、编辑、输出GeoJson数据 --> <div ref="map" id="map"> <div class="btns"> <button @click="drawFeature">绘制</button> <button @click="editorFeatu原创 2021-10-09 09:53:43 · 1374 阅读 · 1 评论 -
学习vue加OpenLayers(4)地图全局视图(鹰眼图)控件
效果图当地图移动时,鹰眼图也跟着移动,并可以拖动鹰眼图,地图也随之移动。直接上代码<template> <div class="hello"> <div id="map" class="map"></div> </div></template><script>import "ol/ol.css";import OSM from "ol/source/OSM";// 对于在网格中提供预渲染的原创 2021-09-13 14:21:22 · 1365 阅读 · 0 评论 -
学习vue加OpenLayers(3)动画 GIF
不知道为什么官网的案例一直说没有gifler()方法,所以我又去网上查了查,发现openlayers官方API上是不支持gif的,openlayer 里面支持 gif 图标上图的只有 overlay类。案例 gjf图片定位在地图的一些点上,这个我也是参照了另一位博主的博客加上官网写的,附上链接博客代码<template> <div id="content"> <div id="map" class="map" ref="map"></div>原创 2021-08-26 13:48:34 · 1039 阅读 · 0 评论 -
学习vue加OpenLayers(2)高级视图定位
案例依旧是官网的效果图代码<template> <div class="hello"> <div class="mapcontainer"> <div id="map" class="map"></div> <div class="padding-top"></div> <div class="padding-left"></div>原创 2021-08-25 17:08:45 · 211 阅读 · 1 评论 -
学习vue加OpenLayers(1)
因为我是从现在开始学习这个ol,所以案例是从官网上找的,openlayers官网只不过我用vue重新写一遍,下面开始。效果图1.创建好的vue项目,执行npm i ol --save命令2.写一个div地图容器 <div id="map" class="map" tabindex="0"></div> <button id="zoom-out" @click="zoomout">Zoom out</button> <butto原创 2021-08-25 14:29:08 · 431 阅读 · 0 评论