javascript vue.js vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能

vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除地图所有等功能

由于最近项目中用到了地图，所以今天有时间把代码摘出来，自己写个地图的小demo标记下话不多说，先看效果：

map1

1、安装ol

npm i ol@6.14.1

这是我的目录结构

2、下面是OpenlayerMap/index.vue（地图）的代码，记得申请地图得key，记得填到下方的代码中

3、下面是OpenlayerMap/index.ts的代码

import OpenLayerMap from "./index.vue"

export {

OpenLayerMap

}

4、这是我地图中用到的三张图片，chart.png是地图上弹窗的背景图。icon.png是个标点的小图标，剩下两个是地图画轨迹时一个起点和终点的图标，如果你粘贴我的代码，没这几张图片会报错把几张图片分别给大家贴出来吧： chart.png endPoint.png startPoint.png icon.png

5、全局引入

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import Antd from 'ant-design-vue';

import 'ant-design-vue/dist/antd.css';

//引入地图

import components from "@/components/index";

let app=createApp(App)

Object.values(components).forEach((com) => {

app.use(com);

});

app.use(store).use(router).use(Antd).mount('#app')

6、页面代码

精彩链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。

夸智网

javascript vue.js vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能

前端 vue.js typescript vue3+vite安装postcss-pxtorem

typescript vue.js 前端框架 Naive UI使用useDialog、useMessage、useNotification、useLoadingBar，超实用

发表评论取消回复

夸智网

javascript vue.js vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能

前端 vue.js typescript vue3+vite安装postcss-pxtorem

typescript vue.js 前端框架 Naive UI使用useDialog、useMessage、useNotification、useLoadingBar，超实用

相关文章

发表评论取消回复