初识openlayers

已于 2023-04-16 23:08:22 修改
阅读量143 收藏
点赞数
文章标签： css javascript html
于 2023-03-25 20:59:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shensa5556/article/details/129772260
版权

一、测试openlayers

官网
1.加载地图，并添加鼠标移动位置坐标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>map demo</title>
  <link rel="stylesheet" href="lib/ol4.6.4/ol.css" type="text/css">
  <style>
    html,
    body,
    #map{
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .ol-mouse-position{
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: rgba(255,255,255,.6);
      padding: 10px;
      border: 1px solid #ccc;
      z-index: 9;
      top: auto;
      display: none;
    }
  </style>
  <script src="lib/ol4.6.4/ol.js"></script>
  <!-- 引入jqury，处理地图事件 -->
  <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
</head>
<body>
<div id="map">
  <!-- 鼠标位置坐标区 -->
  <div id="mousepos" class="ol-mouse-position"></div>
</div>
<script>
  var map = new ol.Map({
    controls: ol.control.defaults({
      attribution: false
    }).extend([]),
    target: 'map',
    //图层
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          //使用高德瓦片
          url:'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
    ],
    //视图
    view: new ol.View({
      center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
      zoom: 6,
      // rotation:90
    }),
  });

  //添加鼠标移动事件
  map.on("pointermove",(evt)=>{
    //获取经纬度，并且需要坐标转换
    var lonlat = ol.proj.transform(evt.coordinate,"EPSG:3857","EPSG:4326");
    $("#mousepos").html(lonlat[0].toFixed(3)+","+lonlat[1].toFixed(3)).show();
  })
</script>
</body>
</html>

效果图
在这里插入图片描述

二、创建springweb项目

1.使用idea的maven构建webapp
生成的目录结构
在这里插入图片描述
2.配置tomcat启动
在这里插入图片描述
测试启动
在这里插入图片描述
3.配置jdbc
webapp配置servlet拦截

<servlet>
    <servlet-name>lzugis</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

