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 下载及安装使用的更多相关文章

  1. UE4新手引导之下载和安装虚幻4游戏引擎

    1) 进入虚幻4的官方主页(https://www.unrealengine.com/) 这里你可以获得关于虚幻4的最新资讯,包括版本更新.博客更新.新闻和商城等.自2015年起,该引擎已经提供免费下 ...

  2. git-2.10.2-64-bit介绍&&git下载&&git安装教程

    Git介绍 分布式:Git系统是一个分布式的系统,是用来保存工程源代码历史状态的命令行工具. 保存点:Git的保存点可以追踪源码中的文件, 并能得到某一个时间点上的整个工程项目的状态:可以在该保存点将 ...

  3. JDK下载、安装、配置环境变量笔记

    自己总是在下载.安装.配置JDK的环境变量,但是这些需要的专业知识并不难,但有很多细节很重要,总是记不住,而且这些细节一旦出错影响还是很严重的,在网上查到的信息很多都比较零散,而且讲解得也不是很详细, ...

  4. my SQL下载安装，环境配置，以及密码忘记的解决，以及navicat for mysql下载，安装，测试连接

    一.下载 在百度上搜索"mysql-5.6.24-winx64下载" 二.安装 选择安装路径,我的路径“C:\Soft\mysql-5.6.24-winx64” 三.环境配置 计算 ...

  5. 如何下载和安装CocoaPods

    朋友自己学习了一段时间就去公司实习了去了之后公司用的是CocoaPods,他一脸茫然的向我求助,我这才想起来写着一遍为了帮助更多的朋友 CocoaPods是什么? 当你开发iOS应用时,会经常使用到很 ...

  6. CocoaPods介绍。如何安装Ruby环境，如何下载和安装CocoaPods？

    CocoaPods介绍? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其 ...

  7. freeCAD下载与安装

    官方安装: freeCAD稳定版 freeCAD官方提供了几个稳定版本供开发者使用: Windows (XP, Vista and 7, 32 and 64bits), Mac OS X (Lion ...

  8. Android中下载、安装和卸载（原）

    应用场景:在检查版本更新的时候经常需要从服务器端下载然后安装到手机中 使用工具: XUtils,这个开源的框架真的是需要花大把时间去阅读和理解的,十分有用的,on the way ! fighting ...

  9. MySQL下载、安装及启动

    介绍 Mysql是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之 ...

  10. MongoDB的下载与安装

      MongoDB的下载与安装 一.简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系 ...

随机推荐

  1. MybatisPlus #{param}和${param}的用法详解

    作用 mybatis-plus接口mapper方法中的注解(如@Select)或者xml(如)传入的参数是通过#{param}或者${param}来获取值. 区别 1.解析方式: #{param}:会 ...

  2. OV5640数据的解码

    为了配合开发板的使用,笔者搞了一个OV5640的摄像头模组,OV5640具体的相关手册及资料网上已经很多,感兴趣的都可以自行去查找,基本大同小异.这里也不把OV5640初始化的代码贴出来,因为就是简单 ...

  3. NSQ(6)-nsq相关策略

    1:nsq的流量控制 RDY 消息中间件的实现无非两种套路,一种让客户端pull,典型的比如kafka便是如此,而另一种则是push,也就是让客户端不需要做任何操作,只需要做好conn便可以源源不断收 ...

  4. linux中大括号、小括号、中括号的区别和用法

    大括号 {  } 1.用于取多个变量 可以进行取变量和字符串拼接,假设:var='1234'       echo  ${var}abcd    输出为:1234abcd 2.正则表达式,用于大括号内 ...

  5. 查询最上活动的activity

    adb shell dumpsys window windows | grep mCurrent

  6. Jupyter Notebook安装代码提示功能

    默认Jupyter Notebook没有安装代码提示功能,但是我们可以可通过如下命令安装和配置使得Jupyter Notebook具备代码提供功能. (确保Anaconda在环境变量里)1.电脑上搜索 ...

  7. Open review Mitigating Propagation Failures in PINNs using Evolutionary Sampling

    与Mitigating Propagation failures in PINNs using Evolutionary Sampling - Orange0005 - 博客园 (cnblogs.co ...

  8. Echarts中国地图下钻

    //各省份的地图json文件 var provinces = { '上海': '/asset/get/s/data-1482909900836-H1BC_1WHg.json', '河北': '/ass ...

  9. uniapp 离开界面清除计时器

            onLoad() {             // APP启动引导图逻辑判断显示             if (uni.getStorageSync("startImgSt ...

  10. uni-app 下载文件 预览 + 保存自定义目录

    作为使用uni-app的小白来说  尝试了好几种方法 终于得到了我想要的效果(如下) 1.点击下载按钮(文件 或者图片)  2.预览 :用户自定义选择查看的软件(图片在手机相册 文件用其他打开预览) ...