Web应用开发之地图加载

最新推荐文章于 2023-12-16 11:42:21 发布

bus_lupe

最新推荐文章于 2023-12-16 11:42:21 发布

阅读量524

点赞数

分类专栏：超图

本文链接：https://blog.csdn.net/bus_lupe/article/details/108685428

版权

超图专栏收录该内容

12 篇文章 7 订阅

订阅专栏

实现一个小的Web GIS应用程序，该程序实现将China数据中一幅地图发布到网络上，并访问。

地图服务准备
创建工程，引入脚本库
添加二维地图的装载容器
浏览二维地图
发布工程

地图服务准备

使用SuperMap iServer发布China地图服务

引入脚本库

创建工程文件夹
从iClient目录中复制dist文件夹
从web文件夹中复制libs文件夹
修改脚本库文件include-leaflet.js的路径（\dist\leaflet）

所有的路径都改成 libs、dist开头
否则会报错：
ncaught TypeError: Cannot read property ‘tiledMapLayer’ of undefined at

引入脚本库

在工程文件夹中创建index.html文件
编写代码，应用脚本库文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地图加载</title>
  <script src="dist/leaflet/include-leaflet.js"></script>
</head>
<body>
  
</body>
</html>

添加承载地图控件的容器

添加div页面元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地图加载</title>
  <script src="dist/leaflet/include-leaflet.js"></script>
</head>
<body>
 <div id="map" style="width:1500px;height:700px;"></div>
</body>
</html>

显示二维地图

创建map对象，设置属性
设置指定的URL地址
将iServer图层添加到map中
https://leafletjs.com/reference-1.6.0.html#map-example
https://iclient.supermap.io/web/apis/leaflet.html

在浏览器中访问：

发布工程

将工程文件夹复制到【iServer安装目录】/webapps文件夹中
使用SuperMap iServer自带的Tomcap进行发布

结果浏览

使用浏览器输入页面访问地址：http://localhost:8090/gis_demo/index.html

bus_lupe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web应用开发之地图加载

实现一个小的Web GIS应用程序，该程序实现将China数据中一幅地图发布到网络上，并访问。地图服务准备创建工程，引入脚本库添加二维地图的装载容器浏览二维地图发布工程地图服务准备使用SuperMap iServer发布China地图服务引入脚本库创建工程文件夹从iClient目录中复制dist文件夹从web文件夹中复制libs文件夹修改脚本库文件include-leaflet.js的路径（\dist\leaflet）所有的路径都改成 libs、dist开头否则会报错：
复制链接

扫一扫