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. vue项目打包后，自由修改配置如接口地址等

    背景描述: 项目打包后,如果想更换接口域名或者项目名称,就需要再次打包.但是这样子操作有点耗费时间.如果把这些配置写到一个文件中,然后在index.html文件中引入使用,这样子会大大提高工资效率,节 ...

  2. 4.git的指令应用

    1.stash 应用:   应用场景:在当前分支开发代码,开发到一半,代码没有提交,你想在当前分支的基础上切换到别的分支:或者创建新的分支,所以需要把当前开发的内容进行藏匿起来. 1.1藏匿指令:   ...

  3. python36

    无限循环 如果条件判断语句永远为 true,循环将会无限的执行下去,如下实例: 实例 #!/usr/bin/python # -*- coding: UTF-8 -*- var = 1 while v ...

  4. Java高级助教工作总结

    一.助教工作的具体职责和任务 1.帮助老师在云班课上发布作业 2.解答同学们的问题 3.批改同学们的作业,并了解同学们的学习情况 4.在qq群中发布通知,收集同学们的一些意见 二.助教工作的每周时长和 ...

  5. js中的this的指向问题

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调 ...

  6. Django-django-celery的配置

    1.安装django-celery   pip install django-celery 2.添加配置 demos/demos/settings.py(我的项目名为demos,这里只是示范,切勿搞混 ...

  7. [Oracle19C 数据库管理] 用户与权限管理

    用户管理 用户具有以下属性: 用户名: 不能超过30位.不能包含特殊字符.必须用字符开头.用户名不区分大小写. 认证方式: 最常见的是密码认证. 默认永久表空间: 控制用户可以在哪个表空间里创建对象. ...

  8. 蓝桥杯训练赛二-问题 A

    题目描述 用简单素数筛选法求N以内的素数. 输入 N 输出 2-N的素数 样例输入 100 样例输出 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 ...

  9. tvm中使用了xgboost库中的_fmt_metric

    _fmt_metric这个xgboost的回调函数已经被遗弃了. 为了能跑起来tvm,可以pip install xgboost==1.5.0

  10. 分治-1-归并排序（Divide and Conquer-1-merge sort）

    #include <stdio.h> #define INFINITY 999999 #define LEN(A) ((sizeof (A)) / (sizeof A[0])) void ...