运行第一个SuperMap iClient for OpenLayers示例程序-展示4326地图

本文主要是介绍运行第一个SuperMap iClient for OpenLayers示例程序-展示4326地图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一,官网下载开发包

下载地址 http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/web/download/download.html

SuperMap iClient for OpenLayers官网:http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/web/introduction/openlayersDevelop.html

二,运行

找到“01_tiledMapLayer4326.html”,双击打开即可

01_tiledMapLayer4326.html源码:此源码是刚刚下载的开发包里面的代码,未经任何修改

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title data-i18n="resources.title_tiledMapLayer4326"></title><script type="text/javascript" src="../js/include-web.js"></script><script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">var map, url = (window.isLocal ? window.server : "http://support.supermap.com.cn:8090")+"/iserver/services/map-world/rest/maps/World";map = new ol.Map({target: 'map',controls: ol.control.defaults({attributionOptions: {collapsed: false}}).extend([new ol.supermap.control.Logo()]),view: new ol.View({center: [0, 0],zoom: 2,projection: 'EPSG:4326'})});var layer = new ol.layer.Tile({source: new ol.source.TileSuperMapRest({url: url,wrapX: true}),projection: 'EPSG:4326'});map.addLayer(layer);map.addControl(new ol.supermap.control.ScaleLine());
</script>
</body>
</html>

经过测试,我发现除了使用上面这种方式引入js文件,还有几种引入.js文件的方式,如下:

1,使用本地地址

 <script type="text/javascript" src="D:/supermap_iclient_912/examples/js/include-web.js"></script><script type="text/javascript" src="D:/supermap_iclient_912/dist/openlayers/include-openlayers.js"></script>

 

2,使用站点地址

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" rel="stylesheet"><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script><script type="text/javascript" src="http://iclient.supermap.io/dist/openlayers/iclient9-openlayers.js"></script>

 但是注意,无论使用哪种地址(本地/站点),html文件都需要放在下面这个文件夹里面!!!运行时才会显示出地图:D:\supermap_iclient_912\examples\openlayers

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

 

 

这篇关于运行第一个SuperMap iClient for OpenLayers示例程序-展示4326地图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/378418

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

C++11作用域枚举(Scoped Enums)的实现示例

《C++11作用域枚举(ScopedEnums)的实现示例》枚举类型是一种非常实用的工具,C++11标准引入了作用域枚举,也称为强类型枚举,本文主要介绍了C++11作用域枚举(ScopedEnums... 目录一、引言二、传统枚举类型的局限性2.1 命名空间污染2.2 整型提升问题2.3 类型转换问题三、C

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

C++ 检测文件大小和文件传输的方法示例详解

《C++检测文件大小和文件传输的方法示例详解》文章介绍了在C/C++中获取文件大小的三种方法,推荐使用stat()函数,并详细说明了如何设计一次性发送压缩包的结构体及传输流程,包含CRC校验和自动解... 目录检测文件的大小✅ 方法一:使用 stat() 函数(推荐)✅ 用法示例:✅ 方法二:使用 fsee