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、页面代码

精彩链接

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