小编kbo*_*oul的帖子

我有一张用 leaflet.js 制作的地图，其中包含由 70 个多边形组成的 geoJSON 层。每次用户单击多边形时，它都会突出显示，并且侧面板会填充数据并打开：

function clickFeature(e) {
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
}

效果很好。但我需要更改它，以便每次单击多边形时，它都会同时突出显示，并且先前单击的多边形返回到原始样式，因此一次只能“选择”一个多边形。

我已经尝试过这个，但它不起作用（面板不再更新或打开）：

var lastClickedLayer;
function clickFeature(e) {
    geojson.resetStyle(lastClickedLayer);
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
    layer = lastClickedLayer;
}

非常感谢任何帮助。

我想用Angular JS建立Web API令牌认证作为客户端.我对Web API中的令牌认证概念非常陌生.

我不想使用ASP.NET Identity默认表来添加或验证用户.我有自己的数据库和一个名为"EmployeeAccess"的表,其中包含EmployeeNumber作为用户ID和密码.我想根据此表中的值对用户进行身份验证,然后要授予令牌,以便他们获得后续调用的授权.我已经使用了所有必需的OWIN和ASP.NET引用来实现结果.这是我的不同组件的代码: -

Global.asax中

public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
           // AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);

        }

        protected void Application_BeginRequest()
        {
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                // Cache the options request.
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", HttpContext.Current.Request.Headers["Origin"]);
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT, DELETE, POST, OPTIONS");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }
    }

WebApiConfig.cs

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {            
            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id …

我知道LatLng，但我想检索类似于以下链接的库的地址：https://github.com/perliedman/leaflet-control-geocoder，但我不知道如何使用这个库进行react-leaflet 2.1.2.

我正在尝试访问传单弹出窗口中的内容。具体来说，我添加了一个带有我想要访问的按钮的表单。但现在我只是尝试向弹出窗口本身添加一个事件。

$(".leaflet-popup-content-wrapper .leaflet-popup-content").click(function(e) {
  alert("clicked");
});

LeafletJs带有弹出窗口的标记示例：

<form class="popup-form">
  <div class="form-group">
    <label class="mb-0" for="comment">Comment:</label>
    <textarea class="form-control" rows="4" class="comment">${feature.properties.note}</textarea>
  </div>
  <div class="d-flex">
    <button type="submit" class="btn btn-outline-info btn-sm">Save</button>
    <button class="delete-button btn btn-outline-danger btn-sm ml-auto">Delete</button>
  </div>
</form>

设置弹出内容的代码

var points = new L.geoJson(null, {

  onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.note);

    let myPopup = L.DomUtil.create('div', 'content');

    content = `
    <form class="popup-form">  
      <div class="form-group">
        <label class="mb-0" for="comment">Comment:</label>
        <textarea class="form-control" rows="4" class="comment">${feature.properties.id}</textarea>
      </div>
      <div class="d-flex">  
        <button type="submit" class="btn btn-outline-info btn-sm">Save</button>
        <button class="delete-button btn btn-outline-danger btn-sm …

我在 Angular 5 中有一个项目，我正在尝试使用 Google gapi.auth2 库实现登录。我被这个错误困住了：

ERROR in ./src/app/signin.service.ts
Module not found: Error: Can't resolve 'gapi.auth2' in 'C:\Users\Javier\workspace\angular-tour-of-heroes\src\app'

该错误似乎与我在服务中导入库的方式有关。
我的实现包括"@types/gapi.auth2": "0.0.47",通过添加到 package.json 文件npm install --save @types/gapi.auth2。添加import gapi.auth2到signin.service.ts，这是我试图从中调用gapi的Angular服务。

包.json

{
 "name": "angular-tour-of-heroes",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/cdk": "^5.2.1",
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": …

我想实现bingmap在角6使用“角图” NPM包，我已经请参考也被称为 问题陈述：在node_modules没有创建“bingmaps”文件夹

app.module.ts

/// <reference path="node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MapModule, MapAPILoader, BingMapAPILoaderConfig, BingMapAPILoader, WindowRef, DocumentRef, MapServiceFactory, BingMapServiceFactory } from "angular-maps";
import { AppComponent } from './app.component';

错误：

./node_modules/angular-maps/fesm5/angular-maps.js 中的错误模块未找到：错误：无法解析 'D:\bingmap\bingmap\node_modules\angular-maps\fesm5' 中的 'bingmaps' i ?wdm ?: 编译失败。src/app/app.module.ts(1,23) 中的错误：错误 TS6053：文件 'D:/bingmap/bingmap/src/app/node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts ' 未找到。

也安装了 npm install --save @types/bingmaps

在以下链接中，有在线演示案例展示了如何使用 esri-leaflet-geosearch 插件，https: //codepen.io/exomark/pen/dafBD

var searchControl = new L.esri.Controls.Geosearch().addTo(map);

var results = new L.LayerGroup().addTo(map);

searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
});

这个在线演示可以很好地支持地理搜索功能。

在我的 React 应用程序中，我还计划添加诸如用于传单的搜索框。但无法弄清楚如何做到这一点。

由于esri-leaflet-geosearch取决于esri-leaflet，所以安装了两个 npm 包，但找不到下一步。所以有什么帮助吗？

我试图在地图上方放置一个 div ，以放置一些操作，例如过滤器和其他内容，但该 div 仅在我移动地图时出现，并且它位于地图后面。

组件CSS：

.map {
    padding: 0;
    position:relative;
    width:100% ;
    height: 100%;
}

.mapContainer{
        width: 100vw;
        height: 92.6vh; /* Fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 92.6);
        padding: 0 ;
}

.overlay {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(255, 50, 50, 0.5);
}

组件 html ：

<div class="container-fluid" >
    <div class="row">
        <div class="col-sm-2">
            <div *ngIf="city">
                <p>{{city.name}}  </p>
            </div>
        </div>
    <div class="col-sm-10 mapContainer" >
        <div …

是否可以设置react-leaflet.js.org附带的弹出窗口的样式？我一直在修改样式，但是您可以获得弹出窗口的 ui 模板/或者完全改变弹出窗口外观的正确方法是什么？

代码片段

<Marker
    key={message._id}
    position={[message.latitude, message.longitude]}
    icon="">

      <Popup className="request-popup">
        <p>...</p>
        <p>...</p>
    </Popup> 
</Marker>

我想将弹出窗口设计为如下所示

谢谢，

我正在尝试在角度传单中添加一个 divicon 标记。

组件.css：

.leaflet-div-icon2
{
    background: #e5001a;
    border:5px solid rgba(255,255,255,0.5);
    color:blue;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
    line-height:30px;
}

组件.ts：

var map = L.map('map', {
        attributionControl: false,
        crs: L.CRS.Simple
});

var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('cust_image.png', bounds).addTo(map);
var customMarkerIcon = L.divIcon({className: 'leaflet-div-icon2'});

var m3 = L.latLng([ 348,278.2]);
L.marker(m3, {icon: customMarkerIcon }).addTo(map);

我在控制台中没有收到任何错误，但无法查看地图上的标记。

它适用于带 css 和 js 的基本 html 页面，但不适用于 angular。

我在这里错过了什么吗？