标签: geojson

如何更新Leaflet弹出窗口中的内容?

我正在使用Wlet with Leaflet.我正在建立一张美国地图,使用传单的L.GeoJSON用GeoJSON绘制州界.

我可以在地图加载期间设置所有内容,但是我需要能够在绘制地图后调整弹出窗口中的内容.这是我正在做的精简版:

var gjStates = new L.GeoJSON(null, null);
wax.tilejson(url, function(tilejson) {  
    map = new L.Map('map').addLayer(new wax.leaf.connector(tilejson)).addLayer(gjStates);

    gjStates.on("featureparse", function (e) {
        if (e.properties && e.properties.name){
            pops[e.id.substring(4)] = e.layer.bindPopup('<h4>Hello ' + e.properties.name + '!</h4>');
        }
    });
    for (s in usStateData) {
        gjStates.addGeoJSON(usStateData[s]);
    }
});
Run Code Online (Sandbox Code Playgroud)

现在,一切都很好,弹出窗口很好,但后来我想改变它,没有办法引用它.我在源代码中看到bindPopup()返回'this',我认为它是L.Popup对象,但结果是其他东西.因此,例如,以下代码将使用活动弹出窗口,而不是特定的L.Path对象(状态)我想要获取的特定窗口.

pops['AK']._map._popup.setContent('I am ALASKA!');
Run Code Online (Sandbox Code Playgroud)

使用firebug挖掘DOM,我还可以看到弹出内容是在内部变量中设置的,我可以更新它.但是,更新这个并不会更新HTML,而且我无法找出阿拉斯加有52的密钥._layers [52]也没有我希望的setContent()方法,如果它是一个L .Popup对象.

gjStates._layers[52]._popupContent = 'I am ALASKA!';
Run Code Online (Sandbox Code Playgroud)

所以,我有点卡住而没找到我需要的东西.在初始渲染后,我有什么方法可以引用并更新地图上特定弹出窗口的内容吗?

javascript maps geojson leaflet

6
推荐指数
1
解决办法
7739
查看次数

使用geoJson数据在传单弹出窗口中创建图形

我正在使用传单的地图上工作,并使用GeoJson格式的文件中的数据填充.我的首要目标是将图表放入地图上每个标记的小册子弹出窗口中.

获取每个功能的标记并使弹出窗口打开非常容易.但是,我发现很难使用D3添加到弹出窗口.

为了简单起见,我目前的目标是使用D3在每个leaflet popup div中创建一个svg并绘制一个正方形.

我找到了一些例子,其中人们使用D3在传单弹出窗口中创建图形,但是它们都没有使用geoJson和onEachFeature函数.这是其中一个例子:http://jsfiddle.net/6UJQ4/

这是我的代码的相关部分:

L.geoJson( data,  {
    style: function (feature) {
        return { opacity: 0, fillOpacity: 0.5, fillColor: "#0f0" };
    },
    onEachFeature: function(feature, layer){

        var graph_container = '<div class="popupGraph" id="graph" style="width: 200px; height:200px;"></div>';

        layer.bindPopup(feature.properties.name + '<br>' + graph_container);    

        var svg = d3.select("#graph").selectAll("svg").append("svg").attr("width", 50).attr("height", 200);   

        var rectangle = svg.append("rect").attr("width", 25).attr("height", 25);

    }
}).addTo(map);
Run Code Online (Sandbox Code Playgroud)

我相信我遇到了问题,因为D3无法找到graph_container div但是我对如何解决这个问题感到有些困惑.

如果有人有任何使用D3,Leaflet和geoJson的经验,可以向我解释如何让我的方块显示在弹出窗口中,或者是否有人知道可以帮助我的源.我会很感激.提前致谢!

更新:比特已经解决了我的问题!如果有人需要在Leaflet弹出窗口中结合GeoJson使用D3的工作示例,Bits会在评论中发布它,但我会在这里发布它:http://jsfiddle.net/2XfVc/132/

javascript geojson d3.js leaflet

6
推荐指数
1
解决办法
7175
查看次数

MongoDB 2dsphere索引失败(格式错误的几何?)

我目前正在尝试构建一个2dsphere索引,但创建似乎失败了.

索引创建失败的文档是有效的geojson(根据geojsonlint).

另据我所知,它遵循MongoDB"Polygon"规则.

我很感激任何帮助,因为我无法弄清楚为什么索引创建似乎失败了.

提前致谢!

