shp数据在html中的加载方法（Geosever与Geojson）

最新推荐文章于 2024-01-25 12:03:17 发布

原创

最新推荐文章于 2024-01-25 12:03:17 发布

· 841 阅读

1 ·

版权

文章标签：

#html #前端 #javascript

本文介绍了如何在HTML前端中加载shp数据，包括将shp转换为geojson本地引用和通过GeoServer发布服务引用。前端结构分为HTML、CSS和JavaScript三层。文中提供了创建基础底图的示例，并详细说明了两种shp数据引用方法的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

shp数据在html中的加载方法（Geosever与Geojson）

絮絮叨叨
引用

絮絮叨叨

前端分为三层
结构层对应html，用来描述整个页面的结构
表现层对应css
行为层对应javascript

引用

shp数据添加到html中引用主要有两种方法，
一个是转为geojson数据，本地引用修改的js文件，
另一个是geosever发布在线服务，引用url。

创建基础底图

例子+注释比较看的明白，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入geojson文件</title>
    <link rel="stylesheet" href="leaflet.css">                              //引用leafet css与js
    <script src="leaflet.js" type="text/javascript"></script>

    <style>
        * {
            marg