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

最新推荐文章于 2024-09-23 15:03:13 发布

迷茫的小猿

最新推荐文章于 2024-09-23 15:03:13 发布

阅读量2.7k

点赞数 4

分类专栏： geojson vue openlayer 文章标签： vue openlayers geojson

本文链接：https://blog.csdn.net/weixin_43747076/article/details/106264738

版权

本文详细介绍了如何使用vue-cli创建项目，集成OpenLayers库，并逐步教你新建olmap.vue组件，加载GeoJSON数据。通过实例代码展示如何在Vue应用中实现地图上点击事件触发弹窗。

摘要由CSDN通过智能技术生成

第一步：安装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代码：

<template>
    <div id="map" ref="rootmap">
       <div class="vm">
        <!-- <h2 class="h-title">弹窗 popup</h2> -->
        
        <!-- 弹窗元素 -->
        <div id="popup" class="ol-popup" ref="popup">
          <a href="#" id="popup-close" class="ol-popup-closer" @click="closePopup"></a>
          <div class="popup-content">
            <table id="routeBox">
                <tbody>
                    <tr>
                    </tr>
                    <tr>
                        <td>所在图层：</td>
                        <td>{
   {
   layerName}}</td>
                    </tr>
                    <tr>
                        <td>handle：</td>
                        <td>{
   {
   handle}}</td>
                    </tr>
                    <tr>
                        <td>块名称：</td>
                        <td>{
   {
   blockName}}</td>
                    </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
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