其他地圖服務範例

- Population Density Explorer (populationexplorer.org) leaflet client and c# asp.net server, sqlite database

地質雲 - 資料供應服務有Google Map, Leaflet, OpenLayer, ESRI 個平台，使用地質資料範例。

MapBox 基本範例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

mapboxgl.accessToken = 'put your toke here';

var map = new mapboxgl.Map({

container: 'map',

center: [120.7, 23.6],

zoom: 7,

style: 'mapbox://styles/mapbox/streets-v11'

});

</script>

</body>

</html>

OpenLayer 基本範例

<!DOCTYPE html>

<head>

<style>

.map {

height: 750px;

width: 480px;

}

</style>

<title>OpenLayers 範例</title>

</head>

<body>

var map = new ol.Map({

target: 'map',

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

],

view: new ol.View({

center: ol.proj.fromLonLat([120.7, 23.7]),

zoom: 8

})

});

</script>

</body>

</html>

leatlet 基本範例

<!DOCTYPE html>

<html>

<head>

<title>Leaflet 基本範例</title>

<style>

#map {

width: 480px;

height: 750px;

}

</style>

</head>

<body>

var mymap = L.map('map').setView([23.7, 120.7], 8);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {

maxZoom: 18,

id: 'mapbox.streets'

}).addTo(mymap);

</script>

</body>

</html>

Leaflet 國土測繪圖資雲範例

</body><!DOCTYPE html>

<html>

<head>

<title>Leaflet 國土測繪圖資雲範例</title>

<style>

h1 {color:red; background-color:yellow;}

#map {

width: 480px;

height: 750px;

}

</style>

</head>

<body>

<h1> leaflet 示範</h1>

var mymap = L.map('map').setView([23.7, 120.7], 8);

L.tileLayer('https://wmts.nlsc.gov.tw/wmts/{id}/default/GoogleMapsCompatible/{z}/{y}/{x}.png', {

maxZoom: 18,

id: 'LUIMAP'

}).addTo(mymap);

L.tileLayer('https://wmts.nlsc.gov.tw/wmts/{id}/default/GoogleMapsCompatible/{z}/{y}/{x}.png', {

maxZoom: 18,

id: 'EMAP2'

}).addTo(mymap);

// EMAP 臺灣通用電子地圖; EMAP5 臺灣通用電子地圖(套疊等高線), EMAP6 臺灣通用電子地圖(不含等高線)

//LANDSECT 段籍圖; LUIMAP 國土利用調查成果圖; PHOTO2 正射影像圖(通用版); DMAPS 地籍圖磚

//EMAP8 臺灣通用電子地圖EN; EMAP7 臺灣通用電子地圖EN(透明)

</script>

</body>

</html>

leatlet 向量物件範例

<!DOCTYPE html>

<html>

<head>

<title>Quick Start - Leaflet</title>

</head>

<body>

//initialize with [lat,long],zoom

var mymap = L.map('mapid').setView([23.7, 120.7], 8);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {

maxZoom: 18,

attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +

'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

id: 'mapbox.streets'

}).addTo(mymap);

L.marker([24.25, 121]).addTo(mymap)

.bindPopup("<b>Hello world!</b><br />這是點.").openPopup();

L.circle([23.5, 121], 15000, {

color: 'red',

fillColor: '#f03',

fillOpacity: 0.5

}).addTo(mymap).bindPopup("這是圓");

L.polygon([

[23.8, 120.4],

[23.8, 120.6],

[24.0, 120.4]

]).addTo(mymap).bindPopup("這是多邊形");

var popup = L.popup();

function onMapClick(e) {

popup

.setLatLng(e.latlng)

.setContent("你點的位置是 " + e.latlng.toString())

.openOn(mymap);

}

mymap.on('click', onMapClick);

</script>

</body>

</html>

leatlet 國土測繪圖資服務雲及經濟地理圖資中心 API

<!DOCTYPE html>

<html>

<head>

<title>Leaflet nlsc & egis.moea</title>

</head>

<body>

var mymap = L.map('map_div').setView([25.0401,121.509], 16);

//國土測繪中心 wmts作為底圖

var basemap = L.tileLayer('https://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/{z}/{y}/{x}', {

attribution: '資料來源：<a href="https://maps.nlsc.gov.tw/">國土測繪圖資服務雲; <a href="https://egis.moea.gov.tw/">經濟地理圖資中心</a>'

}).addTo(mymap);

L.marker([25.0401, 121.509]).addTo(mymap)

L.circle([25.0401, 121.509], 500, {

color: 'red',

fillColor: '#f03',

fillOpacity: 0.2

}).addTo(mymap)

//使用jquery ajax 介接經濟部經濟地理圖資中心商家查詢api, 可cross site 查詢

$.ajax({

url: "https://egis.moea.gov.tw/MoeaEGFxData_WebAPI_Inside/InnoServe/BusinessBUSM?resptype=GeoJson&x=121.509&y=25.0401&buffer=500",

type: 'GET',

success: function (data) {

var symbol = {

radius: 3,

fillColor: "#ff7800",

color: "#000",

weight: 1,

opacity: 1,

fillOpacity: 0.8

};

L.geoJSON(data, {

pointToLayer: function (feature, latlng) {

return L.circleMarker(latlng, symbol);

},

onEachFeature: function (feature, layer) {

layer.bindPopup(feature.properties.BussName);

}

}).addTo(mymap);

}

});

