openlayer
星良辰寻
没什么好介绍的,咸鱼Id一样
展开
-
openlayer setCenter 地图无反应
加上map.render()即可。原创 2023-10-19 10:56:36 · 195 阅读 · 0 评论 -
openlayer overlay map.getOverlays()循环删除 bug解决
本来一开始是想将所有的overlay在地图上拿到之后循环删除,但是发现会有问题,因为删除了一个之后overlay的数组会变,所以这里我的办法就是拿到所有的overlay的id,然后再通过id查找然后再去删除。原创 2022-11-23 10:14:52 · 495 阅读 · 0 评论 -
openlayer cluster 聚合图层踩坑 addfeatures
openlayer cluster 聚合图层踩坑 addfeatures原创 2022-11-23 10:10:27 · 832 阅读 · 0 评论 -
openlayer stroke 两条线重叠样式 openlayer+vectorLayer
openlayer stroke 两条线重叠样式 openlayer+vectorLayer。原创 2022-11-18 17:37:25 · 288 阅读 · 0 评论 -
openlayer+ol-ext 裁剪 天地图 中国或者其他省份 范围进行展示
openlayer+ol-ext 实现地图图层裁剪 中国或省份原创 2022-11-17 20:20:46 · 742 阅读 · 4 评论 -
openlayer+ vue 加载本地wfs服务
openlayer+vue 加载本地wfs服务原创 2022-11-08 09:35:49 · 565 阅读 · 0 评论 -
openlayer加载天地图 并设置地图颜色为科技蓝
openlayer加载天地图 并设置地图颜色为科技蓝原创 2022-11-03 14:26:03 · 2884 阅读 · 1 评论 -
openlayer 加载4547坐标系 以及 wfs服务数据(或其他坐标系)
openlayer 加载4547坐标系 以及 wfs服务数据(或其他坐标系)原创 2022-11-03 14:11:29 · 1691 阅读 · 0 评论 -
css滤镜调节图片或地图颜色
css滤镜demo 调节图片颜色原创 2022-11-01 10:33:15 · 1166 阅读 · 3 评论 -
openlayer+turf 通过geojson添加线和缓冲区域
效果:如下图所示,中间黄色实线为被缓冲的线,而浅黄色为缓冲区域,核心代码:turf.buffer axios.get("static/rq3.json").then(res => { var buffered = turf.buffer(res.data, 6 * 0.001, { units: 'kilometers' }) m_layers.mediumPressureBufferLayer = new VectorLayer({ sour原创 2022-05-16 18:26:05 · 1130 阅读 · 0 评论 -
openlayer+ol-ext 打造动态水波纹圈效果
openlayer原创 2022-05-04 14:26:04 · 1003 阅读 · 2 评论 -
openlayer 渐变线
// 渐变色 // 基础线样式参考默认样式即可 function lineStyle() { //渐变色线 let styleLine = []; let steps = 10; // 渐变色原理,其实就是多个样式共同使用 for (let i = 0; i < steps; i++) { styleLine.push( new ol.styl...转载 2022-04-24 17:08:35 · 932 阅读 · 1 评论 -
openlayer+vue 禁止地图缩放,禁止地图双击放大,禁止地图拖动(interactions)
核心代码:import {defaults} from 'ol/interaction'; const map = new Map({ controls: [], layers: [], target: "myMap", interactions:defaults({ mouseWheelZoom:false, doubleClickZoom:false, shi..原创 2022-04-18 14:27:47 · 1410 阅读 · 0 评论 -
openlayer+geojson+echarts
效果:vue核心代码:<template> <div> <div id="myMap" ref="myMap"> <div class="img"> <img src="../../assets/mapEchats/圆圈.png" alt="" /> </div> </div> <div :id="item.prop原创 2022-04-16 19:23:04 · 612 阅读 · 0 评论 -
openlayer获取地图上的layers数组 并循环删除 bug解决
解决办法:从后往前删function clearLayerWithIdArr(arr){ let map = getMap() let layers = map.getLayers().getArray() for(let i=layers.length-1;i>=0;i--){ let layer = layers[i] let layerId = layer.get('layerId') if(arr.indexOf(layerId) > -1){原创 2021-11-05 10:50:48 · 1010 阅读 · 2 评论 -
openlayer demo
openlayer demo<!doctype html><html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" type="text/css"> <style> .map {转载 2021-10-13 17:27:19 · 145 阅读 · 0 评论 -
openlayer 右击事件 查找要素
核心代码,右击事件逻辑:getCoordinateFromPixel右击事件像素换成坐标点-getFeatureInfoUrl查询 closeRightMenu(e) { console.log('这是鼠标右击事件'); console.log('这是e', e); console.log('这是this.$store.state.tagging.taskType', this.$store.state.tagging.taskType); if (t原创 2021-09-26 17:31:28 · 395 阅读 · 0 评论 -
openlayer6 getFeatureInfoUrl +map.on+map.un使用
代码:import { layers} from "./layersJson"import axios from "axios";export default { queryFun: {}, // type:"设备图层" openClickAndQueryWithType: function (map, type) { // console.log('这是this', this); let arr = map.getLayers().array_ let原创 2021-09-10 15:51:41 · 812 阅读 · 0 评论 -
openlayer 6+定位+高亮+清除高亮.js
效果:其中点的高亮样式的图片为如下图所示:import pointOut from ‘@/assets/pointOut2.png’;核心代码:需要地图map对象// liyao 2021.9.6 经纬度+高亮样式+是否定位 接口的数据cood格式为4326 // 只让地图上展示一个通过点击定位的高亮import Feature from 'ol/Feature';import Polygon from 'ol/geom/Polygon';import Point from 'ol/geom原创 2021-09-08 10:49:46 · 562 阅读 · 0 评论 -
openlayer 6 + 天地图之坐标系
2. 什么是EPSG:3857坐标系(投影坐标)在openlayers 中默认的坐标就是google的摩卡托坐标,也就是我们经常看到的 EPSG:3857 坐标系。EPSG:3857 的数据一般是这种的。[12914838.35,4814529.9],看上去相对数值较大。不利于存储,比较占内存。3. 什么是EPSG:4326 坐标系(地理坐标)4326 WGS-84:是国际标准,GPS坐标(Google Earth使用、或者GPS模块)EPSG:4326 的数据一般是这种的。[22.37,114.转载 2021-09-06 15:21:48 · 1384 阅读 · 0 评论