小编Fun*_*bby的帖子

我需要将 GeoJSON 矢量数据从 EPSG:4326 转换为 EPSG:3857 ...

我有地图...

var olMapDiv = document.getElementById('olmap');
            control.map = new ol.Map({
                target: olMapDiv,
                renderer: 'canvas',
                layers: layers,
                interactions: ol.interaction.defaults({
                    altShiftDragRotate: false,
                    dragPan: false,
                    rotate: false
                }).extend([new ol.interaction.DragPan({ kinetic: null })]),
                pixelRatio: 1,
                loadTilesWhileAnimating: true,
                loadTilesWhileInteracting: true,
                view: view
            });

和景色……

var view = new ol.View({
                // make sure the view doesn't go beyond the 22 zoom levels of Google Maps
                maxZoom: 21,
                projection: 'EPSG:3857',
                center: [0, 0],
                zoom: 0
            });

我定义了我的 geoJson 对象...

var geoJsonObj …

我正在尝试升级到 OpenLayers v5.2.0，但我看不到有一条清晰的路径可以将圆绘制为多边形（我需要它，以便我可以将其存储在我们的数据库中）

这就是我正在做的...

if (webMapValues.activeDrawControl == "Circle") {
    var wgs84Sphere = new ol.Sphere(6378138);
    webMapValues.drawObj = new ol.interaction.Draw({
        features: webMapValues.features,
        type: /** @type {ol.geom.GeometryType} */ (webMapValues.drawType),
        geometryFunction: function (coordinates, geometry) {
            if (!geometry) {
                geometry = new ol.geom.Polygon(null);
            }
            var center = coordinates[0];
            var last = coordinates[1];
            var dx = center[0] - last[0];
            var dy = center[1] - last[1];
            var radius = Math.sqrt(dx * dx + dy * dy);
            var circle = ol.geom.Polygon.circular(wgs84Sphere, ol.proj.toLonLat(center), radius);
            circle.transform('EPSG:4326', 'EPSG:3857');
            geometry.setCoordinates(circle.getCoordinates());
            return geometry; …

我正在使用 AGM（Angular Google Maps）和 OpenLayers。

我需要以编程方式设置我的 AGM 的缩放，但一直无法弄清楚它是如何工作的。

HTML 地图...

<div id="mapWrap" class="mapWrap" style="padding: 0px; width: 100%; height: 
100%; text-align: left">

  <agm-map  
    [latitude]="lat" 
    [longitude]="lng"
    [zoom]="currZoom" 
    [mapTypeId]="mapType" 
    [mapTypeControl]="mapControls" 
    [zoomControl]="mapControls" 
    [streetViewControl]="mapControls" 
  ></agm-map>

  <div id="map" class="map" style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: absolute; opacity: 0.5"></div>
</div>

组件代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';
import { GoogleMap } from '@agm/core/services/google-maps-types';

import olMap from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import OSM …

我正在尝试将组件动态添加到我的 @Component 模板中，这些组件正在填充，但是当我更改“buttonstring”变量时工具栏不会更改。

我有一个组件..

@Component({
selector: 'map-toolbar-action',
template:'<p style="position: absolute;z- 
index:5000">' + mapValues.buttonString + 
'</p>',
styleUrls: ['./map-toolbar- 
action.component.scss']
})
export class MapToolbarActionComponent 
implements OnInit {

constructor() {
mapValues.buttonString = 
mapValues.arrayToString(mapValues.buttons);
}

ngOnInit() {
}

}

我有一个带有这些元素的单身人士......

public static buttonString = "<component1></component1><component2></component2><component3></component3>";

我希望我可以更改 buttonString 以添加、减去或完全替换组件列表，并且工具栏会更新。

buttonString = "<component2></component2><component3></component3>";
buttonString = "<component1></component1><component2></component2><component3></component3><component4></component4>";
buttonString = "<componentA></componentA><componentB></componentB><componentC></componentC>;

这会反过来将组件更新到模板，但它不是那样工作的......我该如何完成？

任何帮助是极大的赞赏！！

我有一个 Angular 7 组件库，我正在尝试为按钮等添加一些图像。

我的项目结构是这样的

projects
 components
   src
     lib
       myComponent
         assets
            images
               image.png 

我试图在其中使用图像的组件与“assests”文件夹处于同一级别。

例如我添加了这个按钮

<p>
<button (click)="activateSelect()"><i 
src="../../assets/images/tempImage.png"></i></button>  
</p>

...但是当我在 Chrome 中构建和使用开发工具来查看按钮时，图像的路径是 http://localhost/assets/images/tempImage.png

似乎路由不能正常工作？

我试过相对路径，“./”，只是把路径放进去，没有任何作用。这似乎比它应该的更难，所以我确定我不了解它是如何工作的。

任何帮助是极大的赞赏。

更新 我从来没有让图像在按钮上工作，但我用“img”标签替换了“button”标签并让它像这样工作......

<img style="background-color: aliceblue;width:35px;height:35px" 
(click)="activateSelect()" src="assets/tempSelect.png">

更新 2 如果您想要应用程序的“assets”文件夹中的图像，则上述方法有效。我正在构建一个组件库，我需要我的资产随身携带……有没有办法在组件库中创建一个包含资产的文件夹，您可以使用组件库构建和公开？

更新 3 为了让您的图像进入您的组件库，以便所有内容都是自包含的，您需要使用一个工具来对图像进行 base 64 编码。我使用了https://base64.guru/converter/encode/image 一旦在工具中选择您的图像，然后选择“输出格式”我使用“数据 URI -- data:content/type;base64”然后单击“编码image to base 64" button 这将输出一个这样的字符串

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAABTElEQVRIie2WwY2DMBBFX1YpICVQQkpwCSmBk + dKCSmB69wogRIowSW4BDpgDx4kFIEwISG7Ur7kAxqL5 + / 5BP + GYeAT + vkI9Qv + s2ARqQ8Hi4gDylfBtzgugBpwIlIeDQ6AA + 4icj0K7ICgqj1QAo2IXI4AF6oaAVS1AxobbwfH6YOq1kAvIve3gS3RcaZUATervx4MXOfAD / 0u3gEugG6uoKqB5LzdErZdjifwFmhJ5zxPwzCsDu99zJzXee / LnLnntYXZ9i26FZHG6sEc1yISrAWLWgWTtjlMFlEDlQUL0oelsnmFLaIihW43ONqRaYDeYK3VO6BX1XvGuzaDLyQHN5KrR7BjIfVLykl1gbm0vo2gUY / PecpJ4Ex6g / F + sjX103F65nprl4FIaoGzXXHjTyRHOT2eU0NKbgeUW4CjnnL8Cv2PW + …

我有一个组成部分

     <p style="padding: 5px">

      <select [(ngModel)]='thisDD' name="nameDD" id="idDD" (ngModelChange)="updateDD(thisDD)" class="form-control">
        <option *ngFor="let thing of thingies" [value]="thing.thingID">{{thing.ThingName}} ({{thing.ThingCode}})</option>
      </select>  

     </p>

里面有一个@OutPut

 @Output() selectedValue = new EventEmitter<object>();

我在我的应用程序中使用它

<my-dropdown (selectedValue)="setValue($event)"></my-dropdown> 

哪个将组件中的代码调用为“ setValue”

setValue(event){
this.currValue=event;
}

当下拉列表的值更改时，这一切都很好，但是我有其他组件依赖于在加载应用程序时设置的值。

有没有办法通过@Output获取我默认组件的值？或您将如何实现？

在Openlayers中,可以根据缩放级别打开或关闭某些功能.尽管查看了文档,我还没有在OpenLayers 3中找到相同的功能.有谁知道如何做到这一点？这是我放在地图上的功能ol.style.Text,只有在用户放大到特定缩放级别后才能显示.

var geoJsonObj = {
  'type': 'Feature',
  'geometry': JSON.parse(response.FieldList[key].Shape)
}
var vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj)
});
Fields[Field.FieldID] = new ol.layer.Vector({
  projection: 'EPSG:4269',
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
    }),
    text: new ol.style.Text({
      textAlign: 'Center',
      text: response.FieldList[key].Acres,
      scale: 1
    })
  })
});

