在angular2里引入openlayers

最新推荐文章于 2024-09-10 09:19:20 发布
最新推荐文章于 2024-09-10 09:19:20 发布
阅读量790 收藏 2
点赞数 1
分类专栏： angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45158253/article/details/108146695
版权
本文介绍了如何在Angular2项目中引入并使用OpenLayers。首先，详细讲述了下载和引入OpenLayers的步骤，包括在`angular.json`配置文件中添加地图样式以及在组件中引入相关模块。接着，展示了在HTML页面和TS逻辑中使用OpenLayers的基本过程，强调了获取DOM节点和处理projection的注意事项。最后，提供了作者实际项目中的引入示例，帮助读者快速理解和应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原始效果：
在这里插入图片描述

1、下载

// 我用的是6.4.0的版本，这是指定版本下载
npm install --save ol@6.4.0

cnpm i --save-dev @types/ol

检查：确认下载成功
在这里插入图片描述

2、引入

2.1、在angular.json里引入地图样式

把npm下载的ol文件夹里的ol.css单独拿出来放assets里，并引入

  "styles": [
        "src/styles.less",
        "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/assets/ol.css"
      ],

2.2、在要使用的组件里引入：

import { Map, View } from
最低0.47元/天 解锁文章
angular使用openlayers6以及加载百度地图
moqiuqin的博客
09-30 1292
angular中使用openlayers本来是没什么难度的，但是如果要加载百度地图还是有些问题的，在openlayers3中坐标是从原点右上递增，而openlayers6中是右下递增，这就导致使用百度地图作为底图时出现图层错乱的问题，同时还有偏移问题，相关的问题和解答网上的资料真的少，对于不是gis专业出身的人来说真的能搞死人，此外还有openlayers那文档，不是英文的原因，是真的难以看懂。 首先是安装，要注意的还是版本问题，openlayers6和之前版本的安装命令不一样。 两种不同的安装命令意味着有
SuperMap iObjects二次开发_HelloWorld
weixin_43413889的博客
04-14 1364
    创建一个工作目录C:\Myproject 在【SuperMap iObject .NET 安装目录】\sample data\world 中找到数据文件 World.smwu、World.udd、World.udb 启动Visual Studio 2017，然后创建新工程（文件 > 新建… > 项目） 在已创建好的工作目录Myproject下创建一个新工程，在项目类型中选择Visual C#，在模板中选择Windows窗体应用程序，设置该工程名称为