pom文件添加依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>demo</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>demo Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <springmvc.version>4.1.9.RELEASE</springmvc.version>
    <jackson.version>2.5.0</jackson.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <!-- jackson start   -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <!-- jackson end   -->

    <!-- servlet  -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.0.1</version>
      <scope>provided</scope>
    </dependency>

    <!--  spring  -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${springmvc.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${springmvc.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${springmvc.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${springmvc.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-websocket</artifactId>
      <version>${springmvc.version}</version>
    </dependency>

<!--    database-->
    <dependency>
      <groupId>org.postgresql</groupId>
      <artifactId>postgresql</artifactId>
      <version>9.4.1212</version>
    </dependency>
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-dbcp2</artifactId>
      <version>2.1.1</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>demo</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

配置数据库信息
创建JDBC模板
在这里插入图片描述
4.展示地图
修改index.jsp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div id="map">
    <div class="mouse-position"></div>
</div>
<script src="js/lib/ol4.6.4/ol.js"></script>
<script src="js/lib/jquery/jquery-3.3.1.min.js"></script>
<script src="js/demo3-1.js"></script>
</body>
</html>

新建demo3-1.js的js文件

window.onload=initMap();
function initMap(){
    var base =  new ol.layer.Tile({
        source: new ol.source.OSM({
            //使用高德瓦片
            url:'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
    });

    var vector = new ol.layer.Vector({
        source: null,
        style: styleFunction
    });

    window.map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: 'map',
        layers: [base, vector],
        view: new ol.View({
            zoom: 4,
            center:ol.proj.transform([110, 39],"EPSG:4326", "EPSG:3857")
        })
    });

    // $.get("test/capitals", function (result) {
    //     console.log(result);
    //     var features = [];
    //     for(var i=0,len=result.length;i<len;i++){
    //         var _r = result[i],
    //             coord = ol.proj.transform([_r.lon, _r.lat], "EPSG:4326", "EPSG:3857");
    //         var feature = new ol.Feature({
    //             geometry: new ol.geom.Point(coord),
    //             name:_r.name
    //         });
    //         features.push(feature);
    //     }
    //     var source = new ol.source.Vector({
    //         features: features
    //     });
    //     vector.setSource(source);
    // });
}

function styleFunction(feature) {
    var stroke = new ol.style.Stroke({
        color: 'black',
        width: 2
    });
    var fill = new ol.style.Fill({
        color: 'red'
    });
    var _name = feature.get("name");
    var _radius = 6,
        _radius2 = 6;
    if(_name==="北京"){
        _radius = 8;
        _radius2 = 4;
    }
    return new ol.style.Style({
        stroke:stroke,
        fill: fill,
        image: new ol.style.RegularShape({
            fill: fill,
            stroke: stroke,
            points: 5,
            radius: _radius,
            radius2: _radius2,
            angle: 0
        })
    });
}

重启项目
在这里插入图片描述

三、使用postgresql空间型数据库

1.下载，安装
2.启动在这里插入图片描述
3.右键数据库，新建数据库-lzugis，注意新建数据库时候需要使用系统自带的模板，可以使用数据库模板带的函数；
使用系统自带的模板

4.选择架构-public-数据表，新建表，建表和mysql基本一致，但是这边咱们直接导入省市等脚本文件，右键数据库，恢复，导入.back脚本文件；
在这里插入图片描述

5.使用idea链接数据库，方便写sql；
在这里插入图片描述

四、spingmvc项目调用数据库，使用三层架构

在这里插入图片描述

WebtestController代码

package com.lzugis.web.webtest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class WebtestController {

    @Autowired
    private WebtestService testService;

    @RequestMapping(value = "test/capitals")
    public List getCapitals(){
        return testService.getCapitals();
    }
}

WebtestDao代码

package com.lzugis.web.webtest;

import com.lzugis.helper.CommonDao;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public class WebtestDao extends CommonDao {

    public List getCapitals(){
        String sql = "select id,name,lon,lat from capital";
        return this.jdbcTemplate.queryForList(sql);
    }
}

WebtestService代码

package com.lzugis.web.webtest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class WebtestService {

    @Autowired
    private WebtestDao testDao;

    public List getCapitals(){
        return testDao.getCapitals();
    }
}

重启项目，成功。

五、使用geoserver

1.启动
在这里插入图片描述
2.访问localhost:8086，登录
在这里插入图片描述
3.新建工作区
在这里插入图片描述

shensa5556
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
认识 openlayers
du_peiduo的专栏
12-23 447
认识 openlayers openlayers 版本 4.6.5 实现一张地图 这是一个地图实例，你可以把以下内容复制到一个新的 html 文件中，打开试试。 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <style&
openlayers 风场渲染效果
01-11
openlayers 风场渲染效果，放置风场数据即可使用
初识Openlayers
weixin_49929681的博客
05-08 1313
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录`系列文章目录`一、Openlayers是什么？二、使用步骤1.引入库2.读入数据总结 一、Openlayers是什么？ OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为
初识OpenLayers
h1534589653的博客
08-24 285
OpenLayers作为一款开源地图开发软件，提供了强大的地图渲染、编辑等功能。而且源码一直都在更新中。 OpenLayers的官方网址http://openlayers.org/。有中文网站只是中文网站上的内容过于简单，不利于学习。 所以建议看英文官网，英文官网提供了全面的API文档和Example，学习起来很方便
openlayers入门教程1《初识openlayers》
qq_40795662的博客
01-23 420
4、source：它是和图层一一对应的，OpenLayers也存在多种不同的数据源，每一种在实现上也对应于一个具体的类，它们都放在包ol.source下面，之前接触过的ol.source.OSM就是其中的一种。1、Map: 前面我们看到了，我们的所有配置最后都是作为参数传递到Map类中，进行实例化，最终初始化我们的地图，所以Map类就是我们构建一个地图的最基础类，负责将各个部分的内容整合在一起。3、layers：图层容器, 对于一个地图来说我们向上面添加的元素都被视为图层，大家互不干扰丰富我们的地图。
openlayers遮罩示例
01-29
**OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库，用于在Web上构建交互式的地图应用。这个示例将展示如何在OpenLayers中实现地图遮罩功能，以便在地图上显示半透明覆盖层，从而突出显示特定区域...
openlayers中文.rar
08-20
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图数据源，包括WMS、WMTS、TMS、GeoJSON等，使得开发者能够轻松地将地理信息集成到Web应用中。这个"openlayers中文.rar...
openlayers
03-31
OpenLayers 是一个开源JavaScript库，专门用于在Web浏览器中创建交互式地图应用。它支持多种地图数据源，包括WMS、WFS等服务，以及GeoJSON、KML等矢量格式，使得开发者能够轻松地在网页上展示地理信息。本资料主要...
openlayers：OpenLayers
02-04
OpenLayers 是一个高性能，功能丰富的库，用于在Web上创建交互式地图。 它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记。 OpenLayers的开发旨在进一步利用各种地理信息。 它是完全免费的开源...
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1046
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 748
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 407
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 419
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
css画半圆&&画圆弧
M1512415的博客
07-12 232
【代码】css画半圆&&画圆弧。
Html_Css问答集(11)
白话魔法师
07-16 603
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
最新发布
m0_69119792的博客
07-16 538
介绍css和xpath，设置相对定位的基础使用
CSS变换
m0_63165331的博客
07-14 613
本文主要讲述CSS中的变换相关内容。
使用 CSS 实现透明效果
前端开发
07-16 217
使用 CSS 实现透明效果
Openlayers
10-26
OpenLayers是一个高性能、功能丰富的库，用于在web上创建交互式地图。它可以显示地图瓷砖，矢量数据和标记加载从任何来源在任何网页。OpenLayers的开发是为了进一步使用各种地理信息。它是完全免费的，开源...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值