项目难点记录

漆黑骑士

已于 2022-09-08 17:36:48 修改

阅读量208

点赞数

分类专栏：开发经验总结文章标签： javascript 开发语言 ecmascript

于 2022-09-02 14:49:39 首次发布

本文链接：https://blog.csdn.net/weixin_50902154/article/details/126658930

版权

开发经验总结专栏收录该内容

18 篇文章 1 订阅

订阅专栏

项目中遇到的各种问题，原生的，框架的，版本管理等都记录在此...

使用vue实现框选功能

描述：项目中需要有框选查询的功能，但是SM地图中并没有提供相应api，所以需要自己写一下

思路：浏览器原生和map可以监听同一个事件，点击地图某一点，可以得到事件对象的经纬度和像素点位置，同时浏览器监听到原生事件，也可以得到像素点，屏幕坐标等...

模拟框选需要原生事件创造无bgColor的div并给一个边框,同时需要获取地图事件中鼠标落下和抬起时的经纬度，方便传递给后端。

1.容器

该容器用于渲染地图，在这里监听事件

   <div
      id="mainMap"
      style="height: calc(100vh - 160px); width: calc(100vw - 20px)"
      @mousedown="down"
      @mousemove="move"
      @mouseup="up"
      ref="map"
    ></div>

2.全局锁

这是一个概念，容器监听的事件会立即被触发，但是我们需要在选中框选查车这个下拉框后在触发框选功能，其余时间正常操作地图。

·····所以data中需要有一个布尔值 isMove 来当锁。

·····(可以看到在初始化地图的时候就已经监听事件了，doublePoint对象是用来存放查询必需的两个点的经纬的)

 getmap() {
      this.map = new smartmapx.Map(this.option);
      var nav = new smartmapx.NavigationControl();
      this.map.addControl(nav, "top-right");
      this.map.on("mousedown",(e)=>{
        this.doublePoint.point1=e.lngLat
      })
      this.map.on("mouseup",(e)=>{
        this.doublePoint.point2=e.lngLat
      })
    },

之后在点击下拉菜单并选中框选查车之后，改变全局锁的状态为true，触发框选事件

3.事件

data中存放div，鼠标按下并移动用于改变div位置和大小等，添加至渲染map的容器内。（这里是原生js的事件）

注意：监听事件要获取事件对象，在绑定方法时只写方法名不需要加括号

交互事件执行是因为全局锁为true，在鼠标抬起的那一刻，全局锁再次变为false！

    move(e) {
      if (this.isMove === true) {
        this.map.getCanvas().style.cursor = "crosshair";
        this.map.dragRotate.disable();
        this.map.dragPan.disable();
        this.ele.style.width = e.layerX - this.layerX - 10 + "px";
        this.ele.style.height = e.layerY - this.layerY - 10 + "px";
      }
    },
    down(e) {
      if (this.isMove === true) {
        this.ele.style.width = "0px";
        this.ele.style.height = "0px";
        this.ele.style.position = "absolute";
        this.ele.style.left = e.layerX + "px";
        this.ele.style.top = e.layerY + "px";
        this.ele.style.border = "1px solid black";
        this.layerX = e.layerX;
        this.layerY = e.layerY;
        this.$refs.map.appendChild(this.ele);
      }
    },
    up(e) {
      if (this.isMove === true) {
        this.formValue = "工具";
        this.map.dragRotate.enable();
        this.map.dragPan.enable();
        this.$refs.map.removeChild(this.ele);
        this.isMove = false;
        this.map.getCanvas().style.cursor = "pointer";
        console.log(this.doublePoint); //注意这里就是用到的数据
            
      }
    },

git的一些操作

提交代码前必须要git pull 一下，将最新代码拉取并解决冲突后再将自己的代码上传。

如果本地代码更改并提交至远程子分支后(新)，拉取远程主仓库代码(旧)，这时会产生版本回退，可以通过 git rebase --abort 来取消回退

如果要回退版本，在更改冲突后 git add. git rebase --continue ，从而解决冲突.

vue / react 打包成h5App

从开始写移动端的练手项目到现在，踩了不少坑，同时也学了不少新技术

两个移动端分别用

react -hooks+ antd-mobile + rtk + axios + ts 和

vue3 + nut + axios + pinia + ts 来写。

在这里记录一下，以免之后遇到还得再次找资料

打包要注意的点：

1.区分本地环境和服务器环境

一般APP都是在本地打开，所以在移动端项目打包完成后也必须是本地可以打开的，

Vite 利用浏览器原生 ES Modules的支持，实现开发阶段的 Dev Server，进行模块代码的按需加载。默认输出 <script type=module>就是 ES Modules 以type="module"模块化的方式，来加载和访问资源文件。而这模块化形式的JS代码，想要在浏览器中直接以文件系统的形式去访问运行不是被允许的，需要在HTTP服务器环境下才能访问。
，而webpack打包后支持直接打开文件

可以选择一开始就用基于webpack的脚手架来创建，譬如 create -react-app 或 vue-cil

也可以用vite敏捷开发，之后使用webpack重构项目

2.打包前检查资源

要确保项目里文件没有中文命名，否则打包失败

之后用hbuilderX新建h5app项目，将打包好的文件替换该app的内容，右键打包即可...

反思：要注意vite 和 webpack的区别