db.poly.ensureIndex( { loc: "2dsphere" } )
{
        "createdCollectionAutomatically" : false,
        "numIndexesBefore" : 1,
        "ok" : 0,
        "errmsg" : "Can't extract geo keys from object, malformed geometry?: { _
id: 353, loc: { type: \"Polygon\", coordinates: [ [ [ 8.090732000000001, 53.6379
766 ], [ 8.050639500000001, 53.6250853 ], [ 8.036974600000001, 53.6286108 ], [ 7
.994035500000001, 53.6016978 ], [ 8.0120927, 53.59855020000001 ], [ 8.0102720000
00001, 53.5883803 ], [ 8.023379, 53.5867745 ], [ 8.0148004, 53.5832729 ], [ 8.02
6839500000001, …
Run Code Online (Sandbox Code Playgroud)

mongodb geojson mongodb-indexes 2dsphere

6
推荐指数
1
解决办法
4314
查看次数

如何在Leaflet地图上打印/显示/绘制MultiPolygon GeoJSON

我正在尝试在Leaflet地图中显示GeoJSON MultiPolygon对象.我从PostgreSQL数据库中获取它作为JSON,并将其转换为GeoJSON.

我在GeoJSONLint中验证了de MultiPolygon对象,它没问题: 在此输入图像描述

但我无法在我的应用程序中完成此任务=(

这是我的代码:

       $http.get(URI_SERVICE+"buscar-clase/"+JSON.stringify(params))
            .success(function (data) {
                console.log(L.multiPolygon(data.coordinates).toGeoJSON());
                adaLayer.clearLayers();
                adaLayer = L.geoJson(L.multiPolygon(data.coordinates).toGeoJSON(), {
                    style: function () {
                        return {weight: 1, color: "#000000"}
                    }
                });
                adaLayer.addTo(map);
            }).error(function (err) {
                console.log(err);
        });
Run Code Online (Sandbox Code Playgroud)

为了记录,map var工作正常,我已经打印了GeoJSON的其他层.

javascript geojson angularjs leaflet

6
推荐指数
1
解决办法
2006
查看次数

使用R Leaflet放大状态以查看ZipCode

我正在使用R leaftlet包创建一个美国互​​动的等值线

在线有几个教程,我可以创建带弹出窗口和缩放的交互式州级地图.此外,我还能够使用弹出窗口再次创建单独的邮政编码级别地图.

我想在一个地图本身的两个视图,但在我放大状态或双击状态时使邮政编码可见.如果我双击纽约,纽约邮政编码就会打开.R中有包/功能可以帮我这么做吗?

以下是两者的静态屏幕截图,以明确我计划集成的内容.

r geojson leaflet

6
推荐指数
2
解决办法
4131
查看次数

在android谷歌地图中显示大型geojson文件

我正在尝试向Google Map显示geojson图层.代码如下.geojson文件存储在我的原始文件夹中.该文件有286个功能(约15MB).因此,读取此文件并显示它会消耗更多时间.最初,我出现内存不足错误,通过在清单文件中将大堆设置为true来删除.如何快速加载此文件(目前,它需要一分钟或更长时间)?我想知道是否有其他有效的方法来做到这一点.在此之后,我还将有其他任务来获取功能并显示一些属性.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
    mapFragment.getMapAsync(this);
}

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;
    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(myanmar, 5.25f));
    new MyAsyncTask().execute();
}

public class MyAsyncTask extends AsyncTask <Void, Void, Void> {

    ProgressDialog pd;
    GeoJsonLayer layer;

    @Override
    protected void onPreExecute() {
        super.onPreExecute();
        pd = new ProgressDialog(MapsActivity.this);
        pd.setMessage("Loading Data");
        pd.show();
    }

