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. ubuntu 删除容器内没用的包

    删除多余 apt 包 这些就是依赖的所有动态链接库,接着我们将这些包用 apt-mark 声明为"手工安装的包",即可阻止 apt purge 的自动卸载. 然后,我们再自动卸载其 ...

  2. 使用ADB拷贝Android设备的文件夹

    在当前目录下执行,拷贝到当前目录.   拷贝照片 adb pull sdcard/DCIM   删除照片 adb shell rm -rvf sdcard/DCIM   拷贝图片 adb pull s ...

  3. C++ primer 5th 第二章 变量和基本类型 阅读笔记

    第二章 变量和基本类型 第一节 基本内置类型 C++标准规定了算术类型尺寸的最小值,同时允许编译器赋予这些类型更大的尺寸. 比如: 类型 含义 最小尺寸 bool 布尔类型 未定义 wchar_t 宽 ...

  4. 技嘉b75m-d3v在nvme固态安装win7并且oem激活的实现过程

    本篇文章主要讲述了实现台式机主板oem激活win7以及旧平台主板使用nvme固态安装win7的过程 事情的起因是我去年在小黄鱼买了台戴尔n4110,今年买了台惠普银河舰队2代,并且把里面128GB的n ...

  5. py14模块简介

    """什么是模块 模块:就是一系列功能的结合体 模块的三种来源: 1.内置的(python解释器自带) 2.第三方的(别人写的) 3.自定义的(你自己写的) 模块的四种表 ...

  6. EBS 常用sql

    1)查看请求挂在哪个状态下 SELECT fcpv.concurrent_program_name FROM fnd_request_groups frg, --请求组 fnd_request_gro ...

  7. WINDOWS 下 Visual Studio Code + Odoo12 错误解决方法

    1. error: Microsoft Visual C++ 14.0 is required. Get it with "Build Tools for Visual Studio&quo ...

  8. 解决Maven下载依赖慢的问题

    参考:https://blog.csdn.net/web15085599741/article/details/126459039 <repositories> <repositor ...

  9. 阻止form表单默认跳转

    form表单提交后,会默认跳转

  10. sqlalchemy 数据类型