![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
D1:地图
openlayers、leaflet学习
柒个M
兴趣是最好的老师!!!
展开
-
PruneCluster的基本使用
官网:https://github.com/mapleaflet/pruneclusterPruneCluster是一个快速、实时的标记集群库。1、使用:<!-- In <head> --> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> <!-- In <head> or before </body> -原创 2021-03-20 16:51:42 · 846 阅读 · 0 评论 -
LeafLet之聚合图形
项目需要使用leaflet技术,后来又加了聚合图形,首次使用,记录一下实战Demo,有理解不到的点,还请大佬们指教。1、地图缩小后显示一个聚合点效果:地图放大后的效果:图有点丑,凑合着看吧。上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>PruneCluster - Realworld 50k</原创 2021-03-20 16:16:56 · 558 阅读 · 1 评论 -
leaflet常用功能整理知识总结
https://blog.csdn.net/qq_36213352/article/details/82321244?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-13.control&dist_request_id=1328679.21765.16162116658125297&depth_1-utm_source=distribute.pc_relevant.none-ta原创 2021-03-20 11:49:33 · 328 阅读 · 0 评论 -
LeafLat和markercluster
新入职的公司使用的技术是LeafLat,之前一直接触的是openlayers,两者都是开发地图的,但是LeafLat和oepnlayers的关系,据了解相当于jQuery和js的关系,就不多说了。先上一波资源:LeafLat的官网地址:https://leafletjs.com/index.htmlmarkercluster的官网地址:https://www.npmjs.com/package/leaflet.markerclustermarkerCluster官网给出的解释是:P.原创 2021-03-17 14:29:10 · 214 阅读 · 0 评论 -
openlayers点击地图添加Mark
效果图:代码:<!DOCTYPE html><html lang="en"><script src="../js/ol.js"></script><script src="../js/jQuery/jquery-3.1.1.min.js"></script><link rel="stylesheet" href="../css/ol.css"/><head> <meta c.原创 2021-03-11 15:14:56 · 1168 阅读 · 0 评论 -
openlayers在地图上自定义图形
效果图:代码:<!DOCTYPE html><html lang="en"><script src="../js/ol.js"></script><script src="../js/jQuery/jquery-3.1.1.min.js"></script><link rel="stylesheet" href="../css/ol.css"/><head> <meta c.原创 2021-03-11 15:07:55 · 721 阅读 · 0 评论 -
Opnelayer学习之设置鼠标在地图上的样式
const CURSOR_STATE = 'default', //鼠标默认状态 /** * 设置地图中的鼠标样式 */ cursorControl(state) { // 地图中的鼠标样式 const canvases = document.getElementsByTagName('canvas') ...原创 2020-12-21 11:29:02 · 264 阅读 · 0 评论 -
openlayer学习之初始化地图
本代码是请求服务器的地图资源:1、初始化地图:首先引入地图的依赖 import 'ol/ol.css' import OLMap from 'ol/Map' import View from 'ol/View' import TileLayer from 'ol/layer/Tile' import VectorLayer from 'ol/layer/Vector' import XYZ from 'ol/source/XYZ' import Ve原创 2020-12-21 11:23:30 · 553 阅读 · 1 评论 -
Openlayer学习之请求服务器地图资源
在项目中使用到了openlayer技术,公司有自己的地图服务,记录下如何访问服务器的地图资源1、整体的思路是,使用Vuex存储服务器的BaseApi,在需要用的页面中,创建地图,并配置地图资源路径2、具体的操作步骤:VueX中的api.js文件const baseUrl = process.env.VUE_APP_BASE_APIconst api = { state: { baseApi: baseUrl, // mapurl瓦片地图服务url map原创 2020-12-21 11:16:32 · 294 阅读 · 0 评论 -
openlayer入门
效果图:1、首先在Vue项目中安装openlayer:npm install ol2、在页面中使用:<template> <div class="ov-container"> <div id="map" class="map"> <!-- 地图坐标组件 --> <MapCoordinate :coordinate="coordinate"><...原创 2020-09-14 11:13:30 · 524 阅读 · 0 评论