    @Override
    protected Void doInBackground(Void... voids) {
        try {
            layer = new GeoJsonLayer(mMap, R.raw.myanmar, getApplicationContext());
        } catch (Exception e) {
            Log.d("Error is : …
Run Code Online (Sandbox Code Playgroud)

android google-maps geojson

6
推荐指数
1
解决办法
2255
查看次数

杰克逊在春季启动中反序列化GeoJson Point

我有一个@Entity具有type属性的模型com.vividsolutions.jts.geom.Point。当我尝试在中呈现此模型时,出现@RestController了递归异常。

(StackOverflowError); nested exception is 
com.fasterxml.jackson.databind.JsonMappingException: Infinite 
recursion (StackOverflowError) (through reference chain: 
com.vividsolutions.jts.geom.Point[\"envelope\"]-
>com.vividsolutions.jts.geom.Point[\"envelope\"]....
Run Code Online (Sandbox Code Playgroud)

实体看起来像这样(为简洁起见简称):

@Entity
@Data
public class MyEntity{
    // ...
    @Column(columnDefinition = "geometry")
    private Point location;
    // ...
}
Run Code Online (Sandbox Code Playgroud)

经过研究,我发现这是因为杰克逊默认情况下无法反序列化GeoJson。添加此库应该可以解决此问题:https : //github.com/bedatadriven/jackson-datatype-jts

我现在不确定如何在Spring Boot的对象映射器中包含此模块。根据引导中的文档,我尝试通过@Configuration以下两种方式将其添加到中:

@Bean
public Jackson2ObjectMapperBuilder jacksonBuilder() {
    Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder();
    builder.modulesToInstall(new JtsModule());
    return builder;
}
Run Code Online (Sandbox Code Playgroud)

@Bean
public JtsModule jtsModule(){
    return new JtsModule();
}
Run Code Online (Sandbox Code Playgroud)

两者都没有删除异常。不好意思,如果这是重复的,但是我能找到的就是自定义ObjectMapper,在我对文档的理解中,这不是“弹簧启动方式”。

作为一种变通方法,我@JsonIgnore荷兰国际集团的Point和定制的getter和setter一个不存在协调对象,......但它不是我想保持它的方式。

java geojson jackson spring-boot

6
推荐指数
2
解决办法
3112
查看次数

Google 地图 - addGeoJson 不适用于我的文件

addGeoJson 无法在谷歌地图中为我的文件工作

请检查下面我在 javascript 中使用的代码

//create the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
   zoom: 6,
   center: {lat:49.79, lng: -8.82}
});

// Load GeoJSON.
var promise = $.getJSON("Sensitive_Areas_Nitrates_Rivers.json"); //same as map.data.loadGeoJson();
promise.then(function(data){
    cachedGeoJson = data; //save the geojson in case we want to update its values
    console.log(cachedGeoJson);
    map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});  
});
Run Code Online (Sandbox Code Playgroud)

我已经从这里下载了这个文件

你可以查看我的 JSON 文件 Sensitive_Areas_Nitrates_Rivers.json

此外,您可以 使用多边形检查此链接

我使用了以下 JSON 格式,因此您可以检查它

{ "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "EPSG:27700" } }, "features": [ { "type": "特征", "id": …

javascript google-maps geojson

6
推荐指数
1
解决办法
379
查看次数

如何将巨大的GeoJSON文件显示到MapBox?

我是 MapBox GL Js 的新手,我想通过 https 调用一个大的 GeoJSON 文件并将其显示到地图上。我认为调用矢量平铺是最好的方法,我发现一些教程展示了如何将 GeoJSON 数据转换为矢量平铺,但在服务器端或将其上传到 MapBox 样式,但我的 GeoJSON 文件经常更改。所以我找到了这个解决方案是一个名为 geojson-vt 的新 JavaScript 库,描述了如何将巨大的 GeoJSON 文件快速转换为矢量切片(客户端),这似乎是我正在寻找的,但是! ,如何将其集成到MapBox GL JS中以调用图层?

阻止如何使用 Mapbox GL JS 添加图层,结果如下:vartileIndex = geojsonvt(MyGeoJSON); vartile =tileIndex.getTile(z,x,y);

...或者我只是没有明白!请有人帮助或可以为我的问题提出其他解决方案。

geojson mapbox-gl-js vector-tiles

6
推荐指数
1
解决办法
3591
查看次数

如何区分具有泛型的联合?

我正在努力根据它们的几何形状(在显示一些 GeoJSON 数据的上下文中)自动推断不同类型项目的类型。

我使用的是通用类型,因此我没有设法设置自定义类型保护,因为它可以让我区分“个人”项目和“聚合”,但不能区分不同类型的“个人”项目。

基本上,我需要推理级别:

  • 区分单个项目和聚合
  • 区分每个类别中的不同几何形状。

我创建了一个简化示例,在我的真实应用程序中,我有 4 种不同类型的项目,它们可能具有不同的几何形状。

这是一个 TypeScript playground,代码如下:

type A = {type: "A", a: string}
type B = {type: "B", b: string}
type C = {type: "C", c: string}
type Geometries = A | B | C

type IndividualFeature<G extends A | B = A | B> = { geometry: G, indivAttribute: string}
type AggregateFeature = { geometry: C, aggAttribute: string}

type DisplayableFeature = IndividualFeature | AggregateFeature


const display = (feature: DisplayableFeature) => { …
Run Code Online (Sandbox Code Playgroud)

geojson typescript

6
推荐指数
1
解决办法
164
查看次数