- 博客(65)
- 收藏
- 关注
RSS订阅原创 openlayer在地图上渲染图标无法操作地图问题
但会有一个问题，那就是当鼠标移入到该图标上后，就无法操作地图了，无论是双击放大、滚轮缩放、鼠标拖动地图这些都会失效，起因是当前鼠标作用到了overlay所在的dom盒子上去了，没有作用到地图所在盒子的canvas上面。当你将一个overlay添加到地图上时，默认情况下，它会阻止鼠标事件透传到地图上，这就导致了无法拖动地图或进行缩放操作。ol对于在地图上渲染图标，并且图标可以随着地图的缩放层级自适应，跟随地图移动，ol是提供了一个很好用的方法的---overlay。这样做会允许鼠标事件继续传递到地图上。
2024-01-05 20:38:49
464
原创 vite项目配置vite.config.ts在打包过程中去除日志
在生产环境上，务必要将日志清除干净，其因有二，在webgis系统中，有很多几何数据，体积大、数量多，很容易引起系统卡顿；清除log后，系统看着舒服，协同开发有很多无聊的日志，打出来没必要。vite中已经内置移除console的设置，只需简单配置即可生效。在配合文件根目录下开启build的配置。开启前打包后有日志，开启后打包上线无日志，主打一个清爽。
2023-11-23 11:22:31
913
原创 openlayer绘制过程添加提示文字
元素是一个HTML DOM元素，它代表了地图容器的可视区域，也就是用户能够看到的部分。元素，进而对地图进行各种定制化的操作，比如添加提示框、弹出窗口等等。方法可以在地图初始化之后随时调用，返回地图容器的。是一个地图对象的方法，用于获取地图的。在OpenLayers中，
2023-11-21 14:38:29
360
原创 vue.config.js配置
"transpile" 是一个合成词，由 "translate"（翻译）和 "compile"（编译）两个词组合而成。转义依赖库的意思，将某些依赖库进行语法转换，有些依赖库的语法很超前，对一些浏览器兼容性不好，所以统一将其转义成ES5的低级语法。在前端开发领域，"transpile" 经常用来指代将较新版本的 JavaScript 代码转换为向后兼容的旧版本，以确保代码可以在更广泛的浏览器环境中运行。这通常通过使用类似 Babel 这样的工具实现。
2023-11-06 14:44:29
1930
原创 openlayer注册4490坐标系，添加4490超图服务
这样4490就算是定义好了，定义好了还没用，还需要挂接到ol体系里面去才能使用，ol专门针对proj4开发对接方法import { register } from "ol/proj/proj4";，TileSuperMapRest 是将超图服务地址包裹成ol tilesource的函数，加载超图时，如果是非4326、3857的坐标系，一定要加上extent，不然会报错。需要安装超图挂接ol的库@supermap/iclient-ol，这个自行安装，安装使用还有点坑，遇到问题的可以翻我之前的文章，很稳。
2023-10-11 10:26:45
1132
2
原创 配置vscode代码段，速通版
唤醒快捷指令：jcl完整代码：JSON.parse(JSON.stringify(data))功能描述：克隆js对象。
2023-05-22 15:23:57
135
原创 windows系统本地批量预览svg图标
目前第二种是比较方便的，不需要频繁替换类文件，只需要下载svg到指定文件夹即可。这时候会出现一个问题，因为svg文件是无法像其他格式图片（png、jpg等等）可以直接查看的。随着项目体量变大，文件夹中图标繁多，做到后面就会出现“”的疑惑，尤其是团队合作开发，如此下去会导致svg图标赘余，出现很多形状相同或类似的不同名字的图标。
2023-04-20 21:56:23
3414
原创 openlayer+vue实现监听绘制（实时导出绘制要素，回调函数之外操作绘制对象）
前言：大伙好，我又带来干货啦，今天在做交互时有个问题困扰了我许久，先说应用场景：用户对影像进行绘制区域栅格统计查询，统计出栅格的区间占比，最后根据数据生成带图例的饼状图，像这样：在组件化开发的时代，讲究功能组件化、组件功能单一化，展示组件逻辑要完全和地图组件分离开，不能出现展示组件中引入ol库的low代码。大家用过ol的都清楚，ol的Draw绘制监听是回调，例如： draw.on("drawend", (DrawEvent) => ...
2022-03-27 00:42:53
2039
原创 超图申请试用以及激活
由于发现网上国产化地理信息产品的教程资料比较少，正好自己对这方面接触比较多，所以分享一下这方面的东西，希望帮到大家，也希望国产地理信息越做越好。1.登录官网填取信息，申请许可SuperMap技术资源中心|为您提供全面的在线技术服务2.勾选许可服务类型，这里跟着我这样走就行3.紧接着邮箱会收到文件这里只下载.lic9d文件就可以啦4.打开，这个是相对路径，自行查找SuperMap\SuperMapiServer10i\support\SuperMapLice..........
2022-03-26 11:10:11
5531
原创 vue加载supermap iclcent-ol （iclient for openlayer）
vue加载supermap iclcent-ol iclient for openlayer不拐弯抹角，直接上干货1.首先你需要一个vue环境，这个遍地都是哈，自行解决我的环境是：vuecli-3x 也就是 vue create projectname方式 包管理工具是yarn yarn add xxx webpack 5+(这个关系到后面的一个包)如果你不是也无妨，这一点也不重要，我说的！2.下包了同志们yarn add @su....
2022-03-23 10:34:01
4520
14
原创 Vuex的使用
不客套哈，我自己回忆的使用一下，记录一下学习，有错大神们帮忙指出一下1.下载yarn add axios2.环境挂载在src目录下新建store文件夹，在里面新建index.js管理仓库这里的路径和命名不是唯一的哈，大伙可以根据自己的需要，然后变着法玩Vuex，懂得都懂index.js初始化一下结构首先是把Vue老大导进来，因为要use()注册一下这玩意，玩得花归玩得花，Vue老大的位置还是撼动不了滴然后就是四剑客了，大的项目才需要用到modules，modules是Vuex.
2022-03-22 21:47:15
572
原创 vue中的适配问题 lib-flexible
1.安装lib-flexibleyarn add lib-flexible2.在main.js中导入import "lib-flexible/flexible.js";原本个文件是用来适配移动端的，所以这里需要修改一下源码 function refreshRem() { var width = docEl.getBoundingClientRect().width; // if (width / dpr > 540) {
2022-03-17 17:56:12
1579
1
原创 vue openlayer加载天地图
vue+arcgis api两种环境下加载天地图（1.esri-loader、2.@arcgis/core）_我有柚子茶噢的博客-CSDN博客相比较于arcgis api openlayer加载天地图就很简单了，因为底层的切片方案是一致的<template> <div id="map"></div></template><script>import "ol/ol.css";import Map from "ol/Map.
2022-03-04 11:18:17
1844
原创 vue+arcgis api两种环境下加载天地图（1.esri-loader、2.@arcgis/core）
有帮到你的话就点个赞叭1.esri-loader直接上源码<template> <div id="viewDiv"></div></template><script>import { setDefaultOptions, loadModules } from "esri-loader";// 这里的设置默认配置项的写法等同于{css:true}// setDefaultOptions({ css: true });..
2022-03-04 10:16:28
2873
原创 vue中使用esri-loader
注意这个引入顺序，必须严格一一对应，你的引入模块顺序要和下面的形参列表对应上 loadModules( [ "esri/views/MapView", "esri/layers/MapImageLayer", "esri/layers/GraphicsLayer", "esri/layers/GeoJSONLayer", "esri/widgets/Sketch", "esri/Basemap"
2022-03-03 22:39:44
2293
2
原创 import和@import
@import是在<style>标签下引进某个.styl或者.css样式类文件，而在在test.less中引入Global.less@import './Global.less';.header{ width: 200px; height: 200px; background-color: pink; a{ color: red; //如果有伪类、伪元素、交集选择器要加& &:hover
2022-03-01 15:36:32
667
原创 vue-cli全局组件挂载两种方式（用require.context）
1.原生挂载方式//加载中组件import loadingLayer from "@/components/loadingLayer.vue"Vue.component("loadingLayer",loadingLayer)2.运用require.context()进行一次性遍历文件夹挂载import Vue from 'vue'import App from './App.vue'import router from './router'import "./assets/fon
2022-03-01 13:13:56
914
转载 关于export default等引入方法
关于import, @, *, export, export default的用法和区别_杨梦飞-CSDN博客
2022-03-01 10:03:05
660
原创 vue中利用openlayer加载geojson
环境搭建的事就不多提了昂 安装一下 npm i ol算啦，直接贴代码，实在点<template> <div> <div id="map"></div> </div></template><script>import { Map, View } from "ol";import { Vector as VectorLayer, Tile } from "ol/layer";import .
2022-02-25 16:23:18
1770
转载 在@vue/cli3x种配置webpack
vue-cli3搭建项目之webpack配置_梦行天宇的博客-CSDN博客_vuecli3配置webpack
2022-02-25 14:53:37
58
原创 不用vue-cli创建组件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body>&...
2022-02-25 14:14:51
275
原创 首次用webpack打包样式资源，webpack初体验
/*webpack的配置文件*/const { resolve } = require('path')module.exports = { entry: "./src/index.js", output: { filename: "built.js", path: resolve(__dirname, 'build') }, // loader的配置 module: { rules: [ .
2022-02-25 10:32:17
209
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人