</script>

</body>

</html>

leatlet vector tile 向量圖磚

<!DOCTYPE html>

<html>

<head>

<title>VectorGrid.Protobuf example</title>

</head>

var map = L.map('map');

var vectorTileStyling = {

water: {

fill: true,

weight: 1,

fillColor: '#06cccc',

color: '#06cccc',

fillOpacity: 0.2,

opacity: 0.4,

},

admin: {

weight: 1,

fillColor: 'pink',

color: 'pink',

fillOpacity: 0.2,

opacity: 0.4

},

waterway: {

weight: 1,

fillColor: '#2375e0',

color: '#2375e0',

fillOpacity: 0.2,

opacity: 0.4

},

landcover: {

fill: true,

weight: 1,

fillColor: '#53e033',

color: '#53e033',

fillOpacity: 0.2,

opacity: 0.4,

},

landuse: {

fill: true,

weight: 1,

fillColor: '#e5b404',

color: '#e5b404',

fillOpacity: 0.2,

opacity: 0.4

},

park: {

fill: true,

weight: 1,

fillColor: '#84ea5b',

color: '#84ea5b',

fillOpacity: 0.2,

opacity: 0.4

},

boundary: {

weight: 1,

fillColor: '#c545d3',

color: '#c545d3',

fillOpacity: 0.2,

opacity: 0.4

},

aeroway: {

weight: 1,

fillColor: '#51aeb5',

color: '#51aeb5',

fillOpacity: 0.2,

opacity: 0.4

},

road: { // mapbox & nextzen only

weight: 1,

fillColor: '#f2b648',

color: '#f2b648',

fillOpacity: 0.2,

opacity: 0.4

},

tunnel: { // mapbox only

weight: 0.5,

fillColor: '#f2b648',

color: '#f2b648',

fillOpacity: 0.2,

opacity: 0.4,

// dashArray: [4, 4]

},

bridge: { // mapbox only

weight: 0.5,

fillColor: '#f2b648',

color: '#f2b648',

fillOpacity: 0.2,

opacity: 0.4,

// dashArray: [4, 4]

},

transportation: { // openmaptiles only

weight: 0.5,

fillColor: '#f2b648',

color: '#f2b648',

fillOpacity: 0.2,

opacity: 0.4,

// dashArray: [4, 4]

},

transit: { // nextzen only

weight: 0.5,

fillColor: '#f2b648',

color: '#f2b648',

fillOpacity: 0.2,

opacity: 0.4,

// dashArray: [4, 4]

},

building: {

fill: true,

weight: 1,

fillColor: '#2b2b2b',

color: '#2b2b2b',

fillOpacity: 0.2,

opacity: 0.4

},

water_name: {

weight: 1,

fillColor: '#022c5b',

color: '#022c5b',

fillOpacity: 0.2,

opacity: 0.4

},

transportation_name: {

weight: 1,

fillColor: '#bc6b38',

color: '#bc6b38',

fillOpacity: 0.2,

opacity: 0.4

},

place: {

weight: 1,

fillColor: '#f20e93',

color: '#f20e93',

fillOpacity: 0.2,

opacity: 0.4

},

housenumber: {

weight: 1,

fillColor: '#ef4c8b',

color: '#ef4c8b',

fillOpacity: 0.2,

opacity: 0.4

},

poi: {

weight: 1,

fillColor: '#3bb50a',

color: '#3bb50a',

fillOpacity: 0.2,

opacity: 0.4

},

earth: { // nextzen only

fill: true,

weight: 1,

fillColor: '#c0c0c0',

color: '#c0c0c0',

fillOpacity: 0.2,

opacity: 0.4

},

// Do not symbolize some stuff for openmaptiles

country_name: [],

marine_name: [],

state_name: [],

place_name: [],

waterway_name: [],

poi_name: [],

road_name: [],

housenum_name: [],

};

var openmaptilesUrl = "https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}";

var openmaptilesVectorTileOptions = {

rendererFactory: L.canvas.tile,

attribution: '<a href="https://openmaptiles.org/">© OpenMapTiles</a>, <a href="http://www.openstreetmap.org/copyright">© OpenStreetMap</a> contributors',

vectorTileLayerStyles: vectorTileStyling,

subdomains: '0123',

key: 'UmmATPUongHdDmIicgs7',

maxZoom: 14

};

L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map);

map.setView([23.7, 120.7], 8);;

</script>

</body>

</html>

其他地圖服務範例

地質雲 - 資料供應服務 有Google Map, Leaflet, OpenLayer, ESRI 個平台，使用地質資料範例。

MapBox 基本範例

OpenLayer 基本範例

leatlet 基本範例

Leaflet 國土測繪圖資雲範例

leatlet 向量物件範例

leatlet 國土測繪圖資服務雲及經濟地理圖資中心 API

leatlet vector tile 向量圖磚

地質雲 - 資料供應服務有Google Map, Leaflet, OpenLayer, ESRI 個平台，使用地質資料範例。