博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
leaflet入门(三)使用GeoJSON创建矢量图形
阅读量:7263 次
发布时间:2019-06-29

本文共 2290 字,大约阅读时间需要 7 分钟。

#

点对象:

function g(feature, layer) {            // does this feature have a property named popupContent?            if (feature.properties && feature.properties.popupContent) {                layer.bindPopup(feature.properties.popupContent);            }        }        var geojsonFeature = {            "type": "Feature",            "properties": {                "name": "Coors Field",                "amenity": "Baseball Stadium",                "popupContent": "This is where the Rockies play!"            },            "geometry": {                "type": "Point",                "coordinates": [100, 31]            }        };        L.geoJSON(geojsonFeature, {            onEachFeature: g        }).addTo(map);

线要素:

var draw_line = {            "type": "Feature",            "geometry": {                "type": "LineString",                "coordinates": [                    [110, 11],                    [110, 49]                ]            },            "properties": {                "popupContent": "This is a free bus line that will take you across downtown.",                "underConstruction": true            },            "id": 2        };//绑定事件function f(feature, layer) {    layer.bindPopup(feature.properties.popupContent);}//增加到地图var ss = L.geoJson(draw_line, {    style: {        "color": 'black',        "weight": 1    },    onEachFeature: f}).addTo(map);

多边形(Polygon)

var states = [{    "type": "Feature",    "properties": {
"party": "Republican"}, "geometry": { "type": "Polygon", "coordinates": [[ [-104.05, 48.99], [-97.22, 48.98], [-96.58, 45.94], [-104.03, 45.94], [-104.05, 48.99] ]] }}, { "type": "Feature", "properties": {
"party": "Democrat"}, "geometry": { "type": "Polygon", "coordinates": [[ [-109.05, 41.00], [-102.06, 40.99], [-102.03, 36.99], [-109.04, 36.99], [-109.05, 41.00] ]] }}];L.geoJSON(states, { style: function(feature) { switch (feature.properties.party) { case 'Republican': return {color: "#ff0000"}; case 'Democrat': return {color: "#0000ff"}; } }}).addTo(map);

 

转载于:https://www.cnblogs.com/tinaluo/p/7245850.html

你可能感兴趣的文章
android 应用程序Activity之间数据传递与共享的几种途径
查看>>
HTML标签,CSS简介
查看>>
基于java网络聊天室--服务器端
查看>>
mysql从入门到放弃-入门知识介绍
查看>>
[SDOI2010]大陆争霸
查看>>
UVA 12520 Square Garden
查看>>
新的开始
查看>>
Effective C++ 阅读笔记(一)透彻了解inline以及降低编译依存关系
查看>>
C# Hashtable vs Dictionary 学习笔记
查看>>
angular 按需加载
查看>>
关于django的操作(四)
查看>>
在CListView中添加点击右键消息响应函数!
查看>>
微信跳一跳
查看>>
location对象的使用
查看>>
php搭建redis扩展安装及配置
查看>>
DOS批处理高级教程:第四章 批处理中的变量
查看>>
【机器学习】多项式回归
查看>>
Cube的高级设置
查看>>
golang笔记——命令
查看>>
return在try...except...finally...中的表现
查看>>