angularjs与openlayers3自定义控件
01-16
实现对angularjs 与openlayer3自定义控件，对于地图服务。
angular对接openlayers
连小雪的代码世界
12-02 1615
angular对接openlayers地图选型相关版本号及说明地图相关基础大地测量学 (Geodesy)大地水准面 (geoid)参考椭球体（Reference ellipsoid）坐标系（coordinate system）地理坐标系（Geographic coordinate system）投影坐标系（Projected coordinate systems）web map 开发EPSG:4326 (WGS84)EPSG:3857 (Pseudo-Mercator)openlayers基础概念地图（ol
ionic（angular）调用openlayers
shendygis的专栏
10-24 981
新建了ionic项目，需要调用openlayers作为地图服务，由于openlayers没有@types（网上有，但不与openlayers最新版匹配），因此，写代码的时候没有智能提示，只能查看帮助写。 本文通过npm方式实现ionic或者angular加载openlayers。 1、安装ol模块 npm install ol 2、新建jsconfig.json(这一步貌似不需要也可以，但...
angular中使用openlayer画运动轨迹从初始化开始
就zhei?
01-08 455
angular中使用openlayer画运动轨迹从初始化开始 初始化地图 mapBasicLayerSource = new OSM({ warpX: true });//加载街道地图 // 初始化地图 initMap() { const view = new View({ center: [103.45821753021454, 30.189667400269403], zoom: this.zoomLevel, projection: 'EPSG:4326
Angular OpenLayers指令指南
最新发布
gitblog_00352的博客
09-10 419
Angular OpenLayers指令指南 angular-openlayers-directiveAngularJS directive to embed an interact with maps managed by the OpenLayers library项目地址:https://gitcode.com/gh_mirrors/an/angular-openlayers-direct...
在Angular项目中使用OpenLayers实现地图路径规划
# 1. 简介 ## 1.1 介绍Angular框架及其在Web开发中的应用 Angular是一种流行的前端JavaScript框架，由Google开发和维护。它通过一套完整的工具集，帮助开发者构建现代化、高效...## 1.2 介绍OpenLayers库以及其在地图
在angular中使用openlayers
07-11
2. 在你的Angular项目中引入OpenLayers库：在你的Angular项目中的`angular.json`文件中，找到`scripts`节点，并添加OpenLayers的引用。例如： ``` "scripts": [ "node_modules/ol/ol.js" ] ``` 3. 创建地图组件：...
结合了OpenLayers和AngularJS的库-JavaScript开发
05-26
ngeo ngeo是一个JS库，旨在简化基于AngularJS和OpenLayers的应用程序的开发。 更具体地说，ngeo是可用于开发应用程序的AngularJS组件和服务的集合。ngeo是旨在简化基于AngularJS和OpenLayers的应用程序开发的JS库。 ...
ngx-openlayers:适用于Openlayers 4.x的Angular2 +组件
05-04
ngx-openlayers 安装 要安装此库，请运行： npm install ngx-openlayers --save 例子 这是一个“最小”地图示例，该示例从OpenStreetMap获取图块并将地图居中于Meylan（法国）： 在app.module.ts ： ... import { AngularOpenlayersModule } from "ngx-openlayers" ; ... @ NgModule ( { imports : [ ... AngularOpenlayersModule ] , ... bootstrap : [ AppComponent ] } ) export class AppModule { } 在app.component.html ： < aol-map [width] =" '500px' "
ng-openstreetmap-demo:在Angular 6中显示OpenStreetMap
05-02
NgOsmDemo 该项目是使用版本6.0.0生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题
weixin_30954265的博客
12-18 226
var map, toolip, overlay; var layer = new ol.layer.Vector(); var imgLayer = new ol.layer.Image(); var center = ol.proj.transform([116.46, 39.92], 'EPSG:4...
angular 配合 layer的注意事项！（icon设置项：各个数字代表的图标样式）
web前端开发
09-14 7703
1、自己本地用layer建设项目的时候，是不需要在html中引入layer.css!       但是angular配合require时需要在页面引入layer.css，不然弹层效果出不来 rel="stylesheet" href="../lib/layer/skin/layer.css" /> 2、layer可以开发者自己设置图标、显示时间等，（当然：也可以自定义图片
OpenLayer4实现自定义标注
xsfqh的专栏
04-10 1335
前言：OL可以让我们实现自定义的标注样式，用过CAD的同学应该都知道CAD中有上下文字中间用横线隔开的样式，这样标注让人一目了然的了解信息。给人以直观的的信息表达，本文实现就是分式的标注。 先来张图： 一、关于ol.style.Icon类 该类中有一个img参数，该参数非常好用，该参数的输入类型为Image | HTMLCanvasElement，第二个类型就是canvas标签，作为一个...
优化Angular应用的性能
02-15 393
优化Angular应用的性能 MVVM框架的性能，其实就取决于几个因素： 监控的个数 数据变更检测与绑定的方式 索引的性能 数据的大小 数据的结构 我们要优化Angular项目的性能，也需要从这几个方面入手。 1. 减少监控值的个数 监控值的个数怎么减少呢？ 考虑极端情...
1.typescirpt学习之路，*.d.ts和@types关系理解
zjscy666的博客
08-18 7952
    今天看了看ts，文档上很多没用讲，小编疑惑了很久一个问题！      *.d.ts和@types啥关系，小编查阅了很多文档，才弄明白。       首先，@types是npm的一个分支，我们把npm包发上去，npm包就会托管到服务器，供大家下载！但是ts为了代码的可复用性，要申明一些静态类型文件，那些文件就是*.d.ts，这些静态类型文件我们可以当成类似jq中的三方库，三方库的作用是为...
Vue + Openlayers 基本使用----加载天地图影像
A____t的博客
05-04 2098
前面学习了一些 Vue 的基本使用，接下来结合 Openlayers 进行 WebGIS 开发的相关内容学习！ 使用 Vue CLI 3 创建项目： vue create vue-openlayers 安装 Openlayers 框架 npm i -S ol 创建组件：Map.vue <template> <div id="map"> </div> </template> <script> //导入相关配置信息 impo
openlayers5加载天地图
sinat_25006091的博客
06-20 6552
<!DOCTYPE html> <html> <head> <title>WMTS</title> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> <!-- The line ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值