openlayers-1 下载及安装使用
javascript - Import from in Openlayers - Geographic Information Systems Stack Exchange
在浏览器中运行开放层示例
提供的示例无法在客户端（在浏览器上）运行。让我们看一个例子。
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenStreepMap layer using OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
</body>
</html>
索引.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
要在浏览器上运行这个非常简单的示例，您必须进行手动更改。
修改的文件
这些是相同的文件，具有在客户端上运行所需的更改：
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenStreepMap layer using OpenLayers</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
</body>
</html>
索引.js
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 0
})
});openlayers-1 下载及安装使用的更多相关文章
- UE4新手引导之下载和安装虚幻4游戏引擎
1) 进入虚幻4的官方主页(https://www.unrealengine.com/) 这里你可以获得关于虚幻4的最新资讯,包括版本更新.博客更新.新闻和商城等.自2015年起,该引擎已经提供免费下 ...
- git-2.10.2-64-bit介绍&&git下载&&git安装教程
Git介绍 分布式:Git系统是一个分布式的系统,是用来保存工程源代码历史状态的命令行工具. 保存点:Git的保存点可以追踪源码中的文件, 并能得到某一个时间点上的整个工程项目的状态:可以在该保存点将 ...
- JDK下载、安装、配置环境变量笔记
自己总是在下载.安装.配置JDK的环境变量,但是这些需要的专业知识并不难,但有很多细节很重要,总是记不住,而且这些细节一旦出错影响还是很严重的,在网上查到的信息很多都比较零散,而且讲解得也不是很详细, ...
- my SQL下载安装，环境配置，以及密码忘记的解决，以及navicat for mysql下载，安装，测试连接
一.下载 在百度上搜索"mysql-5.6.24-winx64下载" 二.安装 选择安装路径,我的路径“C:\Soft\mysql-5.6.24-winx64” 三.环境配置 计算 ...
- 如何下载和安装CocoaPods
朋友自己学习了一段时间就去公司实习了去了之后公司用的是CocoaPods,他一脸茫然的向我求助,我这才想起来写着一遍为了帮助更多的朋友 CocoaPods是什么? 当你开发iOS应用时,会经常使用到很 ...
- CocoaPods介绍。如何安装Ruby环境，如何下载和安装CocoaPods？
CocoaPods介绍? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其 ...
- freeCAD下载与安装
官方安装: freeCAD稳定版 freeCAD官方提供了几个稳定版本供开发者使用: Windows (XP, Vista and 7, 32 and 64bits), Mac OS X (Lion ...
- Android中下载、安装和卸载（原）
应用场景:在检查版本更新的时候经常需要从服务器端下载然后安装到手机中 使用工具: XUtils,这个开源的框架真的是需要花大把时间去阅读和理解的,十分有用的,on the way ! fighting ...
- MySQL下载、安装及启动
介绍 Mysql是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之 ...
- MongoDB的下载与安装
MongoDB的下载与安装 一.简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系 ...
随机推荐
- 【运维】解决composer update出现的Discard changes [y,n,v,d,s,?]的问题
在PHP项目中,composer是一个使用非常普遍的包管理工具,在本地开发的时候出现了这个问题一搬来说问题不大,可以人为进行输入交互,但是如果是自动化发布中出现,就会等待输入导致卡住,是一个需要解决的 ...
- 小程序嵌套h5webview.特定时间跳转小程序页面.调起e证通的人脸核身.成功了返回webview.
e证通链接. https://cloud.tencent.com/document/product/1007/56643#3.2-.E5.AE.89.E8.A3.85-sdk
- 【Anaconda】为右键菜单添加“当前位置开启Anaconda Prompt”
Stack Overflow 上查找到该解决方法:『Adding "Open Anaconda Prompt here" to context menu (Windows) - S ...
- Android studio java文件显示j爆红
今天在android studio打开一个原来的工程,此工程是很久以前使用eclipse创建的,在android studio下有些问题需要解决. 1.设置project的jdk, 2.设置modul ...
- python pip的使用
1.导出安装包 pip freeze > requirements.txt 2.安装requirements.txt文件中指定的扩展库:pip install -r requirement.tx ...
- 多线程事务回滚sqlSession, spring-mybatis 开启事务
@Resource SqlContext sqlContext; /** * 多线程事务. * @param employeeDOList */ @Override public void saveT ...
- nginx的301与302跳转详细配置教程
什么是301跳转 301跳转也叫301重定向,也叫301转向,也叫301永久重定向,是网站建设过程中的一个功能.一般用于2个域名指向同一个网站. 一般来说,利用跳转,对网站的排名不会有影响.但不会转移 ...
- Linux 远程数据同步工具详解
一.简介 1 认识 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的"Rsync算法"来 ...
- el-input 限制输入框只能输入数字和小数
方法一: oninput ="value=value.replace(/[^\d]/g,'')" //只能输入数字 oninput ="value=value.repla ...
- 【ESP32学习】CMake学习
在之前的博客中提到,ESP-IDF采用的是CMake来构建项目,因此需要学习一下CMake,以对ESP32的开发有更好的把握 参考: Windows下CMake安装教程 从零开始详细介绍CMake C ...