我有一张地图，上面有一些功能，当我缩放到这些功能时，用户可以设置缩放缓冲区的首选项。

我不确定 OL 中是否有内置的方法来执行此操作...我查看了文档，但看不到任何内容...不确定我是否错过了它？

zoomToSelectedFeatures() {
view.extent = MapOverlay.getSource().getExtent();
map.getView().fit(view.extent, MapValues.map.getSize());
}

想知道是否有一种方法可以插入一个数字（例如 20%），从而使变焦放大 20%？

我在 Angular 7 中创建了一个组件库，它将被移植到其他应用程序，并且这些应用程序将能够使用这些组件。

我遇到了一个问题，其中角度库安装在组件库中，但没有与组件库捆绑在一起以供在另一个应用程序中使用，并且我最终遇到了这样的错误......

Module not found: Error: Can't resolve '@angular/material' in
 'C:\Source\MappingServices\GIT\repos\SomeFolderStructure\node_mo
dules\@myComp\components\fesm5'


ERROR in ./node_modules/@myComp/components/fesm5/components.js

我如何捆绑这样的库，以便它们与组件库一起使用，无需额外安装？

更新 Package.json 文件

{
"name": "@myComp/components",
"version": "0.0.1",
"whitelistedNonPeerDependencies": [
"agm","material", "ol"
],
"dependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"@agm/core": "^1.0.0-beta.5",
"ol": "^5.3.1"
},
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"@agm/core": "^1.0.0-beta.5",
"ol": "^5.3.1"
},
"publishConfig": {
"registry": "http://someTFSdirectory"
}
}