Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / Web Mapping Tools

Web Mapping Tools

整理 OpenLayers, Leaflet, Mapbox 等的使用範例和技巧

Upgrading Google Maps JavaScript API from v2 to v3 Google (v3) Layer Example

Survey of the Best Online Mapping Tools

import osgeo.ogr
shapefile = osgeo.ogr.Open("tl_2009_us_state.shp")
numLayers = shapefile.GetLayerCount()
print "Shapefile contains %d layers" % numLayers
print
for layerNum in range(numLayers):
    layer = shapefile.GetLayer (layerNum)
    spatialRef = layer.GetSpatialRef().ExportToProj4()
    numFeatures = layer.GetFeatureCount()
    print "Layer %d has spatial reference %s" % (layerNum, spatialRef)
    print "Layer %d has %d features:" % (layerNum, numFeatures)
    print
for featureNum in range(numFeatures):
    feature = layer.GetFeature(featureNum)
    featureName = feature.GetField("NAME")
    print "Feature %d has name %s" % (featureNum, featureName)

OpenLayers

根據 OpenLayers 3 Beginner's Guide 表示,新版在效能和行動裝置支援度都提昇了,可參考 http://map.geo.admin.ch/ 結合 Open Geo 範例。

參考範例在 my.theme 模組裡註冊一個 Browser View 來顯示地圖,出現問題,把 Products.CMFPlone/browser/templates/main_template.pt 第 37 行取消執行,可以臨時解決。

Layer 是地圖的基礎,可以動態調整透明度和順序,分成 Base Layer 和 Overlay Layer,再利用 Vector Layer 顯示主題圖標。

View 用來設定 Center, Zoom, Projection,可以透過 Map({view: view}) 或 map.setView(view) 來生效。

Map 內含 Layer, View 等的設定資訊。

Target 通常搭配 DOM ID 例如 'map'。

Interaction 可以控制 Drag Rotate Zoom 動作。

Control 可以控制 FullScreen 動作。

Renderer 可以設定為 'canvas' 'dom' 'webgl'。

Animation 可以控制 Bounce Pan 動作。

OpenLayers.Util.getImageLocation("marker.png")

雙視窗對照 Linking Two Views

Projection: HDMS 和 DMSH 是投影格式?

Map 都需要指定 Project 資訊,但 Zoomify Layer 搭配的圖檔並沒有定位,必須額外指定投影資訊作為顯示時的參考。

$ wget http://github.com/openlayers/ol3/releases/download/v3.18.2/v3.18.2.zip
$ unzip v3.18.2.zip
$ cp v3.18.2/css/ol.css v3.18.2/build/ol.js /path/to/my/theme/browser/static

Custom Animation: postcompose and vectorContext

簡易整合範例: 要優先使用範例網站裡的 CSS 和 JS 檔案,它們可能和官網下載的內容結構不同。

  • 建立 Browser View 命名為 map-view 把範例 CSS JS 檔案放進 Resource Folder 裡
  • Template 的資源檔案網址要更換 可利用 <metal:styleslot fill-slot="style_slot"><link rel="" ...></metal:styleslot>
// register an event handler for the click event
map.on('click', function(event) {
  var coord = event.coordinate;
  // transform to decimal degrees
  var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
  // format a human readable version
  var hdms = ol.coordinate.toStringHDMS(degrees);
  // update the overlay element's content
  var element = overlay.getElement();
  element.innerHTML = hdms;
  // position the element
  overlay.setPosition(coord);
  map.addOverlay(overlay);
});
// create a DOM Input helper for the checkbox
var visible = new ol.dom.Input(document.getElementById('visible'));
// and bind its 'checked' property to the layer's 'visible' property
visible.bindTo('checked', layer, 'visible');

存取屬性值的不同方式

Add GeoJSON Layer: ol.source.GeoJSON() vs ol.format.GeoJSON().readFeatures() Change Layer Source URLs

 source: new ol.source.Vector({
     format: new ol.format.GeoJSON({
         defaultDataProjection: 'EPSG:4326'
     }),
-    url: '++resource++my.map/world_capitals.geojson',
+    url: 'world_capitals.geojson',

直接使用 GeoJSON 檔名,預設會讀取現行目錄裡的檔案,讓更新工作更有彈性。

Using Properties to Style Features Set Fill Style in Polygon GeoJSON Feature Style

OpenLayers.js 跟 OpenLayers.light.js 跟 OpenLayers.mobile.js 的差別

OpenLayers Script 名稱不是 OpenLayers.js 時,必須確認 Default Theme 被載入:

<link rel="stylesheet" href="/path/to/default/style.css" type="text/css">

OpenLayers function endDrag(bbox) bbox-selector

Google Base Layers Not Displayed Unless Satellite Selected

Mapbox Setellite

Overlapping Feature 處理方式

D3 Integration Using D3.js for GeoData Visualization D3 + Leaflet

d3.json("world-110m2.json", function(error, topology) {
  g.selectAll("path")
    .data(topojson.object(topology, topology.objects.countries)
      .geometries)
  .enter()
    .append("path")
    .attr("d", path)
});

WMS Time Example timeline plugin: cluster strategy, time filtering, GeoJSON GeoRSS

Bokeh + D3.js

Leaflet

Quick Start: 1) Prepare CSS + JS 2) <div id="mymap"></div> 3) JavaScript Codes

Enabling Initialization for Plone Template

WMS and TMS basemap-switcher timeline playback TimeSlider blockbuilder.org timeline

Layers Control bundle-leaflet

var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
    streets   = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]
});

Leaflet Tutorial legend color

var legend = L.control({position: 'bottomleft'});

legend.onAdd = function (mylgd) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = "<svg height='22' width='22' style='vertical-align: middle'><circle cx='10' cy='10' r='7' stroke-width='3' stroke='#3388ff' stroke-opacity='1' fill='#3388ff' fill-opacity='0.8'></circle></svg>Group A<br><svg height='22' width='22' style='vertical-align: middle'><circle cx='10' cy='10' r='7' stroke-width='3' stroke='orange' stroke-opacity='1' fill='orange' fill-opacity='0.8'></circle></svg>Group B";
    return div;
};

legend.addTo(mymap);

Matplotlib Packages

Mapping Toolkits: Basemap

Cartopy

Seaborn