vue集成openlayers加载geojson并实现点击弹窗教程_openlayersgeojson点击查询

vue

openlayers

7 浏览量更新于2023-03-16 评论收藏 61KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue集成集成openlayers加载加载geojson并实现点击弹窗教程并实现点击弹窗教程

主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程，文中示例代码介绍的非常详细，具有一定的参

考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下

第一步：第一步：安装vue-cli

cnpm install -g @vue/cli

第二步：第二步：新建一个项目

1.新建项目（vue-openlayers为项目名）,并选择default模版

vue create vue-openlayers

2.安装openlayers

cnpm i -S ol

第三步：第三步：写业务代码

1.删除掉HelloWorld.vue 新建 olmap.vue组件

components/olmap.vue代码：

<tbody>

<tr>

</tr>

<tr>

<td>{{layerName}}</td>

</tr>

<tr>

<td>handle：</td>

<td>{{handle}}</td>

</tr>

<tr>

<td>{{blockName}}</td>

</tr>

</tbody>

</table>

</div>

</template>

import "ol/ol.css";

import { Map, View } from "ol";

// import TileLayer from "ol/layer/Tile";

import VectorLayer from "ol/layer/Vector";

// import OSM from "ol/source/OSM";

import VectorSource from "ol/source/Vector";

// import Feature from "ol/Feature";

import GeoJSON from "ol/format/GeoJSON";

import Style from "ol/style/Style";

import Stroke from "ol/style/Stroke";

import Fill from "ol/style/Fill";

// import Select from "ol/interaction/Select"

// import {bbox} from 'ol/loadingstrategy';

import Point from "ol/geom/Point";

import { transform } from "ol/proj";

import Text from "ol/style/Text";

import Overlay from "ol/Overlay";

export default {

data() {

return {

map: null,

allFeatures: null,

layerName: null,

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38571544

粉丝: 3
资源: 895

会员权益专享

vue集成openlayers加载geojson并实现点击弹窗教程

评论0

会员权益专享

最新资源

vue集成openlayers加载geojson并实现点击弹窗教程

评论0

Vue-cli项目获取本地json文件数据的实例

openlayers3 简单示例

vue 导入shp文件展示在地图上

openlayers+vue 实现弹窗

在vue2中，如何使用openlayers将geojson点数据渲染？当鼠标点击某个点的时候，该点图标变成一个图片的图标，并显示一些信息

vue openlayers 弹窗 地图层级

vue3 arcgis js 加载geojson

vue+openlayers6

Vue3实现点击弹窗以外的地方关闭弹窗

vue开发openlayers十二切片包下载

vue openlayers加载天地图

vue openlayers 图层控制

vue2 openlayers

vue 中 openlayers 点位添加点击事件

vue openlayers实现台风轨迹

vue openlayers 点击点弹框

vue2 openlayers 点击标记

vue项目中静态加载openlayers

vue获取openlayers的Features

vue2 openlayers 廊坊市中聚合点 点击标注信息弹窗的代码

会员权益专享

最新资源

vue openlayers 弹窗地图层级

vue2 openlayers 廊坊市中聚合点点击标注信息弹窗的代码